/* ==========================================================================
   DETÉCTALO A TIEMPO MÉXICO A.C.  ·  POR TODO UN AÑO ROSA
   Sistema visual: "Clave Luminosa" — collage de papel hecho a mano
   ========================================================================== */

/* ---------- 1. TOKENS ---------- */
:root{
  --paper:        #F2EADC;
  --paper-warm:   #EDE3D2;
  --paper-card:   #FBF7EF;
  --paper-white:  #FFFDF8;
  --kraft:        #D8C3A0;
  --kraft-dark:   #B99F76;

  --fucsia:       #C9175D;
  --fucsia-ink:   #D62A72;
  --fucsia-soft:  #E87BA6;
  --vino:         #6B1D2A;
  --blush:        #F6D6E2;
  --rosa-pale:    #FCE9F0;
  --gold:         #B08C4E;

  --ink:          #2E2429;
  --ink-soft:     #6A5C61;
  --ink-faint:    #9A8B90;

  --serif: "Cormorant Garamond", Georgia, serif;
  --sans:  "DM Sans", system-ui, -apple-system, sans-serif;
  --hand:  "Caveat", cursive;

  --shadow-cut: 0 12px 28px rgba(70,45,40,.16), 0 3px 8px rgba(70,45,40,.10);
  --shadow-lift:0 26px 60px rgba(70,45,40,.22), 0 6px 14px rgba(70,45,40,.12);
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-back: cubic-bezier(.34,1.4,.64,1);

  --maxw: 1180px;
  --gut: clamp(20px, 5vw, 64px);
}

/* ---------- 2. RESET ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0; font-family:var(--sans); color:var(--ink);
  background-color:var(--paper);
  background-image:url("../img/paper-texture.jpg");
  background-size:760px auto; background-repeat:repeat;
  font-size:17px; line-height:1.65; overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:1;
  background:radial-gradient(ellipse at 50% 35%, rgba(255,255,255,0) 45%, rgba(150,120,95,.10) 100%);
}
img{ max-width:100%; height:auto; display:block; }
[hidden]{ display:none !important; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; border:0; background:none; }
h1,h2,h3,h4{ margin:0; font-family:var(--serif); font-weight:700; line-height:1.08; color:var(--vino); }
p{ margin:0 0 1.1em; }
::selection{ background:var(--fucsia); color:#fff; }

/* ---------- 3. LAYOUT ---------- */
.wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut); position:relative; z-index:2; }
.wrap-wide{ max-width:1420px; margin-inline:auto; padding-inline:var(--gut); position:relative; z-index:2; }
section{ position:relative; padding-block:clamp(70px,10vw,140px); }
.sec-tight{ padding-block:clamp(50px,7vw,90px); }

/* ---------- 4. TIPOGRAFÍA ---------- */
.eyebrow{
  font-family:var(--sans); font-size:.70rem; font-weight:700; letter-spacing:.28em;
  text-transform:uppercase; color:var(--gold); margin-bottom:14px; display:block;
}
.eyebrow--pink{ color:var(--fucsia); }
.h-display{ font-size:clamp(3rem,9.5vw,7.4rem); letter-spacing:-.015em; }
.h1{ font-size:clamp(2.4rem,5.6vw,4.6rem); }
.h2{ font-size:clamp(1.9rem,4.2vw,3.4rem); }
.h3{ font-size:clamp(1.35rem,2.4vw,2rem); }
.lead{ font-size:clamp(1.06rem,1.7vw,1.28rem); color:var(--ink-soft); line-height:1.72; }
.hand{ font-family:var(--hand); color:var(--fucsia-ink); font-size:1.5rem; line-height:1.3; transform:rotate(-2.2deg); display:inline-block; }
.hand-lg{ font-family:var(--hand); color:var(--fucsia-ink); font-size:clamp(1.7rem,3.4vw,2.7rem); line-height:1.2; }
.num-big{ font-family:var(--serif); font-weight:700; color:var(--fucsia); font-size:clamp(3.4rem,10vw,7.5rem); line-height:.92; letter-spacing:-.02em; }
.muted{ color:var(--ink-soft); }
.center{ text-align:center; }

/* ---------- 5. PIEZAS DE PAPEL ---------- */

