/* ==========================================================================
   Mary Nino · Psicóloga — Hoja de estilos principal
   Ruta: public/css/styles.css
   ========================================================================== */

/* ---------- Tokens ---------- */
:root{
  --ink:        #2F4F4A;
  --ink-2:      #1E3833;
  --ink-3:      #162B27;
  --cream:      #FAF7F2;
  --cream-2:    #F3EDE2;
  --sage:       #E2E8E1;
  --sage-2:     #D4DFD5;
  --line:       rgba(47,79,74,.14);
  --line-soft:  rgba(47,79,74,.08);
  --muted:      #5E726C;
  --muted-2:    #7A8B86;
  --accent:     #B8895C;
  --wa:         #25D366;
  --wa-dark:    #1EAE55;

  --radius:     18px;
  --radius-sm:  12px;
  --maxw:       1160px;

  --shadow-sm:  0 1px 2px rgba(30,56,51,.06), 0 8px 24px -14px rgba(30,56,51,.22);
  --shadow-md:  0 2px 6px rgba(30,56,51,.05), 0 26px 50px -22px rgba(30,56,51,.32);

  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --ease: cubic-bezier(.2,.7,.2,1);
}

/* ---------- Reset suave ---------- */
*,*::before,*::after{ box-sizing:border-box; }

html{
  scroll-behavior:smooth;
  scroll-padding-top:92px;
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.65;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

img,svg{ max-width:100%; display:block; }

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:400;
  color:var(--ink);
  letter-spacing:-.015em;
  line-height:1.15;
  margin:0;
}

p{ margin:0 0 1rem; }

a{ color:inherit; }

::selection{ background:var(--sage-2); color:var(--ink-3); }

:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:4px;
}

/* ---------- Utilidades ---------- */
.container{
  width: calc(100% - 2.5rem);
  max-width: var(--maxw);
  margin-left: auto;
  margin-right: auto;
}

.section{ padding:clamp(4rem, 9vw, 7rem) 0; }
.section--alt{ background:var(--cream-2); }

.section--dark{
  background:var(--ink);
  color:var(--cream);
}
.section--dark h2,
.section--dark h3{ color:var(--cream); }

.section__head{
  max-width:660px;
  margin:0 auto clamp(2.5rem, 5vw, 3.5rem);
  text-align:center;
}
.section__head--left{
  text-align:left;
  margin-inline:0;
  max-width:520px;
}
.section__head h2{
  font-size:clamp(1.9rem, 3.6vw, 2.75rem);
  margin-bottom:.7rem;
}
.section__sub{
  color:var(--muted);
  font-size:1.02rem;
  margin:0;
}
.section--dark .section__sub{ color:rgba(250,247,242,.7); }

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  margin:0 0 1.1rem;
  font-family:var(--font-body);
  font-size:.76rem;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted-2);
}
.eyebrow--light{ color:rgba(250,247,242,.6); }

.dot{
  width:6px; height:6px;
  border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 0 4px rgba(184,137,92,.16);
  flex:0 0 auto;
}

/* ---------- Botones ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.55rem;
  padding:.85rem 1.55rem;
  border:1px solid transparent;
  border-radius:999px;
  font-family:var(--font-body);
  font-size:.94rem;
  font-weight:500;
  line-height:1;
  text-decoration:none;
  cursor:pointer;
  transition:background .25s var(--ease), color .25s var(--ease),
             transform .25s var(--ease), box-shadow .25s var(--ease),
             border-color .25s var(--ease);
  white-space:nowrap;
}
.btn svg{ width:17px; height:17px; flex:0 0 auto; }
.btn:active{ transform:translateY(0) scale(.99); }

.btn--primary{
  background:var(--ink);
  color:var(--cream);
  box-shadow:var(--shadow-sm);
}
.btn--primary:hover{
  background:var(--ink-2);
  transform:translateY(-2px);
  box-shadow:var(--shadow-md);
}

.btn--ghost{
  background:transparent;
  border-color:var(--line);
  color:var(--ink);
}
.btn--ghost:hover{
  background:#fff;
  border-color:var(--sage-2);
  transform:translateY(-2px);
}

.btn--wa{
  background:var(--wa);
  color:#fff;
  box-shadow:0 10px 24px -12px rgba(37,211,102,.9);
}
.btn--wa:hover{
  background:var(--wa-dark);
  transform:translateY(-2px);
  box-shadow:0 16px 30px -14px rgba(37,211,102,1);
}

.btn--sm{ padding:.62rem 1.1rem; font-size:.85rem; }
.btn--full{ width:100%; }

/* ==========================================================================
   NAV
   ========================================================================== */
