/* ============================================================
   CRUDO · sections.css
   Estilos por sección, en el mismo orden que aparecen en la página:
     1. Navbar        5. Sobre nosotros
     2. Hero          6. Reseñas
     3. Servicios     7. Contacto + formulario
     4. Portfolio     8. Footer
                      9. Responsive (980px y 560px)
   ============================================================ */

/* ===================== 1. NAVBAR ===================== */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:200;
  display:flex; justify-content:center;
  padding:0 16px;
}
.nav-pill{
  display:flex; align-items:center; gap:clamp(12px,2vw,30px);
  background:var(--negro);
  border:1px solid rgba(245,240,232,.10);
  border-top:none;
  border-radius:0 0 26px 26px;
  padding:12px 14px 12px 18px;
  box-shadow:0 18px 40px -22px rgba(0,0,0,.9);
  max-width:100%;
}
.nav-logo{ display:flex; }
.nav-logo img{ width:40px; height:auto; }
.nav-links{ display:flex; gap:clamp(12px,1.6vw,26px); list-style:none; margin:0; padding:0; }
.nav-links a{ font-weight:600; font-size:.95rem; color:rgba(245,240,232,.82); transition:color .2s; position:relative; }
.nav-links a:hover{ color:var(--crema); }
.nav-links a::after{ content:""; position:absolute; left:0; right:100%; bottom:-5px; height:2px; background:var(--rojo-vivo); transition:right .3s var(--ease-crudo); }
.nav-links a:hover::after{ right:0; }
.nav-cta{ padding:.6em 1.1em; font-size:.92rem; }

/* Burger + drawer (solo ≤980px) */
.nav-burger{ display:none; flex-direction:column; gap:5px; background:none; border:none; padding:8px; }
.nav-burger span{ width:24px; height:2.5px; background:var(--crema); border-radius:2px; transition:.3s var(--ease-crudo); }
.nav-burger.x span:nth-child(1){ transform:translateY(7.5px) rotate(45deg); }
.nav-burger.x span:nth-child(2){ opacity:0; }
.nav-burger.x span:nth-child(3){ transform:translateY(-7.5px) rotate(-45deg); }
.nav-drawer{
  position:fixed; top:74px; left:16px; right:16px; z-index:199;
  background:var(--negro); border:1px solid rgba(245,240,232,.12);
  border-radius:20px; padding:18px; display:flex; flex-direction:column; gap:14px;
  transform:translateY(-14px); opacity:0; pointer-events:none; visibility:hidden;
  transition:.3s var(--ease-crudo);
}
.nav-drawer.show{ transform:none; opacity:1; pointer-events:auto; visibility:visible; }
.nav-drawer a{ font-weight:600; font-size:1.05rem; }
.nav-drawer .pill{ align-self:flex-start; }

/* ===================== 2. HERO ===================== */
.hero{ padding:6px; }
.hero-frame{
  position:relative;
  min-height:100svh;
  border-radius:34px;
  overflow:hidden;
  background:var(--negro-puro);
  display:flex; align-items:flex-end;
}
.hero-video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; z-index:0;
  opacity:0.82;
}
.hero-grad{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(to top, rgba(11,11,11,.92) 0%, rgba(11,11,11,.30) 38%, rgba(11,11,11,.10) 60%, rgba(11,11,11,.45) 100%);
}
.hero-content{
  position:relative; z-index:3;
  width:100%;
  display:flex; flex-direction:column;
  align-items:flex-start;
  gap:clamp(22px,3.5vh,40px);
  padding-bottom:clamp(40px,7vh,80px);
  padding-top:140px;
}
.hero-h1{
  color:var(--crema);
  font-size:clamp(3.4rem, 11vw, 11rem);
  line-height:0.86;
  margin:0;
  margin-left:-0.06em;
}
.hero-meta{
  display:flex; flex-wrap:wrap; align-items:flex-end;
  gap:clamp(20px,4vw,52px);
  width:100%;
}
.hero-sub{
  font-size:clamp(1.05rem,1.4vw,1.35rem);
  color:rgba(245,240,232,.9);
  max-width:44ch; margin:0; flex:1 1 320px;
}
.hero-sub em{ color:var(--oro); font-style:italic; }

