/* =======================================================================
   PORTADAS DE SECCIÓN — escenas animadas, una por página.
   Cada portada es una pequeña ESCENA que representa de qué trata la sección
   (no un fondo abstracto). Se leen bajo el velo de .page-hero, con el título
   en crema encima. Paleta de marca: crema #F2F1DF · verde #31401C ·
   dorado #BF9F78 · salvia #65735C · beige #D9C3A9 · celeste #91D7F2.

     1 Nosotros  · las plumas y el río se DIBUJAN con trazo dorado
     2 Eventos   · GUIRNALDAS de luces titilando + confeti
     3 Catering  · dos COPAS que chocan (brindis) y se llenan + burbujas
     4 Galería   · VISOR de cámara + mosaico que se arma foto a foto
     5 Portfolio · CONSTELACIÓN de clientes que se conecta
     6 FAQ       · GLOBOS DE CHAT pregunta→respuesta + "escribiendo…"
     7 Contacto  · MAPA topográfico + ruta + PIN que cae con sonar
   ======================================================================= */

.cover{position:absolute;inset:0;overflow:hidden;z-index:1;}
.cover svg{position:absolute;inset:0;width:100%;height:100%;display:block;}
.cover::after{ /* grano fílmico sutil compartido */
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.45;z-index:6;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  background-size:200px 200px;mix-blend-mode:overlay;}

/* ============================================================== *
 * 1 · NOSOTROS — caligrafía: las plumas y el río se dibujan      *
 * ============================================================== */