.nav{
  position:sticky;
  top:0;
  z-index:80;
  background:rgba(250,247,242,.94);
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease);
}
@supports ((-webkit-backdrop-filter: blur(14px)) or (backdrop-filter: blur(14px))){
  .nav{
    background:rgba(250,247,242,.86);
    -webkit-backdrop-filter:saturate(180%) blur(14px);
    backdrop-filter:saturate(180%) blur(14px);
  }
}
.nav.is-scrolled{
  border-bottom-color:var(--line-soft);
  box-shadow:0 8px 30px -22px rgba(30,56,51,.5);
}

.nav__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
  min-height:76px;
}

.brand{
  display:inline-flex;
  align-items:center;
  gap:.7rem;
  text-decoration:none;
  color:var(--ink);
}
.brand__mark{
  width:40px; height:40px;
  display:grid; place-items:center;
  border-radius:12px;
  background:var(--ink);
  color:var(--cream);
  font-family:var(--font-display);
  font-size:1.2rem;
  line-height:1;
  flex:0 0 auto;
  transition:transform .3s var(--ease);
}
.brand:hover .brand__mark{ transform:rotate(-4deg); }

.brand__text{ display:flex; flex-direction:column; line-height:1; }
.brand__text strong{
  font-family:var(--font-display);
  font-size:1.05rem;
  font-weight:500;
  letter-spacing:-.01em;
}
.brand__text small{
  margin-top:4px;
  font-size:.66rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted-2);
}

.brand--light{ color:var(--cream); }
.brand--light .brand__mark{ background:var(--cream); color:var(--ink); }
.brand--light .brand__text small{ color:rgba(250,247,242,.5); }

.nav__menu{
  display:flex;
  align-items:center;
  gap:1.7rem;
}
.nav__menu > a:not(.btn){
  position:relative;
  font-size:.92rem;
  font-weight:450;
  text-decoration:none;
  color:var(--ink);
  padding:.25rem 0;
}
.nav__menu > a:not(.btn)::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-2px;
  height:1.5px;
  background:var(--accent);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .3s var(--ease);
}
.nav__menu > a:not(.btn):hover::after{ transform:scaleX(1); }

.nav__toggle{
  display:none;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  width:44px; height:44px;
  padding:0;
  background:none;
  border:0;
  cursor:pointer;
}
.nav__toggle span{
  display:block;
  width:22px; height:2px;
  border-radius:2px;
  background:var(--ink);
  transition:transform .28s var(--ease), opacity .2s var(--ease);
}
.nav__toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  position:relative;
  padding:clamp(2.5rem, 6vw, 4.5rem) 0 clamp(3.5rem, 8vw, 6rem);
  overflow:hidden;
}
.hero__glow{
  position:absolute;
  top:-30%; right:-15%;
  width:min(760px, 90vw);
  aspect-ratio:1;
  background:radial-gradient(circle at 50% 50%, rgba(226,232,225,.95), rgba(226,232,225,0) 68%);
  pointer-events:none;
  z-index:0;
}

.hero__grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:1.06fr .94fr;
  gap:clamp(2rem, 5vw, 4.5rem);
  align-items:center;
}

.hero h1{
  font-size:clamp(2.35rem, 5.2vw, 4rem);
  line-height:1.04;
  letter-spacing:-.025em;
}
.hero h1 em{
  font-style:italic;
  font-weight:300;
  color:var(--accent);
}