/* Foto recortada con tijera */
.cut{
  position:relative; display:inline-block; background:var(--paper-white);
  padding:10px 10px 10px; box-shadow:var(--shadow-cut);
  border-radius:2px 3px 2px 4px; transition:transform .5s var(--ease), box-shadow .5s var(--ease);
}
.cut img{ border-radius:1px; }
.cut--tilt-l{ transform:rotate(-2.4deg); }
.cut--tilt-r{ transform:rotate(2deg); }
.cut--tilt-l:hover,.cut--tilt-r:hover,.cut:hover{ transform:rotate(0) translateY(-6px); box-shadow:var(--shadow-lift); }
.cut__cap{ font-family:var(--hand); color:var(--fucsia-ink); font-size:1.28rem; text-align:center; padding:8px 4px 2px; }

/* Cinta washi */
.tape{
  position:absolute; width:104px; height:30px; background:rgba(231,140,175,.42);
  border-left:2px dashed rgba(255,255,255,.55); border-right:2px dashed rgba(255,255,255,.55);
  top:-14px; left:50%; transform:translateX(-50%) rotate(-3deg); z-index:3;
  box-shadow:0 2px 6px rgba(90,60,60,.10);
}
.tape--l{ left:8%; transform:rotate(-16deg); }
.tape--r{ left:auto; right:8%; transform:rotate(13deg); }

/* Tarjeta de papel */
.card-paper{
  background:var(--paper-card); border-radius:3px; padding:clamp(24px,3vw,38px);
  box-shadow:var(--shadow-cut); position:relative;
  background-image:linear-gradient(rgba(255,253,248,.55),rgba(255,253,248,.55)),url("../img/paper-texture.jpg");
  background-size:auto, 500px auto;
}
.card-paper::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  box-shadow:inset 0 0 40px rgba(150,120,95,.07); border-radius:3px;
}

/* Etiqueta kraft con hilo */
.tag{
  display:inline-block; background:var(--kraft); color:var(--vino); font-weight:700;
  font-size:.74rem; letter-spacing:.14em; text-transform:uppercase;
  padding:8px 16px 8px 26px; position:relative; border-radius:2px;
  box-shadow:0 4px 10px rgba(90,60,40,.16); transform:rotate(-1.4deg);
}
.tag::before{
  content:""; position:absolute; left:9px; top:50%; transform:translateY(-50%);
  width:8px; height:8px; border-radius:50%; background:var(--paper);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.3);
}

/* Sello de goma */
.stamp{
  display:inline-block; font-family:var(--sans); font-weight:800; font-size:.72rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--fucsia);
  border:2.5px solid var(--fucsia); border-radius:4px; padding:8px 14px;
  transform:rotate(-8deg); opacity:.78; mix-blend-mode:multiply;
}
.stamp--round{ border-radius:50%; padding:20px 14px; line-height:1.1; text-align:center; }