/* ===================== 3. SERVICIOS (acordeón) ===================== */
.servicios{ background:var(--negro); padding:clamp(70px,11vh,130px) 0 clamp(80px,12vh,150px); }
.servicios-head{ max-width:880px; margin-bottom:40px; }
.servicios-h2{ font-size:clamp(2.4rem,5.2vw,4.8rem); margin:.18em 0 .35em; color:var(--crema); }
.servicios-h2 .rojo{ color:var(--rojo-vivo); }
.servicios-baj{ color:rgba(245,240,232,.72); font-size:clamp(1.1rem,1.8vw,1.5rem); font-weight:600; }
.servicios-baj .rojo{ color:var(--rojo-vivo); }

.slist{ border-top:1px solid rgba(245,240,232,.14); }
.srow{
  border-bottom:1px solid rgba(245,240,232,.14);
  opacity:0; transform:translateY(20px);
  transition:opacity .6s var(--ease-crudo), transform .6s var(--ease-crudo), background .3s;
}
.srow.in{ opacity:1; transform:none; }
.srow:hover{ background:rgba(245,240,232,.03); }
.srow-h{ margin:0; font:inherit; }
.srow-head{
  width:100%; background:none; border:none; color:var(--crema);
  display:flex; align-items:center; gap:clamp(16px,3vw,42px);
  padding:clamp(20px,3vh,36px) 6px; text-align:left;
}
.srow-n{ font-size:clamp(1.4rem,2.4vw,2.2rem); color:var(--rojo-vivo); flex:0 0 auto; min-width:1.8em; }
.srow-t{ font-size:clamp(1.6rem,4vw,3.4rem); flex:1; transition:transform .35s var(--ease-crudo); color:var(--crema); }
.srow:hover .srow-t{ transform:translateX(10px); }
.srow-sticker{ flex:0 0 auto; width:0; overflow:hidden; opacity:0; transition:.35s var(--ease-crudo); }
.srow-sticker img{ width:48px; height:auto; }
.srow:hover .srow-sticker{ width:48px; opacity:1; }
.srow-ico{ flex:0 0 auto; color:var(--crema); font-size:1.5rem; display:grid; place-items:center; transition:transform .4s var(--ease-crudo); }
.srow.open .srow-ico{ transform:rotate(135deg); color:var(--rojo-vivo); }
.srow-panel{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .45s var(--ease-crudo); }
.srow.open .srow-panel{ grid-template-rows:1fr; }
.srow-panel-in{ overflow:hidden; }
.srow-panel-in p{
  margin:0; padding:0 6px clamp(22px,3vh,34px) calc(clamp(16px,3vw,42px) + 1.8em + clamp(16px,3vw,42px));
  color:rgba(245,240,232,.72); font-size:clamp(1rem,1.4vw,1.25rem); max-width:60ch;
}

/* ===================== 4. PORTFOLIO ===================== */
.portfolio{ background:var(--negro); padding:clamp(70px,11vh,130px) 0 clamp(80px,12vh,150px); }
.portfolio-head{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:30px; margin-bottom:46px; }
.portfolio-h2{ font-size:clamp(2.6rem,6vw,5.2rem); margin:.18em 0 .25em; color:var(--crema); }
.portfolio-h2 .rojo{ color:var(--rojo-vivo); }
.portfolio-baj{ color:rgba(245,240,232,.7); font-size:1.1rem; }

/* Filtros */
.filters{ display:flex; flex-wrap:wrap; gap:10px; }
.filter{ background:transparent; color:rgba(245,240,232,.78); border:1.5px solid rgba(245,240,232,.2); padding:.6em 1.25em; font-size:.92rem; }
.filter:hover{ border-color:var(--crema); color:var(--crema); }
.filter.active{ background:var(--rojo); border-color:var(--rojo); color:var(--crema); }