.lead{
  max-width:46ch;
  margin:1.4rem 0 2rem;
  font-size:clamp(1rem, 1.3vw, 1.1rem);
  color:#4A5F5A;
}

.hero__actions{
  display:flex;
  flex-wrap:wrap;
  gap:.8rem;
}

.hero__trust{
  display:flex;
  flex-wrap:wrap;
  gap:2rem;
  margin:2.6rem 0 0;
  padding:0;
  list-style:none;
}
.hero__trust li{ display:flex; flex-direction:column; gap:2px; }
.hero__trust strong{
  font-family:var(--font-display);
  font-size:1.1rem;
  font-weight:500;
}
.hero__trust span{
  font-size:.72rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted-2);
}

/* ---- Retrato con <img> real (compatible con todos los móviles) ---- */
.hero__media{
  position:relative;
  display:grid;
  place-items:center;
  isolation:isolate;
}

.portrait{
  position:relative;
  width:100%;
  max-width:410px;
  aspect-ratio:4 / 5;
  min-height:320px;
}

.portrait__photo{
  position:absolute;
  inset:0;
  z-index:2;
  border-radius:230px 230px 26px 26px;
  overflow:hidden;
  background-color:#D9E3D8;
  box-shadow:var(--shadow-md);
  -webkit-transform:translateZ(0);
  transform:translateZ(0);
}

.portrait__photo img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center top;
}

.portrait__leaf{
  position:absolute;
  z-index:1;
  right:-38px;
  bottom:-30px;
  width:150px;
  color:var(--ink);
  transform:rotate(-10deg);
  pointer-events:none;
}
.portrait__leaf svg{ width:100%; height:auto; }

.float-card{
  position:absolute;
  z-index:3;
  left:-14px;
  bottom:34px;
  display:flex;
  align-items:center;
  gap:.75rem;
  padding:.8rem 1.1rem;
  background:#fff;
  border-radius:14px;
  box-shadow:var(--shadow-md);
  animation:floaty 5s ease-in-out infinite;
}
.float-card__icon{
  display:grid;
  place-items:center;
  width:36px; height:36px;
  border-radius:10px;
  background:var(--sage);
  color:var(--ink);
  font-size:.95rem;
  flex:0 0 auto;
}
.float-card strong{ display:block; font-size:.85rem; font-weight:600; }
.float-card small{ font-size:.75rem; color:var(--muted-2); }

@keyframes floaty{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-8px); }
}

/* ==========================================================================
   FRANJA
   ========================================================================== */
.strip{
  background:var(--cream-2);
  border-block:1px solid var(--line-soft);
  padding:.95rem 0;
}
.strip__inner{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:.4rem 1.3rem;
}
.strip p{
  margin:0;
  font-size:.76rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
}
.strip span{ color:var(--sage-2); }

/* ==========================================================================
   SOBRE MÍ
   ========================================================================== */
.about{
  display:grid;
  grid-template-columns:.88fr 1.12fr;
  gap:clamp(2rem, 6vw, 4.5rem);
  align-items:center;
}

/* ---- Foto Sobre mí con <img> real ---- */
.about__media{
  position:relative;
  aspect-ratio:4 / 5;
  min-height:320px;
}

.about__accent{
  position:absolute;
  z-index:0;
  inset:22px -22px -22px 22px;
  border-radius:var(--radius);
  background:var(--sage);
}

.about__photo{
  position:relative;
  z-index:1;
  width:100%;
  height:100%;
  border-radius:var(--radius);
  overflow:hidden;
  background-color:#D9E3D8;
  box-shadow:var(--shadow-md);
  -webkit-transform:translateZ(0);
  transform:translateZ(0);
}

.about__photo img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}