.cover--nosotros{
  background:radial-gradient(125% 100% at 24% 4%, #4C5B30 0%, #344226 44%, #1F2A11 100%);}
.cover--nosotros .nos-sun{
  position:absolute;top:6%;right:12%;width:clamp(180px,26vw,360px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle, rgba(214,186,152,.55), rgba(191,159,120,0) 64%);
  filter:blur(30px);animation:nos-sun 13s ease-in-out infinite alternate;}
@keyframes nos-sun{from{transform:scale(1) translateY(0);opacity:.55;}to{transform:scale(1.16) translateY(-8px);opacity:.95;}}
.cover--nosotros .nos-ink .ink{
  fill:none;stroke:rgba(214,186,152,.85);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:1;stroke-dashoffset:1;
  filter:drop-shadow(0 2px 8px rgba(20,28,10,.5));
  animation:nos-draw 11s var(--ease,ease) infinite;}
@keyframes nos-draw{
  0%{stroke-dashoffset:1;}
  26%{stroke-dashoffset:0;}      /* dibuja */
  82%{stroke-dashoffset:0;}      /* sostiene */
  96%,100%{stroke-dashoffset:-1;}/* sale por el otro extremo */}
.cover--nosotros .i-river{stroke-width:1.8;stroke:rgba(145,215,242,.5);animation-delay:.1s;}
.cover--nosotros .i-bank{stroke-width:1.4;stroke:rgba(214,186,152,.45);animation-delay:.35s;}
.cover--nosotros .plm{transform-box:fill-box;transform-origin:50% 100%;
  animation:nos-sway 9s ease-in-out infinite;}
.cover--nosotros .plm .ink{animation-duration:9s;}
.cover--nosotros .pa .ink{animation-delay:.5s;}
.cover--nosotros .pb .ink{animation-delay:.85s;}
.cover--nosotros .pc .ink{animation-delay:1.2s;}
.cover--nosotros .pb{animation-delay:-2.6s;}
.cover--nosotros .pc{animation-delay:-5s;animation-duration:11s;}
@keyframes nos-sway{0%,100%{transform:rotate(-2.6deg);}50%{transform:rotate(2.6deg);}}
.cover--nosotros .seed{
  position:absolute;width:3px;height:3px;border-radius:50%;background:#E7D8C4;
  box-shadow:0 0 8px rgba(214,186,152,.9);opacity:0;animation:nos-seed linear infinite;}
@keyframes nos-seed{0%{transform:translate(0,40px) scale(.6);opacity:0;}
  15%{opacity:.9;}85%{opacity:.55;}100%{transform:translate(30px,-200px) scale(1);opacity:0;}}

/* ============================================================== *
 * 2 · EVENTOS — guirnaldas de luces + confeti (celebración)      *
 * ============================================================== */
.cover--eventos{
  background:radial-gradient(120% 130% at 78% 116%, #3C4A24 0%, #222D12 50%, #121A07 100%);}
.cover--eventos .ev-tree{fill:#0E1506;opacity:.92;}
.cover--eventos .ev-wire{fill:none;stroke:rgba(40,52,24,.9);stroke-width:2;}
.cover--eventos .bulb{
  fill:#F6E6B8;transform-box:fill-box;transform-origin:center;
  filter:drop-shadow(0 0 7px rgba(246,222,160,.95));
  animation:ev-twinkle 3.2s ease-in-out infinite;}
.cover--eventos .bulb:nth-child(3n){fill:#FBF1D8;animation-duration:3.8s;}
.cover--eventos .bulb:nth-child(3n+1){animation-duration:2.6s;}
.cover--eventos .bulb:nth-child(2n){animation-delay:-1.3s;}
.cover--eventos .bulb:nth-child(4n){animation-delay:-2.1s;}
.cover--eventos .bulb:nth-child(5n){animation-delay:-.7s;}
@keyframes ev-twinkle{0%,100%{opacity:.28;}50%{opacity:1;}}
.cover--eventos .confetti{
  position:absolute;top:-6%;width:8px;height:13px;border-radius:1px;opacity:0;
  animation:ev-confetti linear infinite;}
@keyframes ev-confetti{
  0%{transform:translateY(0) rotate(0);opacity:0;}
  10%{opacity:.95;}90%{opacity:.7;}
  100%{transform:translateY(80vh) rotate(560deg);opacity:0;}}

/* ============================================================== *
 * 3 · CATERING — dos copas que chocan + se llenan + burbujas     *
 * ============================================================== */
.cover--catering{background:radial-gradient(120% 125% at 50% 120%, #57401F 0%, #2C2010 55%, #14100A 100%);}
.cover--catering .cat-glow{
  position:absolute;left:50%;top:46%;width:60%;height:70%;transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(201,165,107,.4), transparent 62%);filter:blur(40px);
  animation:cat-glow 7s ease-in-out infinite;}
@keyframes cat-glow{0%,100%{opacity:.5;}50%{opacity:.9;}}
.cover--catering .glassline{fill:none;stroke:rgba(231,216,196,.92);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;}
.cover--catering .wine{fill:rgba(201,165,107,.78);}
.cover--catering .fb{fill:rgba(255,244,222,.9);opacity:0;animation:cat-bub ease-in infinite;}
@keyframes cat-bub{0%{transform:translateY(0) scale(.5);opacity:0;}20%{opacity:.9;}
  100%{transform:translateY(-58px) scale(1);opacity:0;}}
.cover--catering .flute{transform-box:fill-box;transform-origin:50% 100%;will-change:transform;}
.cover--catering .fl-l{animation:cat-clinkL 5.5s ease-in-out infinite;}
.cover--catering .fl-r{animation:cat-clinkR 5.5s ease-in-out infinite;}
@keyframes cat-clinkL{0%{transform:rotate(6deg);}46%{transform:rotate(12.5deg);}56%{transform:rotate(12.5deg);}100%{transform:rotate(6deg);}}
@keyframes cat-clinkR{0%{transform:rotate(-6deg);}46%{transform:rotate(-12.5deg);}56%{transform:rotate(-12.5deg);}100%{transform:rotate(-6deg);}}
.cover--catering .clink{
  position:absolute;left:50%;top:15%;width:34px;height:34px;transform:translate(-50%,-50%) scale(0);z-index:3;
  background:radial-gradient(circle, rgba(255,248,228,.95), rgba(255,248,228,0) 65%);
  border-radius:50%;animation:cat-spark 5.5s ease-out infinite;}
.cover--catering .clink::before,.cover--catering .clink::after{
  content:"";position:absolute;left:50%;top:50%;width:24px;height:1.5px;background:rgba(255,248,228,.9);
  transform:translate(-50%,-50%);border-radius:2px;}
.cover--catering .clink::after{transform:translate(-50%,-50%) rotate(90deg);}
@keyframes cat-spark{0%,44%{transform:translate(-50%,-50%) scale(0);opacity:0;}
  51%{transform:translate(-50%,-50%) scale(1);opacity:1;}
  60%{transform:translate(-50%,-50%) scale(1.6);opacity:0;}100%{opacity:0;}}

/* ============================================================== *
 * 4 · GALERÍA — sala de museo: spotlight que recorre los cuadros *
 * ============================================================== */
.cover--galeria{background:radial-gradient(120% 130% at 64% 6%, #3C4A26 0%, #232E14 52%, #0E1406 100%);}
.cover--galeria .museo{position:absolute;left:35%;right:4%;top:24%;height:clamp(150px,30vw,212px);}
.cover--galeria .wall{position:absolute;inset:0;display:flex;align-items:center;
  justify-content:space-between;gap:clamp(10px,2vw,26px);}
.cover--galeria .art{
  position:relative;flex:1 1 0;max-width:clamp(90px,12vw,126px);aspect-ratio:3/4;
  padding:7px;border-radius:3px;background:linear-gradient(#171C0F,#0D1106);
  box-shadow:0 0 0 1.5px rgba(214,186,152,.55), 0 22px 42px -16px rgba(0,0,0,.85);}
.cover--galeria .art::before{ /* clavo + reflejo del alambre */
  content:"";position:absolute;left:50%;top:-13px;width:5px;height:5px;border-radius:50%;
  background:rgba(214,186,152,.85);transform:translateX(-50%);
  box-shadow:0 8px 0 -3px rgba(214,186,152,.3);}
.cover--galeria .art::after{ /* penumbra (la luz la disuelve) */
  content:"";position:absolute;inset:0;border-radius:3px;background:rgba(8,11,5,.5);}
.cover--galeria .art i{display:block;width:100%;height:100%;border-radius:2px;}
.cover--galeria .art:nth-child(1) i{background:linear-gradient(150deg,#65735C,#2A3618);}
.cover--galeria .art:nth-child(2) i{background:linear-gradient(150deg,#BF9F78,#7A5A2E);}
.cover--galeria .art:nth-child(3) i{background:linear-gradient(150deg,#8A9680,#46552F);}
.cover--galeria .art:nth-child(4) i{background:linear-gradient(150deg,#D9C3A9,#A9885F);}
.cover--galeria .art:nth-child(5) i{background:linear-gradient(150deg,#A9885F,#33270F);}
.cover--galeria .spot{
  position:absolute;top:-30%;bottom:-16%;left:0;width:30%;pointer-events:none;
  background:radial-gradient(58% 64% at 50% 54%, rgba(255,247,225,.95), rgba(255,247,225,.28) 42%, transparent 72%);
  mix-blend-mode:screen;filter:blur(5px);
  animation:gal-spot 9.5s ease-in-out infinite;}
.cover--galeria .spot::before{ /* cono de luz desde el riel superior */
  content:"";position:absolute;left:50%;top:-72%;width:92%;height:82%;transform:translateX(-50%);
  background:linear-gradient(to bottom, rgba(255,247,225,.42), rgba(255,247,225,0) 86%);
  clip-path:polygon(43% 0,57% 0,100% 100%,0 100%);filter:blur(3px);}
@keyframes gal-spot{0%{transform:translateX(-24%);}50%{transform:translateX(232%);}100%{transform:translateX(-24%);}}

/* ============================================================== *
 * 5 · PORTFOLIO — constelación de clientes que se conecta        *
 * ============================================================== */
.cover--portfolio{background:linear-gradient(165deg, #233A30 0%, #142219 56%, #0A130E 100%);}
.cover--portfolio .pf-net .ln{
  stroke:rgba(145,215,242,.42);stroke-width:1.3;fill:none;stroke-dasharray:1;stroke-dashoffset:1;
  animation:pf-link 9s ease-in-out infinite;}
@keyframes pf-link{0%{stroke-dashoffset:1;}24%{stroke-dashoffset:0;}84%{stroke-dashoffset:0;}100%{stroke-dashoffset:0;opacity:.18;}}
.cover--portfolio .pf-net .ln:nth-child(2n){animation-delay:.5s;stroke:rgba(214,186,152,.4);}
.cover--portfolio .pf-net .ln:nth-child(3n){animation-delay:1s;}
.cover--portfolio .pf-net .ln:nth-child(4n){animation-delay:1.5s;}
.cover--portfolio .pf-net .nd{
  fill:#E7D8C4;transform-box:fill-box;transform-origin:center;
  filter:drop-shadow(0 0 6px rgba(214,186,152,.85));
  animation:pf-node 4.5s ease-in-out infinite;}
.cover--portfolio .pf-net .nd:nth-child(2n){animation-delay:-1.4s;fill:#91D7F2;filter:drop-shadow(0 0 6px rgba(145,215,242,.8));}
.cover--portfolio .pf-net .nd:nth-child(3n){animation-delay:-2.6s;}
.cover--portfolio .pf-net .nd:nth-child(5n){animation-delay:-3.4s;}
@keyframes pf-node{0%,100%{transform:scale(.7);opacity:.5;}50%{transform:scale(1.18);opacity:1;}}
.cover--portfolio .pf-net .lbl{
  fill:rgba(242,241,223,.6);font-family:var(--body,sans-serif);font-size:15px;font-weight:700;letter-spacing:.08em;
  animation:pf-lbl 5s ease-in-out infinite;}
@keyframes pf-lbl{0%,100%{opacity:.32;}50%{opacity:.85;}}
.cover--portfolio .pf-net .lblc{
  fill:rgba(242,241,223,.85);font-family:var(--body,sans-serif);font-size:15px;font-weight:700;letter-spacing:.06em;
  opacity:0;animation:pf-rot 12s ease-in-out infinite;}
@keyframes pf-rot{0%{opacity:0;}1.5%{opacity:.9;}13%{opacity:.9;}16.5%,100%{opacity:0;}}
.cover--portfolio .pf-pulse{
  fill:#FBF1D8;r:3.4;filter:drop-shadow(0 0 8px rgba(251,241,216,.95));
  animation:pf-travel 6s linear infinite;}
@keyframes pf-travel{0%{opacity:0;offset-distance:0%;}8%{opacity:1;}92%{opacity:1;}100%{opacity:0;offset-distance:100%;}}

/* ============================================================== *
 * 6 · FAQ — globos de chat pregunta→respuesta + "escribiendo…"   *
 * ============================================================== */
.cover--faq{background:radial-gradient(125% 135% at 68% 16%, #818F73 0%, #4E5D3C 50%, #2A381B 100%);}
.cover--faq .faq-chat{position:absolute;inset:0;}
/* signos de interrogación gigantes al fondo: profundidad */
.cover--faq .ghost{position:absolute;font-family:var(--display,serif);color:rgba(248,247,238,.07);
  font-weight:500;line-height:.8;pointer-events:none;animation:faq-drift 15s ease-in-out infinite;}
.cover--faq .ghost.g1{font-size:clamp(220px,40vw,420px);right:4%;top:-12%;}
.cover--faq .ghost.g2{font-size:clamp(110px,16vw,190px);left:42%;bottom:-6%;animation-delay:-6s;color:rgba(248,247,238,.05);}
@keyframes faq-drift{0%,100%{transform:translateY(0) rotate(0);}50%{transform:translateY(-16px) rotate(2.5deg);}}
.cover--faq .bub{
  position:absolute;display:flex;align-items:center;justify-content:center;
  min-width:62px;height:50px;padding:0 22px;border-radius:20px;
  font-family:var(--display,serif);font-size:25px;font-weight:500;
  opacity:0;transform:translateY(16px) scale(.92);
  animation:faq-pop 8.5s ease-in-out infinite;}
.cover--faq .bub::after{content:"";position:absolute;bottom:-5px;width:15px;height:15px;border-radius:0 0 5px 0;}
.cover--faq .bub.q{
  background:linear-gradient(158deg,#D0AC7B,#AD8455);color:#2E3B1E;border-bottom-left-radius:6px;
  box-shadow:0 20px 38px -16px rgba(20,28,10,.85), inset 0 1px 0 rgba(255,255,255,.4);}
.cover--faq .bub.q::after{left:13px;background:#AD8455;transform:skewX(22deg);}
.cover--faq .bub.a{
  background:linear-gradient(158deg,#FBFAF0,#E7E5D2);color:#46552F;border-bottom-right-radius:6px;
  box-shadow:0 20px 38px -16px rgba(20,28,10,.7), inset 0 1px 0 rgba(255,255,255,.75);}
.cover--faq .bub.a::after{right:13px;background:#E7E5D2;transform:skewX(-22deg);}
.cover--faq .b1{left:52%;top:20%;animation-delay:0s;}
.cover--faq .b2{left:61%;top:36%;animation-delay:1.5s;}
.cover--faq .b3{left:49%;top:53%;animation-delay:3.1s;}
.cover--faq .b4{left:60%;top:69%;animation-delay:4.4s;}
@keyframes faq-pop{0%{opacity:0;transform:translateY(16px) scale(.9);}
  6%{opacity:1;transform:translateY(0) scale(1);}
  9%{transform:translateY(-3px) scale(1.03);}12%{transform:translateY(0) scale(1);}
  80%{opacity:1;transform:translateY(0) scale(1);}94%,100%{opacity:0;transform:translateY(-12px) scale(.96);}}
.cover--faq .typing{display:inline-flex;gap:5px;align-items:center;}
.cover--faq .typing b{width:7px;height:7px;border-radius:50%;background:#8A9680;display:block;
  animation:faq-dot 1.2s ease-in-out infinite;}
.cover--faq .typing b:nth-child(2){animation-delay:.15s;}
.cover--faq .typing b:nth-child(3){animation-delay:.3s;}
@keyframes faq-dot{0%,100%{transform:translateY(0);opacity:.4;}50%{transform:translateY(-5px);opacity:1;}}

/* ============================================================== *
 * 7 · CONTACTO — mapa topográfico + ruta + pin que cae           *
 * ============================================================== */
.cover--contacto{background:linear-gradient(180deg, #15261F 0%, #0E1E17 55%, #07130E 100%);}
.cover--contacto .ct-moon{
  position:absolute;top:-10%;right:14%;width:44%;height:74%;
  background:radial-gradient(circle, rgba(202,224,232,.26), rgba(202,224,232,0) 62%);
  filter:blur(44px);animation:ct-moon 11s ease-in-out infinite alternate;}
@keyframes ct-moon{from{opacity:.4;}to{opacity:.85;}}
.cover--contacto .topo path{fill:none;stroke:rgba(145,215,242,.16);stroke-width:1.2;
  transform-box:fill-box;transform-origin:center;animation:ct-topo 12s ease-in-out infinite alternate;}
.cover--contacto .topo path:nth-child(2n){stroke:rgba(214,186,152,.14);animation-duration:15s;}
.cover--contacto .topo path:nth-child(3n){animation-duration:18s;}
@keyframes ct-topo{from{transform:scale(.98) translate(-4px,2px);}to{transform:scale(1.03) translate(4px,-3px);}}
.cover--contacto .ct-route{
  fill:none;stroke:url(#ct-grad);stroke-width:2.6;stroke-linecap:round;
  stroke-dasharray:8 12;animation:ct-route 2.6s linear infinite;}
@keyframes ct-route{to{stroke-dashoffset:-40;}}
.cover--contacto .ct-route-ghost{fill:none;stroke:rgba(242,241,223,.12);stroke-width:2.6;stroke-linecap:round;}
.cover--contacto .pin{fill:#BF9F78;filter:drop-shadow(0 6px 10px rgba(0,0,0,.5));}
.cover--contacto .pin-dot{fill:#2E3B1E;}
.cover--contacto .pin-grp{transform-box:fill-box;transform-origin:50% 100%;
  animation:ct-pin 5s cubic-bezier(.5,1.6,.5,1) infinite;}
@keyframes ct-pin{0%{transform:translateY(-46px) scale(.7);opacity:0;}
  12%{opacity:1;}30%{transform:translateY(0) scale(1);}
  38%{transform:translateY(-7px) scale(1);}46%{transform:translateY(0) scale(1);}
  90%{transform:translateY(0) scale(1);opacity:1;}100%{transform:translateY(0) scale(1);opacity:1;}}
.cover--contacto .sonar{fill:none;stroke:rgba(145,215,242,.6);stroke-width:2;
  transform-box:fill-box;transform-origin:center;opacity:0;animation:ct-sonar 5s ease-out infinite;}
.cover--contacto .sonar.s2{animation-delay:.9s;}
@keyframes ct-sonar{0%,30%{transform:scale(.2);opacity:0;}
  36%{opacity:.8;}100%{transform:scale(3.4);opacity:0;}}
.cover--contacto .coord{
  position:absolute;right:5%;bottom:7%;left:auto;z-index:5;
  font-family:var(--body,sans-serif);font-size:11px;font-weight:600;letter-spacing:.16em;
  color:rgba(242,241,223,.62);white-space:nowrap;text-shadow:0 1px 6px rgba(0,0,0,.6);}

/* ===================== Ajustes responsive ============================ */
@media (max-width:640px){
  .cover--galeria .museo{left:6%;right:5%;top:30%;height:148px;}
  .cover--galeria .art:nth-child(5){display:none;}
  .cover--faq .bub{font-size:20px;height:44px;min-width:54px;padding:0 18px;}
  .cover--faq .b1{left:40%;top:19%;}
  .cover--faq .b2{left:50%;top:37%;}
  .cover--faq .b3{left:38%;top:55%;}
  .cover--faq .b4{display:none;}
  .cover--contacto .coord{bottom:6%;}
  /* En celular el título queda alto en la portada y la ruta + el pin caían justo
     sobre las letras. Bajamos toda la escena del mapa para despejar el título.
     (El degradé de fondo cubre el hueco que queda arriba.) */
  .cover--contacto .ct-map{transform:translateY(34%);}
  .cover--contacto .ct-moon{top:6%;}
}