/* Franja de papel rasgado */
.torn{
  position:relative; background:var(--paper-card); padding-block:clamp(56px,7vw,92px);
  background-image:linear-gradient(rgba(255,253,248,.6),rgba(255,253,248,.6)),url("../img/paper-texture.jpg");
  background-size:auto,600px auto;
}
.torn::before,.torn::after{
  content:""; position:absolute; left:0; right:0; height:22px; z-index:2;
  background-repeat:repeat-x; background-size:120px 22px;
}
.torn::before{
  top:-1px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='22' viewBox='0 0 120 22'%3E%3Cpath d='M0 22V8c8-3 14 2 22-1s12-6 20-3 13 6 21 3 14-6 22-3 11 5 15 3v14z' fill='%23FBF7EF'/%3E%3C/svg%3E");
}
.torn::after{
  bottom:-1px; transform:scaleY(-1);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='22' viewBox='0 0 120 22'%3E%3Cpath d='M0 22V9c9-4 15 3 24-1s13-5 20-2 12 7 20 4 15-7 23-3 9 4 13 2v13z' fill='%23FBF7EF'/%3E%3C/svg%3E");
}
.torn--pink{ background-image:linear-gradient(rgba(252,233,240,.82),rgba(252,233,240,.82)),url("../img/paper-texture.jpg"); }
.torn--pink::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='22' viewBox='0 0 120 22'%3E%3Cpath d='M0 22V8c8-3 14 2 22-1s12-6 20-3 13 6 21 3 14-6 22-3 11 5 15 3v14z' fill='%23FCE9F0'/%3E%3C/svg%3E"); }
.torn--pink::after{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='22' viewBox='0 0 120 22'%3E%3Cpath d='M0 22V9c9-4 15 3 24-1s13-5 20-2 12 7 20 4 15-7 23-3 9 4 13 2v13z' fill='%23FCE9F0'/%3E%3C/svg%3E"); }

/* Trazo de tinta dibujado a mano */
.ink-underline{ position:relative; display:inline-block; }
.ink-underline svg{ position:absolute; left:-4%; bottom:-.42em; width:108%; height:.55em; overflow:visible; }
.ink-underline path{ fill:none; stroke:var(--fucsia-ink); stroke-width:6; stroke-linecap:round; opacity:.9;
  stroke-dasharray:600; stroke-dashoffset:600; transition:stroke-dashoffset 1.1s var(--ease) .15s; }
.is-in .ink-underline path,.ink-underline.is-in path{ stroke-dashoffset:0; }

.ink-circle{ position:absolute; inset:-8% -6%; pointer-events:none; }
.ink-circle path{ fill:none; stroke:var(--fucsia-ink); stroke-width:5; stroke-linecap:round;
  stroke-dasharray:1400; stroke-dashoffset:1400; transition:stroke-dashoffset 1.5s var(--ease) .3s; }
.is-in .ink-circle path{ stroke-dashoffset:0; }

/* ---------- 6. BOTONES ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px; font-family:var(--sans);
  font-weight:700; font-size:.86rem; letter-spacing:.1em; text-transform:uppercase;
  padding:16px 30px; border-radius:2px; transition:transform .3s var(--ease-back), box-shadow .3s var(--ease), background .3s;
  position:relative;
}
.btn--pink{ background:var(--fucsia); color:#fff; box-shadow:0 8px 20px rgba(201,23,93,.28); }
.btn--pink:hover{ transform:translateY(-3px) rotate(-.7deg); box-shadow:0 16px 34px rgba(201,23,93,.36); background:var(--vino); }
.btn--ghost{ border:2px solid var(--vino); color:var(--vino); }
.btn--ghost:hover{ background:var(--vino); color:var(--paper-card); transform:translateY(-3px) rotate(.6deg); }
.btn--sm{ padding:11px 20px; font-size:.74rem; }
.btn--block{ width:100%; justify-content:center; }

/* ---------- 7. NAV ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px var(--gut); transition:background .4s var(--ease), box-shadow .4s var(--ease), padding .4s var(--ease);
}
.nav.is-stuck{
  background:rgba(250,246,238,.94); backdrop-filter:blur(10px); padding-block:9px;
  box-shadow:0 2px 18px rgba(90,60,50,.12);
}
.nav__logo img{ height:40px; width:auto; transition:height .4s var(--ease); }
.nav.is-stuck .nav__logo img{ height:32px; }
.nav__links{ display:flex; align-items:center; gap:26px; }
.nav__links a{
  font-size:.76rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:var(--vino); position:relative; padding-block:4px;
}
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:0; width:0; height:2px;
  background:var(--fucsia); transition:width .3s var(--ease);
}
.nav__links a:hover::after{ width:100%; }
.nav__burger{ display:none; width:44px; height:44px; position:relative; }
.nav__burger span{ position:absolute; left:11px; right:11px; height:2.5px; background:var(--vino); border-radius:2px; transition:.35s var(--ease); }
.nav__burger span:nth-child(1){ top:15px; } .nav__burger span:nth-child(2){ top:21px; } .nav__burger span:nth-child(3){ top:27px; }
.nav__burger.is-open span:nth-child(1){ top:21px; transform:rotate(45deg); }
.nav__burger.is-open span:nth-child(2){ opacity:0; }
.nav__burger.is-open span:nth-child(3){ top:21px; transform:rotate(-45deg); }

/* ---------- 8. HERO ---------- */
.hero{ min-height:100svh; display:flex; align-items:center; padding-top:110px; padding-bottom:60px; overflow:hidden; }
.hero__grid{ display:grid; grid-template-columns:1.2fr .8fr; gap:clamp(30px,5vw,70px); align-items:center; }
.hero__title{ position:relative; }
.hero__title .line{ display:block; overflow:hidden; }
.hero__title .line > span{ display:block; transform:translateY(105%); transition:transform 1.05s var(--ease); }
.hero.is-in .hero__title .line > span{ transform:translateY(0); }
.hero__title .line:nth-child(2) > span{ transition-delay:.1s; }
.hero__title .line:nth-child(3) > span{ transition-delay:.2s; }
.rosa-word{ color:var(--fucsia); font-style:italic; }
.hero__sub{ max-width:30em; margin-top:26px; opacity:0; transform:translateY(18px); transition:.9s var(--ease) .45s; }
.hero.is-in .hero__sub{ opacity:1; transform:none; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:32px; opacity:0; transform:translateY(18px); transition:.9s var(--ease) .6s; }
.hero.is-in .hero__cta{ opacity:1; transform:none; }
.hero__figure{ position:relative; max-width:430px; justify-self:end; width:100%; }
.hero__figure .cut{ width:100%; }
.hero__badge{
  position:absolute; right:-16px; bottom:34px; z-index:4;
  background:var(--fucsia); color:#fff; border-radius:50%; width:132px; height:132px;
  display:grid; place-content:center; text-align:center; transform:rotate(-11deg);
  box-shadow:0 14px 30px rgba(201,23,93,.34); padding:10px;
}
.hero__badge b{ display:block; font-family:var(--serif); font-size:1.9rem; line-height:1; }
.hero__badge span{ font-size:.58rem; letter-spacing:.14em; text-transform:uppercase; font-weight:700; line-height:1.3; }
.hero__scroll{ margin-top:44px; display:flex; align-items:center; gap:12px; color:var(--ink-faint); font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; }
.hero__scroll i{ width:44px; height:1.5px; background:var(--fucsia); display:block; animation:slide 2.2s var(--ease) infinite; transform-origin:left; }
@keyframes slide{ 0%,100%{ transform:scaleX(.3);} 50%{ transform:scaleX(1);} }

/* ---------- 9. REVELADOS ---------- */
.reveal{ opacity:0; transform:translateY(30px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.is-in{ opacity:1; transform:none; }
.reveal[data-d="1"]{ transition-delay:.1s; } .reveal[data-d="2"]{ transition-delay:.2s; }
.reveal[data-d="3"]{ transition-delay:.3s; } .reveal[data-d="4"]{ transition-delay:.4s; }
.reveal[data-d="5"]{ transition-delay:.5s; } .reveal[data-d="6"]{ transition-delay:.6s; }

/* ---------- 10. DATO / PROBLEMA ---------- */
.dato{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,70px); align-items:center; }
.dato__fig{ position:relative; }
.calendario{ display:grid; grid-template-columns:repeat(6,1fr); gap:9px; margin-top:28px; max-width:430px; }
.mes{
  aspect-ratio:1; border-radius:2px; background:var(--paper-warm); border:1.5px solid rgba(140,110,90,.22);
  display:grid; place-content:center; font-size:.66rem; font-weight:700; letter-spacing:.06em;
  color:var(--ink-faint); text-transform:uppercase; transition:.55s var(--ease);
}
.mes.on{ background:var(--fucsia); color:#fff; border-color:var(--fucsia); transform:scale(1.05) rotate(-2deg); box-shadow:0 6px 14px rgba(201,23,93,.28); }
.dato-strip{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:clamp(18px,3vw,34px); }
.dato-strip .card-paper{ text-align:center; }
.dato-strip .num-big{ font-size:clamp(2.6rem,6vw,4.4rem); }
.dato-strip small{ display:block; font-size:.76rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); font-weight:700; margin-top:6px; }


/* ---------- MOTOR DE DONACIÓN ---------- */
.skip{ position:absolute; left:-9999px; top:0; z-index:200; background:var(--fucsia); color:#fff; padding:12px 20px; font-weight:700; font-size:.8rem; }
.skip:focus{ left:0; }

.give{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,64px); align-items:start; }
.give__box{ position:sticky; top:92px; }

.giftcard{
  background:var(--paper-white); border-radius:3px; padding:clamp(22px,3vw,34px);
  box-shadow:0 30px 70px rgba(70,45,40,.20), 0 8px 18px rgba(70,45,40,.12);
  position:relative; border-top:5px solid var(--fucsia);
}
.giftcard::before{
  content:""; position:absolute; top:-16px; left:50%; transform:translateX(-50%) rotate(-2deg);
  width:120px; height:30px; background:rgba(231,140,175,.40);
  border-left:2px dashed rgba(255,255,255,.6); border-right:2px dashed rgba(255,255,255,.6);
}
.giftcard__head{ margin-bottom:20px; }
.giftcard__foot{ font-size:.76rem; color:var(--ink-soft); margin:14px 0 0; line-height:1.55; text-align:center; }
.giftcard__foot a{ color:var(--fucsia); font-weight:700; text-decoration:underline; }

/* pestañas de frecuencia */
.freq{ display:grid; grid-template-columns:1fr 1fr; gap:8px; background:var(--paper-warm); padding:6px; border-radius:3px; margin-bottom:18px; }
.freq__tab{
  padding:12px 8px; border-radius:2px; font-weight:700; font-size:.92rem; color:var(--ink-soft);
  transition:.3s var(--ease); text-align:center; line-height:1.2;
}
.freq__tab em{ display:block; font-style:normal; font-size:.64rem; letter-spacing:.1em; text-transform:uppercase; font-weight:700; opacity:.6; margin-top:3px; }
.freq__tab:hover{ color:var(--vino); }
.freq__tab.is-on{ background:var(--fucsia); color:#fff; box-shadow:0 4px 12px rgba(201,23,93,.3); }
.freq__tab.is-on em{ opacity:.85; }

/* niveles */
.tiers{ display:grid; gap:9px; margin-bottom:14px; }
.tier{
  display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:center; text-align:left;
  padding:14px 16px; border:2px solid var(--kraft-dark); border-radius:2px; background:var(--paper-card);
  transition:.28s var(--ease); position:relative;
}
.tier:hover{ border-color:var(--fucsia); transform:translateY(-2px); box-shadow:0 8px 18px rgba(90,60,50,.12); }
.tier.is-on{ border-color:var(--fucsia); background:var(--rosa-pale); box-shadow:0 6px 16px rgba(201,23,93,.16); }
.tier__amt{ font-family:var(--serif); font-size:1.7rem; font-weight:700; color:var(--fucsia); line-height:1; white-space:nowrap; }
.tier__amt span{ display:block; font-family:var(--sans); font-size:.56rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint); margin-top:3px; }
.tier__t{ display:block; font-weight:700; font-size:.94rem; color:var(--vino); margin-bottom:2px; }
.tier__x{ display:block; font-size:.8rem; color:var(--ink-soft); line-height:1.45; }
.tier__flag{
  position:absolute; top:-10px; right:12px; background:var(--gold); color:#fff;
  font-size:.56rem; font-weight:800; letter-spacing:.13em; text-transform:uppercase;
  padding:4px 9px; border-radius:2px; transform:rotate(-2deg); box-shadow:0 3px 8px rgba(90,60,40,.22);
}

/* otra cantidad */
.otro{ display:block; margin-bottom:16px; }
.otro__lbl{ display:block; font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); font-weight:700; margin-bottom:6px; }
.otro__wrap{ display:flex; align-items:center; gap:8px; border:2px solid var(--kraft-dark); border-radius:2px; background:var(--paper-card); padding:0 14px; transition:.25s; }
.otro__wrap:focus-within{ border-color:var(--fucsia); }
.otro__wrap i{ font-style:normal; font-family:var(--serif); font-size:1.4rem; color:var(--fucsia); font-weight:700; }
.otro__wrap b{ font-size:.68rem; letter-spacing:.1em; color:var(--ink-faint); }
.otro__wrap input{
  flex:1; border:0; background:none; outline:none; padding:13px 0; font-family:var(--serif);
  font-size:1.5rem; font-weight:700; color:var(--vino); width:100%; -moz-appearance:textfield;
}
.otro__wrap input::-webkit-outer-spin-button,.otro__wrap input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }

/* impacto en vivo */
.impacto-live{
  background:var(--rosa-pale); border-left:4px solid var(--fucsia); border-radius:2px;
  padding:14px 16px; margin-bottom:16px; min-height:74px;
}
.impacto-live__q{ display:block; font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:var(--fucsia); font-weight:800; margin-bottom:5px; }
.impacto-live p{ margin:0; font-size:.93rem; line-height:1.5; color:var(--vino); font-weight:500; }

.btn--give{ font-size:.95rem; padding:19px 26px; letter-spacing:.06em; }

.trust-mini{ list-style:none; display:flex; flex-wrap:wrap; gap:12px; justify-content:center; padding:0; margin:14px 0 0; }
.trust-mini li{ font-size:.7rem; color:var(--ink-soft); font-weight:700; letter-spacing:.04em; display:flex; align-items:center; gap:5px; }
.trust-mini li::before{ content:"✓"; color:var(--fucsia); font-weight:800; }

.trust-row{ list-style:none; display:flex; flex-wrap:wrap; gap:18px; padding:0; margin:28px 0 0; }
.trust-row li{ font-size:.76rem; color:var(--ink-soft); font-weight:700; display:flex; align-items:center; gap:6px; }
.trust-row li span{ color:var(--fucsia); font-weight:800; }