.about__copy h2{ margin-bottom:1.1rem; }
.about__copy p{ color:#4A5F5A; }

.checklist{
  display:grid;
  gap:.7rem;
  margin:1.7rem 0 2.1rem;
  padding:0;
  list-style:none;
}
.checklist li{
  position:relative;
  padding-left:2rem;
  font-size:.94rem;
  color:#3D524D;
}
.checklist li::before{
  content:"";
  position:absolute;
  left:0; top:.15em;
  width:19px; height:19px;
  border-radius:50%;
  background-color:var(--sage);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%232F4F4A' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size:11px;
  background-position:center;
  background-repeat:no-repeat;
}
.checklist em{ font-style:normal; color:var(--muted-2); }

/* ==========================================================================
   TARJETAS / SERVICIOS
   ========================================================================== */
.cards{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:1.4rem;
}
.cards--3{ grid-template-columns:repeat(3, minmax(0,1fr)); }

.card{
  display:flex;
  flex-direction:column;
  padding:clamp(1.5rem, 3vw, 2.1rem);
  background:#fff;
  border:1px solid var(--line-soft);
  border-radius:var(--radius);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease),
             border-color .35s var(--ease);
}
.card:hover{
  transform:translateY(-5px);
  border-color:transparent;
  box-shadow:var(--shadow-md);
}

.card__icon{
  display:grid;
  place-items:center;
  width:48px; height:48px;
  margin-bottom:1.15rem;
  border-radius:14px;
  background:var(--sage);
  color:var(--ink);
}
.card__icon svg{ width:22px; height:22px; }

.card h3{
  font-size:1.22rem;
  font-weight:500;
  margin-bottom:.5rem;
}
.card p{
  font-size:.93rem;
  color:var(--muted);
  margin-bottom:1.3rem;
}

.card__link{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  margin-top:auto;
  align-self:flex-start;
  font-size:.88rem;
  font-weight:500;
  text-decoration:none;
  color:var(--ink);
  border-bottom:1px solid transparent;
  cursor:pointer;
  transition:color .25s var(--ease), gap .25s var(--ease),
             border-color .25s var(--ease);
}
.card__link:hover{
  color:var(--accent);
  gap:.6rem;
  border-bottom-color:rgba(184,137,92,.4);
}

.card--soft{
  background:rgba(255,255,255,.62);
  border-color:var(--line-soft);
}
.card--soft:hover{ background:#fff; }

/* ==========================================================================
   PASOS
   ========================================================================== */
.steps{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:1.6rem;
  margin:0;
  padding:0;
  list-style:none;
}
.step{
  padding-top:1.5rem;
  border-top:1px solid var(--line);
}
.step__num{
  display:block;
  margin-bottom:.7rem;
  font-family:var(--font-display);
  font-size:1.55rem;
  font-weight:300;
  line-height:1;
  color:var(--accent);
  letter-spacing:.02em;
}
.step h3{
  font-family:var(--font-body);
  font-size:1.02rem;
  font-weight:600;
  letter-spacing:0;
  margin-bottom:.35rem;
}
.step p{
  font-size:.9rem;
  color:var(--muted);
  margin:0;
}

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq{
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:clamp(2rem, 5vw, 4rem);
  align-items:start;
}
.faq__list{ display:grid; gap:.65rem; }

details{
  background:#fff;
  border:1px solid var(--line-soft);
  border-radius:14px;
  padding:0 1.3rem;
  transition:box-shadow .3s var(--ease), border-color .3s var(--ease);
}
details[open]{
  border-color:transparent;
  box-shadow:var(--shadow-sm);
}

summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:1.1rem 0;
  font-size:.96rem;
  font-weight:500;
  cursor:pointer;
  list-style:none;
  color:var(--ink);
}
summary::-webkit-details-marker{ display:none; }
summary::after{
  content:"+";
  font-family:var(--font-body);
  font-size:1.3rem;
  font-weight:300;
  line-height:1;
  color:var(--accent);
  transition:transform .3s var(--ease);
  flex:0 0 auto;
}
details[open] summary::after{ transform:rotate(45deg); }

details p{
  margin:0 0 1.15rem;
  font-size:.92rem;
  line-height:1.7;
  color:var(--muted);
}

/* ==========================================================================
   CONTACTO
   ========================================================================== */
.contact{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(2rem, 6vw, 4.5rem);
  align-items:start;
}