/* Grilla de cards */
.pgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.pcard{ transition:opacity .5s var(--ease-crudo), transform .5s var(--ease-crudo); }
.pcard.hide{ display:none; }
.pcard.show{ opacity:1; transform:none; animation:cardIn .55s var(--ease-crudo) both; }
@keyframes cardIn{ from{ opacity:0; transform:translateY(26px) scale(.97); } to{ opacity:1; transform:none; } }
.pcard-thumb{
  position:relative; aspect-ratio:4/3.2; border-radius:18px; overflow:hidden;
  cursor:pointer; width:100%; padding:0; border:none; display:block;
  /* shimmer mientras carga la imagen */
  background:linear-gradient(100deg, rgba(245,240,232,.06) 30%, rgba(245,240,232,.14) 45%, rgba(245,240,232,.06) 60%);
  background-size:200% 100%;
  animation:imgShimmer 1.6s ease-in-out infinite;
}
.pcard-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease-crudo), opacity .5s ease; opacity:0; }
.pcard-img.loaded{ opacity:1; }
.no-js .pcard-img{ opacity:1; }
.pcard-thumb:hover .pcard-img{ transform:scale(1.07); }
.pcard-open{
  position:absolute; left:14px; bottom:14px; z-index:3;
  display:inline-flex; align-items:center; gap:7px;
  background:var(--crema); color:var(--negro);
  font-size:.82rem; font-weight:800;
  padding:8px 14px; border-radius:999px;
  opacity:0; transform:translateY(8px); transition:.35s var(--ease-crudo);
}
.pcard-open .ico{ font-size:.95rem; }
.pcard-thumb:hover .pcard-open, .pcard-thumb:focus-visible .pcard-open{ opacity:1; transform:none; }
.pcard-disc-tag{
  position:absolute; left:14px; top:14px; z-index:3;
  background:var(--negro); color:var(--crema); font-size:.7rem; font-weight:700;
  padding:5px 11px; border-radius:999px; text-transform:uppercase; letter-spacing:.05em;
  opacity:0; transform:translateY(-6px); transition:.35s var(--ease-crudo);
}
.pcard-thumb:hover .pcard-disc-tag{ opacity:1; transform:none; }
.pcard-meta{ display:flex; justify-content:space-between; align-items:baseline; padding:14px 4px 0; }
.pcard-meta h3{ font-size:1.8rem; color:var(--crema); }
.pcard-disc{ color:rgba(245,240,232,.55); font-size:.85rem; font-weight:600; }

/* Botón "Ver más / Ver menos trabajos" */
.pgrid-more{ display:flex; width:fit-content; margin:34px auto 0; padding:.85em 1.8em; }