/* ---------- PILARES ---------- */
.pilares{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:clamp(18px,2.6vw,30px); }
.pilar{
  background:var(--paper-white); border-radius:3px; padding:clamp(26px,3vw,36px);
  box-shadow:var(--shadow-cut); position:relative; transform:rotate(var(--r,0deg));
  transition:transform .45s var(--ease), box-shadow .45s var(--ease);
}
.pilar:nth-child(2){ --r:-.9deg; } .pilar:nth-child(3){ --r:.8deg; }
.pilar:hover{ transform:rotate(0) translateY(-8px); box-shadow:var(--shadow-lift); }
.pilar__n{ font-family:var(--serif); font-size:3.4rem; color:var(--blush); font-weight:700; line-height:.8; display:block; margin-bottom:8px; }
.pilar__t{ font-family:var(--serif); font-size:1.7rem; color:var(--vino); font-weight:700; margin-bottom:10px; }
.pilar__x{ font-size:.95rem; color:var(--ink-soft); line-height:1.65; margin:0; }

/* ---------- SERVICIOS ---------- */
.servicios{ display:grid; grid-template-columns:repeat(auto-fit,minmax(255px,1fr)); gap:clamp(18px,2.6vw,28px); }
.lnk{ display:inline-block; margin-top:14px; font-size:.8rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--fucsia); transition:.25s; }
.lnk:hover{ transform:translateX(4px); }
.lnk-in{ color:var(--fucsia); font-weight:700; text-decoration:underline; }