.contact__copy h2{
  font-size:clamp(1.9rem, 3.8vw, 2.9rem);
  margin-bottom:1rem;
}
.contact__copy > p{ color:rgba(250,247,242,.72); max-width:42ch; }

.contact__list{
  display:grid;
  gap:1.15rem;
  margin:2.3rem 0 0;
  padding:0;
  list-style:none;
}
.contact__list li{
  display:flex;
  align-items:center;
  gap:.9rem;
}
.contact__ico{
  display:grid;
  place-items:center;
  width:44px; height:44px;
  border-radius:12px;
  background:rgba(250,247,242,.07);
  border:1px solid rgba(250,247,242,.13);
  color:var(--cream);
  flex:0 0 auto;
}
.contact__ico svg{ width:20px; height:20px; }
.contact__list small{
  display:block;
  margin-bottom:2px;
  font-size:.7rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(250,247,242,.45);
}
.contact__list a{
  font-size:.95rem;
  text-decoration:none;
  color:var(--cream);
  border-bottom:1px solid transparent;
  transition:color .25s var(--ease), border-color .25s var(--ease);
  cursor:pointer;
}
.contact__list a:hover{
  color:#fff;
  border-bottom-color:rgba(250,247,242,.5);
}

/* Formulario */
.contact__form{
  padding:clamp(1.6rem, 3vw, 2.2rem);
  background:var(--cream);
  color:var(--ink);
  border-radius:20px;
  box-shadow:var(--shadow-md);
}
.contact__form h3{
  font-size:1.35rem;
  font-weight:500;
  margin-bottom:1.4rem;
}
.contact__form.is-error{ animation:shake .4s var(--ease); }
@keyframes shake{
  0%,100%{ transform:translateX(0); }
  25%{ transform:translateX(-6px); }
  75%{ transform:translateX(6px); }
}

.field{ margin-bottom:1rem; }

.field label{
  display:block;
  margin-bottom:.4rem;
  font-size:.72rem;
  font-weight:500;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--muted-2);
}

.field input,
.field select,
.field textarea{
  width:100%;
  padding:.8rem 1rem;
  font-family:inherit;
  font-size:16px;
  color:var(--ink);
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease);
  -webkit-appearance:none;
  appearance:none;
}
.field select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%232F4F4A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 1rem center;
  background-size:16px;
  padding-right:2.5rem;
}
.field textarea{ resize:vertical; min-height:88px; }