/* ---- Modal de proyecto ---- */
.pmodal-overlay{
  position:fixed; inset:0; z-index:500;
  background:rgba(8,8,8,.78); backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center;
  padding:clamp(12px,4vw,48px);
  animation:overlayIn .3s ease both;
}
@keyframes overlayIn{ from{ opacity:0; } to{ opacity:1; } }
.pmodal{
  position:relative; width:min(940px,100%); max-height:92vh;
  background:var(--crema); color:var(--negro);
  border-radius:26px; overflow:hidden;
  box-shadow:0 50px 90px -30px rgba(0,0,0,.8);
  animation:modalIn .45s var(--ease-crudo) both;
}
@keyframes modalIn{ from{ opacity:0; transform:translateY(28px) scale(.97); } to{ opacity:1; transform:none; } }
.pmodal-close{
  position:absolute; top:16px; right:16px; z-index:5;
  width:44px; height:44px; border-radius:999px; border:none;
  background:var(--negro); color:var(--crema);
  font-size:1.7rem; line-height:1; display:grid; place-items:center;
  transition:transform .25s var(--ease-crudo), background .2s;
}
.pmodal-close:hover{ background:var(--rojo); transform:rotate(90deg); }
.pmodal-scroll{ max-height:92vh; overflow-y:auto; padding:clamp(30px,4vw,48px) clamp(26px,4vw,48px) clamp(34px,4vw,48px); }
.pmodal-head{ max-width:60ch; }
.pmodal-tag{
  display:inline-block; font-family:ui-monospace,Menlo,monospace; font-size:.72rem;
  letter-spacing:.04em; text-transform:lowercase;
  background:var(--rojo); color:var(--crema); padding:5px 12px; border-radius:999px;
}
.pmodal-title{ font-size:clamp(2.6rem,7vw,4.6rem); line-height:1.05; margin:.3em 0 .25em; padding-bottom:.05em; color:var(--negro); }
.pmodal-intro{ font-size:clamp(1.1rem,1.8vw,1.4rem); font-weight:600; line-height:1.35; color:#2a2722; margin:0; }

/* Galería: 2 → 2 col · 3 → 3 col · 4 → 2×2 */
.pmodal-gallery{
  display:grid; grid-template-columns:repeat(3,1fr); gap:14px;
  margin:clamp(24px,3.5vw,38px) 0;
}
.pmodal-gallery[data-count="1"]{ grid-template-columns:1fr; max-width:420px; margin-inline:auto; }
.pmodal-gallery[data-count="2"]{ grid-template-columns:1fr 1fr; }
.pmodal-gallery[data-count="3"]{ grid-template-columns:repeat(3,1fr); }
.pmodal-gallery[data-count="4"]{ grid-template-columns:1fr 1fr; }
.pmodal-img{
  border-radius:16px; overflow:hidden; aspect-ratio:4/3;
  background:linear-gradient(100deg, rgba(17,17,17,.05) 30%, rgba(17,17,17,.12) 45%, rgba(17,17,17,.05) 60%);
  background-size:200% 100%;
  animation:imgShimmer 1.6s ease-in-out infinite;
}
.pmodal-img img{ width:100%; height:100%; object-fit:cover; display:block; opacity:0; transition:opacity .5s ease; }
.pmodal-img img.loaded{ opacity:1; }
.pmodal-img.ratio-ig{ aspect-ratio:1080/1350; }   /* post de Instagram */
.pmodal-img.ratio-wide{ aspect-ratio:16/9; }      /* capturas web */
.pmodal-img.ratio-reel{ aspect-ratio:9/16; }      /* reels verticales */
.pmodal-img video{ width:100%; height:100%; object-fit:cover; display:block; background:#000; }

.pmodal-body{ max-width:64ch; }
.pmodal-body p{ font-size:1.08rem; line-height:1.6; color:#33302a; margin:0; padding-bottom:.1em; }
.pmodal-foot{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:18px;
  margin-top:clamp(26px,4vw,40px); padding-top:24px; border-top:1px solid rgba(17,17,17,.12);
}
.pmodal-foot-ctas{ display:flex; flex-wrap:wrap; align-items:center; gap:14px; }
.pmodal-ig{ color:var(--negro); border-color:rgba(17,17,17,.25); }
.pmodal-ig:hover{ border-color:var(--rojo); color:var(--rojo); }
.pmodal-disc{ font-weight:800; text-transform:uppercase; letter-spacing:.06em; font-size:.85rem; color:var(--rojo); }
@media (max-width:620px){
  .pmodal-gallery[data-count="3"], .pmodal-gallery[data-count="4"]{ grid-template-columns:1fr 1fr; }
  .pmodal-foot .cta-big{ width:100%; justify-content:space-between; }
}

/* ===================== 5. SOBRE NOSOTROS ===================== */
.sobre{ background:var(--crema); color:var(--negro); padding:clamp(80px,12vh,150px) 0; }
.sobre-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,6vw,90px); align-items:center; }
.sobre-h2{ font-size:clamp(2.6rem,6vw,5.4rem); margin:.2em 0 .5em; color:var(--negro); }
.sobre-h2 .rojo{ color:var(--rojo); }
.sobre-body{ font-size:clamp(1.15rem,1.8vw,1.6rem); font-weight:500; line-height:1.4; color:var(--negro); max-width:30ch; }
.sobre-close{ margin-top:1.4em; font-size:clamp(1.3rem,2.4vw,2.1rem); font-weight:800; line-height:1.2; max-width:20ch; }
.sobre-close .rojo{ color:var(--rojo); }
.kicker.rojo{ color:var(--rojo); }

/* Polaroids: 2 arriba + la tercera centrada abajo */
.polas{
  display:grid; grid-template-columns:1fr 1fr; gap:18px;
  justify-items:center;
}
.polas .pola:nth-child(3){ grid-column:1 / span 2; justify-self:center; width:100%; max-width:240px; }
.pola{
  position:relative;
  background:#fff; padding:12px 12px 0; border-radius:6px;
  box-shadow:0 22px 40px -22px rgba(0,0,0,.4);
  transform:rotate(var(--rot)) translateY(40px) scale(.94);
  opacity:0; transition:transform .8s var(--ease-crudo), opacity .6s;
  width:100%; max-width:240px; margin:0 auto;
}
.pola.in{ transform:rotate(var(--rot)) translateY(0) scale(1); opacity:1; }
.pola:hover{ transform:rotate(0deg) translateY(-8px) scale(1.04); z-index:30 !important; box-shadow:0 30px 50px -20px rgba(0,0,0,.5); }
.pola-photo{ position:relative; aspect-ratio:1/1.05; border-radius:3px; overflow:hidden; }
.pola-photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.pola-cap{ display:block; text-align:center; font-family:'Inter',sans-serif; font-size:.82rem; padding:12px 4px 16px; color:#444; font-style:italic; }

/* ===================== 6. RESEÑAS ===================== */
.resenas{ background:var(--negro); padding:clamp(80px,12vh,140px) 0 clamp(60px,8vh,100px); overflow:hidden; }
.resenas-head{ text-align:center; max-width:720px; margin-inline:auto; }
.resenas-h2{ font-size:clamp(2.8rem,8vw,7rem); margin:.18em 0 .35em; color:var(--crema); }
.resenas-h2 .rojo{ color:var(--rojo-vivo); }
.resenas-baj{ color:rgba(245,240,232,.72); font-size:clamp(1.05rem,1.6vw,1.35rem); max-width:42ch; margin-inline:auto; }
.kicker.oro{ color:var(--oro); }

/* Carrusel infinito */
.rcarousel-wrap{ position:relative; margin-top:54px; }
.rcarousel{
  display:flex; gap:24px;
  overflow-x:auto; padding:10px clamp(20px,5vw,72px) 8px;
  margin:0; list-style:none;
  scrollbar-width:none; cursor:grab; scroll-behavior:auto;
}
.rcarousel::-webkit-scrollbar{ display:none; }
.rcarousel.grabbing{ cursor:grabbing; }

.rcard{
  position:relative; flex:0 0 auto;
  width:min(380px,80vw);
  background:var(--crema);
  color:var(--negro);
  border-radius:22px;
  padding:34px 30px 28px;
  display:flex; flex-direction:column; gap:16px;
  box-shadow:0 30px 50px -34px rgba(0,0,0,.7);
  user-select:none;
}
.rcard-quote{
  position:absolute; top:14px; right:24px;
  font-family:var(--font-display);
  font-size:5.5rem; line-height:1;
  color:var(--rojo); opacity:.16; pointer-events:none;
}
.rcard-text{
  margin:0; font-size:1.05rem; line-height:1.5; font-style:italic;
  color:#2a2722; flex:1;
}

.rc-arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:48px; height:48px; border-radius:999px;
  background:var(--crema); color:var(--negro);
  border:none; font-size:1.7rem; line-height:1;
  display:grid; place-items:center;
  box-shadow:0 12px 24px -10px rgba(0,0,0,.6);
  transition:transform .25s var(--ease-crudo), background .2s, color .2s;
}
.rc-arrow:hover{ background:var(--rojo); color:var(--crema); transform:translateY(-50%) scale(1.08); }
.rc-arrow.prev{ left:clamp(8px,2vw,28px); }
.rc-arrow.next{ right:clamp(8px,2vw,28px); }
@media (hover:none){ .rc-arrow{ display:none; } }

/* Contadores */
.counters{ display:flex; flex-wrap:wrap; gap:clamp(28px,6vw,80px); justify-content:center; align-items:flex-start; margin-top:56px; }
.counter{ display:flex; flex-direction:column; align-items:center; text-align:center; flex:0 1 220px; max-width:220px; }
.counter-n{ font-size:clamp(3rem,7vw,5.5rem); color:var(--rojo-vivo); line-height:.9; }
.counter-l{ font-size:.9rem; color:rgba(245,240,232,.65); font-weight:600; margin-top:.5em; text-transform:uppercase; letter-spacing:.06em; line-height:1.3; text-wrap:balance; }

/* ===================== 7. CONTACTO ===================== */
.contacto{ background:var(--crema); color:var(--negro); padding:clamp(80px,12vh,150px) 0 0; }
.contacto-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,6vw,90px); align-items:center; }
.contacto-h2{ font-size:clamp(2.6rem,6vw,5.4rem); margin:.2em 0 .4em; color:var(--negro); }
.contacto-h2 .rojo{ color:var(--rojo); }
.contacto-baj{ font-size:clamp(1.2rem,2vw,1.7rem); font-weight:500; max-width:24ch; }
.contacto-data{ list-style:none; padding:0; margin:2.2em 0 1.6em; display:flex; flex-direction:column; gap:14px; font-style:normal; }
.contacto-data a{ display:inline-flex; align-items:center; gap:12px; font-weight:600; font-size:1.05rem; transition:color .2s; }
.contacto-data a:hover{ color:var(--rojo); }
.contacto-data a:hover .cd-ico{ background:var(--rojo); animation:vibrate .3s linear infinite; }
.cd-ico{ width:38px; height:38px; border-radius:12px; background:var(--negro); color:var(--crema); display:grid; place-items:center; font-size:1.1rem; transition:.25s var(--ease-crudo); }