/* ---------- TESTIMONIOS ---------- */
.testis{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:clamp(20px,3vw,34px); }
.testi{
  background:var(--paper-white); padding:clamp(26px,3vw,36px); border-radius:2px;
  box-shadow:var(--shadow-cut); position:relative; transform:rotate(var(--r,0deg));
  transition:transform .45s var(--ease);
}
.testi:nth-child(even){ --r:1.1deg; } .testi:nth-child(odd){ --r:-1deg; }
.testi:hover{ transform:rotate(0) translateY(-6px); }
.testi::before{
  content:"“"; font-family:var(--serif); font-size:5rem; color:var(--blush);
  line-height:.7; display:block; margin-bottom:4px;
}
.testi__x{ font-family:var(--serif); font-size:1.35rem; line-height:1.45; color:var(--vino); font-style:italic; margin-bottom:18px; }
.testi__n{ font-weight:700; font-size:.94rem; color:var(--ink); }
.testi__l{ font-size:.78rem; color:var(--ink-faint); letter-spacing:.05em; }

/* ---------- CTA 2 ---------- */
.cta2{ display:flex; flex-wrap:wrap; gap:clamp(24px,4vw,50px); align-items:center; justify-content:space-between; }
.cta2__act{ display:flex; flex-direction:column; gap:11px; min-width:210px; }

/* ---------- YOUTUBE ---------- */
.ytbox{ position:relative; aspect-ratio:16/9; overflow:hidden; background:var(--paper-warm); }
.ytbox img,.ytbox iframe{ width:100%; height:100%; object-fit:cover; display:block; border:0; }
.ytbox .play{
  position:absolute; inset:0; margin:auto; width:80px; height:80px; border-radius:50%;
  background:var(--fucsia); color:#fff; display:grid; place-content:center; font-size:1.4rem;
  box-shadow:0 12px 30px rgba(201,23,93,.44); transition:.35s var(--ease-back);
}
.ytbox .play:hover{ transform:scale(1.12); }

