/* =====================================================================
POLLITO PÍO · HOJA DE ESTILOS COMPARTIDA
---------------------------------------------------------------------
Este archivo lo usan TODAS las páginas del sitio.
Si cambiás algo acá, cambia en todas de una sola vez.
Cada página lo llama con esta línea en el :
Lo que hay acá:
1. Colores y sombras (variables)
2. Base y tipografía
3. Contenedores y utilidades
4. Botones
5. Barra superior + menú
6. Migas de pan
7. Pie de página
8. Botón flotante de WhatsApp
9. Animación de aparición
===================================================================== */
/* ── 1. COLORES Y SOMBRAS ────────────────────────────────────────────
✏️ Para cambiar la identidad del sitio entero, tocá SOLO esto. */
:root{
--tinta:#4a3618; --tinta-soft:#8a7658; --crema:#fffcf4; --crema2:#fff6e3;
--naranja:#f26a1b; --naranja-soft:#ffe4cf; --durazno:#ffe0c7; --rosa:#ffd9e6;
--rosa-mid:#ff8fb8; --celeste:#d3ecfb; --celeste-mid:#5cb8e8; --amarillo:#ffcf3f;
--lila:#e9e0fb; --menta:#d3f5e6; --verde:#1f9d57; --wa:#25d366; --linea:#f0e6d2;
--sh-sm:0 4px 14px rgba(74,54,24,.10);
--sh-md:0 10px 30px rgba(74,54,24,.12);
--sh-lg:0 18px 44px rgba(74,54,24,.14);
/* Datos de contacto usados en varios lugares */
--alto-nav:66px;
}
/* ── 2. BASE ─────────────────────────────────────────────────────── */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;color-scheme:light;overflow-x:hidden;overflow-x:clip;
background:var(--crema);min-height:100%}
body{font-family:'Nunito',system-ui,sans-serif;color:var(--tinta);background:var(--crema);
overflow-x:hidden;overflow-x:clip;line-height:1.5;min-height:100%}
h1,h2,h3{font-family:'Fredoka',sans-serif;line-height:1.1;font-weight:600}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
/* ── 3. CONTENEDORES Y UTILIDADES ────────────────────────────────── */
.container{max-width:1120px;margin:0 auto;padding:0 22px}
section{padding:56px 0;background:var(--crema)}
.eyebrow{display:inline-block;font-weight:700;font-size:12px;letter-spacing:1.2px;
text-transform:uppercase;color:var(--naranja)}
.sec-head{text-align:center;max-width:660px;margin:0 auto 34px}
.sec-head h2{font-size:clamp(25px,4.6vw,36px);margin-top:6px;letter-spacing:-.5px}
.sec-head p{color:var(--tinta-soft);font-weight:500;margin-top:10px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* Hueco punteado para fotos que todavía no cargaste */
.ph-img{display:flex;align-items:center;justify-content:center;text-align:center;
background:var(--crema2);border:2px dashed #d8b78f;border-radius:24px 24px 24px 8px;
color:var(--tinta-soft);font-family:'Fredoka';font-weight:600;font-size:15px;
padding:24px;line-height:1.45}
/* ── 4. BOTONES ──────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
font-family:'Nunito';font-weight:700;font-size:16px;cursor:pointer;
padding:14px 24px;border-radius:100px;border:none;text-decoration:none;
color:var(--tinta);background:#fff;box-shadow:var(--sh-sm);
transition:transform .15s,box-shadow .15s}
.btn:hover{transform:translateY(-2px);box-shadow:var(--sh-md)}
.btn.pri{background:var(--naranja);color:#fff}
.btn.wa{background:var(--wa);color:#fff}
.btn.ghost{background:#fff;color:var(--tinta);box-shadow:inset 0 0 0 2px var(--linea),var(--sh-sm)}
.btn.light{background:rgba(255,255,255,.14);color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.4)}
.btn.light:hover{background:rgba(255,255,255,.22)}
/* ── 5. BARRA SUPERIOR + MENÚ ────────────────────────────────────── */
/* Ojo: va con "body > nav" a propósito, para que estos estilos afecten SOLO
a la barra de arriba y no a cualquier otro