.field input::placeholder,
.field textarea::placeholder{ color:#A9B6B1; }

.field input:focus,
.field select:focus,
.field textarea:focus{
  outline:none;
  border-color:var(--ink);
  box-shadow:0 0 0 3px rgba(47,79,74,.1);
}

.form__note{
  margin:.95rem 0 0;
  font-size:.76rem;
  line-height:1.5;
  text-align:center;
  color:var(--muted-2);
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer{
  background:var(--ink-3);
  color:rgba(250,247,242,.62);
  padding:clamp(2.8rem, 6vw, 4rem) 0 2rem;
}
.footer__grid{
  display:grid;
  grid-template-columns:1.15fr .75fr 1.1fr;
  gap:clamp(1.8rem, 4vw, 3rem);
}
.footer__brand p{
  margin-top:1rem;
  font-size:.88rem;
  color:rgba(250,247,242,.5);
}

.footer__nav{ display:grid; gap:.55rem; align-content:start; }
.footer__nav a{
  font-size:.88rem;
  text-decoration:none;
  color:rgba(250,247,242,.72);
  transition:color .25s var(--ease), transform .25s var(--ease);
  justify-self:start;
}
.footer__nav a:hover{ color:var(--cream); transform:translateX(2px); }

.footer__legal p{
  font-size:.8rem;
  line-height:1.6;
  margin-bottom:.55rem;
  color:rgba(250,247,242,.5);
}
.footer__legal strong{ color:var(--cream); }
.footer__legal a{
  color:var(--cream);
  text-decoration:underline;
  text-underline-offset:2px;
}
.footer__small{ font-size:.72rem !important; opacity:.85; }

/* ==========================================================================
   BOTÓN FLOTANTE WHATSAPP
   ========================================================================== */
.wa-float{
  position:fixed;
  right:20px;
  bottom:20px;
  z-index:95;
  display:grid;
  place-items:center;
  width:58px; height:58px;
  border-radius:50%;
  background:var(--wa);
  color:#fff;
  text-decoration:none;
  box-shadow:0 14px 30px -8px rgba(37,211,102,.75);
  transition:transform .3s var(--ease), background .3s var(--ease);
  -webkit-tap-highlight-color:transparent;
}
.wa-float svg{ width:28px; height:28px; }
.wa-float:hover{
  background:var(--wa-dark);
  transform:scale(1.07);
}
.wa-float::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  border:2px solid rgba(37,211,102,.55);
  animation:pulse 2.6s ease-out infinite;
}
@keyframes pulse{
  0%{ transform:scale(1); opacity:.8; }
  70%{ transform:scale(1.5); opacity:0; }
  100%{ transform:scale(1.5); opacity:0; }
}

/* ==========================================================================
   ANIMACIÓN AL HACER SCROLL
   ========================================================================== */
.js-ready .reveal{
  opacity:0;
  transform:translateY(20px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.js-ready .reveal.is-visible{
  opacity:1;
  transform:none;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1024px){
  .hero__grid{ grid-template-columns:1fr; }
  .hero__media{ order:-1; max-width:340px; margin-inline:auto; }
  .hero__copy{ text-align:left; }
  .float-card{ left:auto; right:-6px; bottom:14px; }

  .about{ grid-template-columns:1fr; }
  .about__media{ max-width:400px; margin-inline:auto; width:100%; }

  .faq{ grid-template-columns:1fr; }
  .faq__list{ margin-top:.5rem; }

  .contact{ grid-template-columns:1fr; }

  .steps{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .cards--3{ grid-template-columns:repeat(2, minmax(0,1fr)); }

  .footer__grid{ grid-template-columns:1fr 1fr; }
  .footer__legal{ grid-column:1 / -1; }
}

@media (max-width:860px){
  .nav__toggle{ display:flex; }

  .nav__menu{
    position:absolute;
    top:100%;
    left:0; right:0;
    flex-direction:column;
    align-items:stretch;
    gap:.15rem;
    padding:1rem 1.25rem 1.5rem;
    background:var(--cream);
    border-bottom:1px solid var(--line-soft);
    box-shadow:0 26px 40px -30px rgba(30,56,51,.55);
    opacity:0;
    transform:translateY(-10px);
    pointer-events:none;
    transition:opacity .28s var(--ease), transform .28s var(--ease);
  }
  .nav__menu.is-open{
    opacity:1;
    transform:none;
    pointer-events:auto;
  }
  .nav__menu > a:not(.btn){
    padding:.85rem 0;
    font-size:1rem;
    border-bottom:1px solid var(--line-soft);
  }
  .nav__menu > a:not(.btn)::after{ display:none; }
  .nav__menu .btn{ margin-top:.9rem; align-self:center; }

  .strip__inner{ font-size:.7rem; gap:.3rem .8rem; }
  .strip span{ display:none; }
}

@media (max-width:640px){
  .container{ width: calc(100% - 1.75rem); }

  .cards,
  .cards--3,
  .steps{ grid-template-columns:1fr; }

  .hero__trust{ gap:1.4rem; }
  .hero__actions .btn{ flex:1 1 100%; }

  .portrait{ max-width:300px; }
  .float-card{ right:0; bottom:0; padding:.65rem .9rem; }
  .float-card strong{ font-size:.8rem; }
  .float-card small{ font-size:.7rem; }

  .about__accent{ inset:16px -14px -14px 16px; }

  .footer__grid{ grid-template-columns:1fr; }
  .footer__nav{ grid-template-columns:1fr 1fr; }

  .wa-float{ width:52px; height:52px; right:14px; bottom:14px; }
  .wa-float svg{ width:25px; height:25px; }
}

/* ---------- Accesibilidad: menos movimiento ---------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .js-ready .reveal{ opacity:1; transform:none; }
}