/* ---------- COMPARTIR ---------- */
.share{ display:flex; flex-wrap:wrap; gap:8px; }
.share a,.share button{
  padding:10px 15px; border:2px solid var(--kraft-dark); border-radius:2px; font-size:.76rem;
  font-weight:700; color:var(--vino); transition:.25s var(--ease); background:var(--paper-card);
}
.share a:hover,.share button:hover{ border-color:var(--fucsia); color:var(--fucsia); transform:translateY(-2px); }

/* ---------- CAMPOS ---------- */
.fld{
  padding:14px 16px; border:2px solid var(--kraft-dark); border-radius:2px;
  background:var(--paper-white); font-family:inherit; font-size:1rem; color:var(--ink); width:100%;
  transition:.25s;
}
.fld:focus{ outline:none; border-color:var(--fucsia); }

/* ---------- 16. VIDEO ---------- */
.videobox{ position:relative; }
.videobox video{ width:100%; display:block; border-radius:2px; }
.videobox .play{
  position:absolute; inset:0; margin:auto; width:96px; height:96px; border-radius:50%;
  background:var(--fucsia); color:#fff; display:grid; place-content:center; font-size:1.6rem;
  box-shadow:0 14px 34px rgba(201,23,93,.44); transition:.35s var(--ease-back); z-index:3;
}
.videobox .play:hover{ transform:scale(1.12); }
.videobox.is-playing .play{ opacity:0; pointer-events:none; }

/* ---------- 17. NOTAS / BLOG ---------- */
.notas{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:clamp(20px,3vw,34px); }
.nota{ display:block; background:var(--paper-white); border-radius:2px; box-shadow:var(--shadow-cut); overflow:hidden;
  transition:transform .45s var(--ease), box-shadow .45s var(--ease); }
.nota:hover{ transform:translateY(-8px) rotate(-.5deg); box-shadow:var(--shadow-lift); }
.nota__img{ aspect-ratio:16/10; overflow:hidden; background:var(--paper-warm); }
.nota__img img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.nota:hover .nota__img img{ transform:scale(1.06); }
.nota__body{ padding:22px 22px 26px; }
.nota__meta{ font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); font-weight:700; margin-bottom:9px; }
.nota__t{ font-family:var(--serif); font-size:1.3rem; color:var(--vino); font-weight:700; line-height:1.22; margin-bottom:9px; }
.nota__x{ font-size:.9rem; color:var(--ink-soft); line-height:1.6; }

/* ---------- 18. MURO DE NOMBRES ---------- */
.muro{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
.muro span{
  background:var(--paper-white); padding:9px 17px; border-radius:2px; font-size:.86rem; font-weight:500;
  color:var(--vino); box-shadow:0 4px 10px rgba(90,60,50,.10); transform:rotate(var(--r,0deg));
  transition:.3s var(--ease-back);
}
.muro span:hover{ transform:rotate(0) translateY(-4px) scale(1.05); box-shadow:var(--shadow-cut); }
.muro span:nth-child(4n){ --r:-1.6deg; } .muro span:nth-child(4n+2){ --r:1.4deg; } .muro span:nth-child(4n+3){ --r:-.8deg; }

/* ---------- 20. DONAR ---------- */
.donar-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(238px,1fr)); gap:clamp(18px,2.6vw,28px); }
.donar-card{ display:flex; flex-direction:column; }
.donar-card .h3{ margin-bottom:10px; }
.donar-card p{ font-size:.94rem; color:var(--ink-soft); flex:1; }
.dato-banco{ font-family:ui-monospace,"SF Mono",Menlo,monospace; font-size:.84rem; background:var(--paper-warm); padding:12px 14px; border-radius:2px; margin-bottom:14px; line-height:1.9; word-break:break-all; }

/* ---------- 22. FOOTER ---------- */
.foot{ background:var(--vino); color:var(--blush); padding-block:clamp(50px,7vw,84px) 30px; position:relative; z-index:2; }
.foot h4{ color:var(--paper-card); font-size:1.3rem; margin-bottom:14px; }
.foot a{ color:var(--blush); opacity:.86; transition:.25s; }
.foot a:hover{ opacity:1; color:#fff; }
.foot__grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:clamp(26px,4vw,56px); }
.foot__logo img{ height:52px; filter:brightness(0) invert(1); opacity:.94; margin-bottom:16px; }
.foot ul{ list-style:none; padding:0; margin:0; display:grid; gap:8px; font-size:.9rem; }
.foot__bar{ margin-top:44px; padding-top:22px; border-top:1px solid rgba(246,214,226,.22); display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; font-size:.76rem; opacity:.72; }
.foot .stamp{ color:var(--blush); border-color:var(--blush); mix-blend-mode:normal; }