/* Card del formulario */
.contacto-right{ position:relative; }
.form-card{ position:relative; background:#fff; border-radius:28px; padding:clamp(26px,3.5vw,44px); box-shadow:0 34px 70px -34px rgba(0,0,0,.4); overflow:hidden; }
.mouth-eater{
  position:absolute; left:50%; top:-72px; transform:translateX(-50%) scale(.6); transform-origin:center bottom;
  width:120px; opacity:0; pointer-events:none; z-index:5;
  transition:transform .5s var(--ease-crudo), opacity .4s, top .6s var(--ease-crudo);
}
.mouth-eater img{ width:100%; height:auto; }
.form{ display:flex; flex-direction:column; gap:26px; transition:opacity .4s, transform .6s var(--ease-crudo); }
.field{ display:flex; flex-direction:column; gap:6px; }
.field-label{ font-weight:700; font-size:.95rem; color:var(--negro); }
.field-wrap{ position:relative; }
.field input, .field textarea{
  width:100%; border:none; background:transparent; font-family:var(--font-body);
  font-size:1.05rem; color:var(--negro); padding:8px 2px; resize:none;
  border-bottom:2px solid rgba(17,17,17,.18);
}
.field input:focus, .field textarea:focus{ outline:none; border-bottom-color:transparent; }
/* subrayado "dibujado a mano" que se traza en focus */
.field-line{ position:absolute; left:0; right:0; bottom:-5px; width:100%; height:12px; overflow:visible; pointer-events:none; }
.field-line path{ fill:none; stroke:var(--rojo-vivo); stroke-width:3.5; stroke-linecap:round; stroke-dasharray:430; stroke-dashoffset:430; transition:stroke-dashoffset .5s var(--ease-crudo); }
.field-wrap:focus-within .field-line path{ stroke-dashoffset:0; }
/* campo trampa anti-spam: invisible para personas */
.field-hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.form-submit{ align-self:flex-start; margin-top:4px; }
.form-submit:disabled{ opacity:.7; cursor:wait; }
.form-error{ margin:0; color:var(--rojo); font-weight:600; font-size:.95rem; }
.form-error a{ text-decoration:underline; }

/* Estado "enviado" */
.form-done{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; gap:14px; padding:30px; background:#fff;
  opacity:0; pointer-events:none; transform:scale(.96); visibility:hidden;
  transition:opacity .4s, transform .5s var(--ease-crudo), visibility 0s .5s;
}
.form-done h3{ font-size:clamp(1.8rem,4vw,2.8rem); color:var(--rojo); }
.form-done p{ color:#444; max-width:30ch; margin:0; }
.done-mouth{ width:96px; }
.done-mouth img{ width:100%; animation:chomp 1.4s var(--ease-crudo) infinite; transform-origin:center; }
@keyframes chomp{ 0%,100%{ transform:scale(1) rotate(-4deg); } 50%{ transform:scale(1.12) rotate(4deg); } }

/* Estado: el logo "come" el formulario */
.form-card.state-eating .form{ opacity:0; transform:scale(.7) translateY(40px); }
.form-card.state-eating .mouth-eater{ opacity:1; top:30%; transform:translateX(-50%) scale(1.3); animation:eaterChomp .35s linear 3; }
@keyframes eaterChomp{ 0%,100%{ rotate:-6deg; } 50%{ rotate:6deg; } }
.form-card.state-done .form{ opacity:0; pointer-events:none; }
.form-card.state-done .form-done{ opacity:1; pointer-events:auto; transform:none; visibility:visible; transition:opacity .4s, transform .5s var(--ease-crudo); }

/* ===================== 8. FOOTER ===================== */
.footer{ margin-top:clamp(70px,10vh,120px); background:var(--negro); color:var(--crema); padding:clamp(50px,7vh,80px) 0 40px; }
.footer-in{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:18px; }
.footer-logo img{ width:62px; height:auto; }
.footer-hash{
  font-size:clamp(3rem,12vw,9rem); color:var(--rojo-vivo); line-height:1;
  letter-spacing:-0.04em; padding-bottom:0.12em;
}
.footer-copy{ color:rgba(245,240,232,.5); font-size:.85rem; margin:0; }

/* ===================== 9. RESPONSIVE ===================== */

/* Tablet (≤980px): nav → burger, grids a 1 / 2 columnas */
@media (max-width:980px){
  .nav-links, .nav-cta{ display:none; }
  .nav-burger{ display:flex; }
  .hero-content{ padding-top:120px; }
  .sobre-grid, .contacto-grid{ grid-template-columns:1fr; }
  .polas{ margin-top:10px; }
  .pgrid{ grid-template-columns:repeat(2,1fr); }
}

/* Mobile (≤560px) */
@media (max-width:560px){
  body{ font-size:16px; }

  .nav-pill{ width:100%; justify-content:space-between; }

  .hero{ padding:5px; }
  .hero-frame{ border-radius:24px; }
  .hero-content{ padding-top:120px; padding-bottom:48px; gap:30px; }
  .hero-h1{ font-size:clamp(3.6rem,19vw,6rem); line-height:0.9; }
  .hero-meta{ flex-direction:column; align-items:flex-start; gap:26px; }
  .hero-sub{ flex-basis:auto; font-size:1rem; }

  /* más aire entre secciones */
  .servicios{ padding:64px 0 74px; }
  .portfolio{ padding:64px 0 80px; }
  .sobre{ padding:74px 0; }
  .resenas{ padding:74px 0 64px; }
  .contacto{ padding:74px 0 0; }

  .servicios-head{ margin-bottom:30px; }
  .srow-head{ gap:14px; padding:24px 4px; }

  .portfolio-head{ gap:24px; margin-bottom:34px; }
  .pgrid{ grid-template-columns:1fr; gap:30px; }
  .pgrid-more{ width:100%; justify-content:center; }

  .sobre-grid{ gap:48px; }
  .sobre-body{ max-width:none; }
  .sobre-close{ max-width:none; }

  .resenas-baj{ padding:0 8px; }
  .rcarousel{ gap:18px; padding-top:6px; padding-bottom:8px; }
  .rcarousel-wrap{ margin-top:40px; }
  .rcard{ width:min(240px,72vw); padding:20px 18px 16px; gap:10px; }
  .rcard-quote{ font-size:3rem; top:6px; right:14px; }
  .rcard-text{ font-size:.85rem; line-height:1.4; }
  .counters{ gap:30px 24px; margin-top:44px; }
  .counter{ flex:1 1 40%; }

  .contacto-grid{ gap:44px; }
  .contacto-data{ margin:2em 0 1.4em; gap:16px; }
  .form-card{ padding:26px 22px; }

  .footer{ padding:56px 0 40px; }
}