/* ---------- 23. BARRA DONAR MÓVIL ---------- */
.sticky-cta{
  position:fixed; left:0; right:0; bottom:0; z-index:95; background:var(--fucsia); color:#fff;
  display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 18px;
  transform:translateY(110%); transition:transform .45s var(--ease); box-shadow:0 -4px 20px rgba(0,0,0,.16);
}
.sticky-cta.is-on{ transform:none; }
.sticky-cta b{ font-size:.8rem; letter-spacing:.05em; }
.sticky-cta small{ display:block; font-size:.66rem; opacity:.85; font-weight:400; }
.sticky-cta .btn{ background:#fff; color:var(--fucsia); padding:11px 20px; font-size:.72rem; white-space:nowrap; }

/* ---------- 24. RESPONSIVE ---------- */
@media (max-width:980px){
  .hero__grid,.dato,.give{ grid-template-columns:1fr; }
  .give__box{ position:static; }
  .cta2{ flex-direction:column; align-items:flex-start; }
  .cta2__act{ width:100%; }
  .hero{ padding-top:96px; }
  .hero__figure{ max-width:400px; margin-inline:auto; }
  .foot__grid{ grid-template-columns:1fr 1fr; }
  .nav__links{
    position:fixed; inset:0 0 0 auto; width:min(78vw,320px); background:var(--paper-card);
    flex-direction:column; justify-content:center; gap:26px; padding:40px;
    transform:translateX(100%); transition:transform .5s var(--ease); box-shadow:-8px 0 40px rgba(90,60,50,.2);
  }
  .nav__links.is-open{ transform:none; }
  .nav__links a{ font-size:1rem; }
  .nav__burger{ display:block; z-index:102; }
  .nav__cta{ display:none; }
}
@media (max-width:620px){
  body{ font-size:16px; }
  .hero__badge{ width:104px; height:104px; right:-6px; bottom:16px; }
  .hero__badge b{ font-size:1.5rem; }
  .calendario{ grid-template-columns:repeat(4,1fr); }
  .foot__grid{ grid-template-columns:1fr; }
  .meter__goal{ text-align:left; }
  .corcho{ grid-template-columns:repeat(2,1fr); }
  body{ padding-bottom:64px; }
}

/* ---------- 25. MOVIMIENTO REDUCIDO (solo lo intrusivo) ---------- */
@media (prefers-reduced-motion: reduce){
  .hero__scroll i{ animation:none; }
  .pase{ animation:none; }
}

/* ---------- 26. PÁGINAS INTERIORES ---------- */
.page-head{ padding-top:150px; padding-bottom:clamp(40px,6vw,70px); }
.article{ max-width:760px; margin-inline:auto; }
.article p{ font-size:1.08rem; line-height:1.82; }
.article h2{ font-size:clamp(1.6rem,3vw,2.3rem); margin:1.6em 0 .5em; }
.article h3{ font-size:1.3rem; margin:1.4em 0 .4em; }
.article img{ border-radius:2px; box-shadow:var(--shadow-cut); margin:2em 0; }
.article blockquote{ margin:2em 0; padding-left:24px; border-left:4px solid var(--fucsia); font-family:var(--serif); font-size:1.4rem; color:var(--vino); font-style:italic; }
.filtros{ display:flex; flex-wrap:wrap; gap:9px; margin-bottom:36px; }

/* ---------- WHATSAPP FLOTANTE ---------- */
.wa-float{
  position:fixed; right:18px; bottom:80px; z-index:94; background:#25D366; color:#fff;
  padding:13px 20px; border-radius:40px; font-weight:700; font-size:.8rem;
  box-shadow:0 8px 22px rgba(0,0,0,.22); transition:transform .3s var(--ease-back);
}
.wa-float:hover{ transform:translateY(-3px) scale(1.04); }
@media (max-width:620px){ .wa-float{ bottom:74px; right:12px; padding:11px 16px; font-size:.74rem; } }