/* ============================================================
   MADEJA · Soluciones Jurídicas — Sitio principal
   Paleta del logotipo · Tipografía Poppins
   ============================================================ */

:root{
  --verde:#10413E;
  --verde-osc:#0B2F2D;
  --verde-claro:#17514D;
  --crema:#E6E5D0;
  --papel:#F4F2E8;
  --papel-hondo:#EBE8DA;
  --rosa:#C18A85;
  --rosa-osc:#A9736E;

  --tinta:#12332F;            /* texto sobre papel */
  --tinta-suave:#4A625E;
  --sobre-verde:rgba(230,229,208,.66);
  --linea-clara:rgba(18,51,47,.14);
  --linea-oscura:rgba(230,229,208,.16);

  --fuente:"Poppins","Helvetica Neue",Arial,sans-serif;
  --ancho:1180px;
  --margen:clamp(1.25rem,5vw,3rem);
  --alto-cabecera:76px;
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0 }

html{ scroll-behavior:smooth; scroll-padding-top:calc(var(--alto-cabecera) + 16px); -webkit-text-size-adjust:100% }

body{
  background:var(--papel);
  color:var(--tinta);
  font-family:var(--fuente);
  font-weight:300;
  font-size:16px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ display:block; max-width:100%; height:auto }
a{ color:inherit }
h1,h2,h3{ font-weight:400; line-height:1.2; letter-spacing:-.02em }

.contenedor{ width:100%; max-width:var(--ancho); margin:0 auto; padding:0 var(--margen) }

.rotulo{
  font-size:.66rem; font-weight:500; letter-spacing:.26em;
  text-transform:uppercase; color:var(--rosa); margin-bottom:1rem;
}

/* ---------- Botones ---------- */
.boton{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding:.95rem 1.7rem;
  font-size:.72rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  text-decoration:none; border:1px solid transparent; cursor:pointer;
  font-family:inherit;
  transition:background-color .28s ease,color .28s ease,border-color .28s ease;
}
.boton--lleno{ background:var(--rosa); color:#12332F }
.boton--lleno:hover{ background:var(--rosa-osc); color:var(--papel) }
.boton--claro{ border-color:var(--linea-oscura); color:var(--crema) }
.boton--claro:hover{ border-color:var(--crema); background:rgba(230,229,208,.08) }
.boton svg{ width:16px; height:16px; flex:none }

.enlace{
  display:inline-flex; align-items:center; gap:.55rem;
  margin-top:1.5rem;
  font-size:.75rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  color:var(--rosa); text-decoration:none;
}
.enlace svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.4; transition:transform .28s ease }
.enlace:hover svg{ transform:translateX(4px) }

/* ============================================================
   Cinta de vista previa
   ============================================================ */
.cinta-borrador{
  position:relative; z-index:60;
  background:var(--rosa); color:#12332F;
  padding:.55rem var(--margen);
  font-size:.72rem; letter-spacing:.05em; text-align:center;
}
.cinta-borrador em{ font-style:normal; font-weight:500 }
.cinta-borrador a{ margin-left:.75rem; font-weight:500; text-decoration:underline }

/* ============================================================
   Cabecera
   ============================================================ */
.cabecera{
  position:sticky; top:0; z-index:50;
  background:var(--verde);
  border-bottom:1px solid var(--linea-oscura);
}
.cabecera__interior{
  min-height:var(--alto-cabecera);
  display:flex; align-items:center; justify-content:space-between; gap:2rem;
}
.cabecera__marca img{ width:150px }

.menu{ display:flex; align-items:center; gap:1.9rem }
.menu a{
  font-size:.74rem; font-weight:400; letter-spacing:.12em; text-transform:uppercase;
  color:var(--sobre-verde); text-decoration:none; transition:color .25s ease;
}
.menu a:hover{ color:var(--crema) }
.menu__cta{ color:#12332F !important; padding:.7rem 1.25rem; letter-spacing:.1em }
.menu__cta:hover{ color:var(--papel) !important }

.hamburguesa{
  display:none;
  width:40px; height:34px; padding:8px 6px;
  background:none; border:0; cursor:pointer;
  flex-direction:column; justify-content:space-between;
}
.hamburguesa span{ display:block; height:1px; background:var(--crema); transition:transform .3s ease,opacity .3s ease }
.hamburguesa[aria-expanded="true"] span:nth-child(1){ transform:translateY(8px) rotate(45deg) }
.hamburguesa[aria-expanded="true"] span:nth-child(2){ opacity:0 }
.hamburguesa[aria-expanded="true"] span:nth-child(3){ transform:translateY(-8px) rotate(-45deg) }

/* ============================================================
   Portada
   ============================================================ */
.hero{ background:var(--verde); color:var(--crema); overflow:hidden }
.hero__interior{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  align-items:center; gap:2rem;
  padding-top:clamp(2rem,4.5vw,3.5rem);
  padding-bottom:clamp(2.5rem,5.5vw,4.5rem);
}
.hero__texto{ max-width:34rem }
.hero h1{
  font-size:clamp(2.2rem,4.8vw,3.6rem);
  font-weight:300; line-height:1.12; margin-bottom:1.1rem;
}
.hero h1 strong{ display:block; font-weight:500; color:var(--rosa) }
.hero__bajada{ font-size:clamp(1rem,1.3vw,1.12rem); color:var(--sobre-verde); max-width:30rem; margin-bottom:1.6rem }
.hero__acciones{ display:flex; flex-wrap:wrap; gap:.8rem }
.hero__nota{
  position:relative; padding-left:1.2rem;
  font-size:.88rem; color:var(--sobre-verde); max-width:27rem;
}
.hero__nota::before{ content:""; position:absolute; left:0; top:.45em; bottom:.45em; width:1px; background:var(--rosa) }

/* la gente del hero, cortada por el borde inferior de la sección */
.hero{ position:relative }
.hero__interior{ align-items:end }
.hero__ilustracion{
  justify-self:end;
  align-self:end;
  width:100%;
  max-width:640px;
  margin-bottom:calc(-1 * clamp(2.5rem,5.5vw,4.5rem));
}
.hero__ilustracion img,
.hero__ilustracion svg{ width:100%; height:auto; display:block }

/* el hilo, ahora en la sección de marca */
.madeja__hilo{ margin:1.25rem 0 -1.5rem }
.madeja__hilo svg{ width:100%; max-width:380px; height:auto; overflow:visible }
.hilo{
  fill:none; stroke:rgba(230,229,208,.45); stroke-width:1.2; stroke-linecap:round;
  stroke-dasharray:1800; stroke-dashoffset:1800;
  animation:desenredar 2.8s cubic-bezier(.55,.06,.3,1) forwards;
}
.hilo--tenue{ stroke:rgba(230,229,208,.18); animation-delay:.25s }
.hilo--rosa{ stroke:rgba(193,138,133,.7); animation-delay:.5s }
@keyframes desenredar{ to{ stroke-dashoffset:0 } }

/* ============================================================
   Secciones
   ============================================================ */
.seccion{ padding:clamp(2.25rem,4.2vw,3.75rem) 0 }
.seccion--papel{ background:var(--papel) }
.seccion--borde{ border-top:1px solid var(--linea-clara) }
.seccion--verde{ background:var(--verde); color:var(--crema) }
.seccion--verde .rotulo{ color:var(--rosa) }

.seccion__cabeza{ max-width:44rem; margin-bottom:clamp(1.25rem,2.4vw,1.9rem) }
.seccion__cabeza h2{ font-size:clamp(1.7rem,3.2vw,2.5rem); margin-bottom:.5rem }
.seccion__entrada{ color:var(--tinta-suave); max-width:38rem }

/* ---------- Situaciones ---------- */
.situaciones{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(272px,1fr));
  gap:.75rem;
}
.situacion{
  display:flex; align-items:center; gap:1rem;
  height:100%; min-height:86px;
  padding:1.05rem 1.3rem;
  background:#fff; border:1px solid var(--linea-clara);
  font-family:inherit; font-size:.98rem; font-weight:400; color:var(--tinta);
  text-align:left; cursor:pointer;
  transition:border-color .28s ease,transform .28s ease,box-shadow .28s ease;
}
.situacion:hover{
  border-color:var(--rosa);
  transform:translateY(-2px);
  box-shadow:0 10px 30px -18px rgba(18,51,47,.5);
}
.situacion span{ flex:1; line-height:1.35 }
.situacion__ico{ width:38px; height:38px; flex:none; opacity:.9 }
.situacion__flecha{ width:20px; height:20px; flex:none; fill:none; stroke:var(--rosa); stroke-width:1.4; transition:transform .28s ease }
.situacion:hover .situacion__flecha{ transform:translateX(4px) }

.situacion--destacada{
  grid-column:1/-1;
  align-items:center; gap:1.25rem;
  background:var(--verde-claro); border-color:var(--verde-claro); color:var(--crema);
  padding:1.35rem 1.6rem;
}
.situacion--destacada div{ display:grid; gap:.45rem }
.situacion--destacada span{ font-size:1.15rem; font-weight:400 }
.situacion__ico--claro{ width:46px; height:46px; opacity:.95 }
.situacion--destacada small{ font-size:.88rem; font-weight:300; line-height:1.6; color:var(--sobre-verde); max-width:52ch }
.situacion--destacada:hover{ border-color:var(--rosa) }

/* ---------- Soluciones ---------- */
.soluciones{ list-style:none; border-top:1px solid var(--linea-clara) }
.solucion{ display:block }
.soluciones__cierre{ margin-top:2rem; color:var(--tinta-suave) }
.soluciones__cierre a{ color:var(--rosa); font-weight:500 }

/* ---------- Madeja ---------- */
.madeja{
  display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(1.5rem,3.5vw,3rem); align-items:center;
}
.madeja h2{ font-size:clamp(1.55rem,2.8vw,2.15rem); font-weight:300; margin-bottom:.9rem }
.madeja p{ color:var(--sobre-verde); max-width:46ch }

.pilares{ list-style:none; display:grid; gap:1.1rem }
.pilares li{ padding-left:1.35rem; border-left:1px solid var(--linea-oscura) }
.pilares h3{
  font-size:.74rem; font-weight:500; letter-spacing:.22em; text-transform:uppercase;
  color:var(--rosa); margin-bottom:.5rem;
}
.pilares p{ font-size:.94rem; color:var(--sobre-verde) }

/* ---------- Cómo trabajamos ---------- */
.pasos{
  list-style:none;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:1.4rem 1.75rem;
}
.pasos li{ padding-top:1.25rem; border-top:1px solid var(--tinta) }
.pasos__num{
  display:block; font-size:.78rem; letter-spacing:.16em; color:var(--rosa); margin-bottom:.9rem;
}
.pasos h3{ font-size:1.05rem; margin-bottom:.5rem }
.pasos p{ font-size:.93rem; color:var(--tinta-suave) }

/* ---------- Llamada ---------- */
.llamada{ background:var(--verde-osc); color:var(--crema); padding:clamp(2rem,3.8vw,3rem) 0 0 }
.llamada{ position:relative; overflow:hidden }
.llamada__interior{
  position:relative; z-index:1;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:2rem;
}
.llamada__escena{
  max-width:var(--ancho);
  margin:clamp(.75rem,1.5vw,1.25rem) auto 0;
  padding:0 var(--margen);
}
.llamada__escena img{ width:100%; max-width:480px; height:auto; margin:0 auto; display:block }
.llamada h2{ font-size:clamp(1.5rem,2.6vw,2rem); font-weight:300; margin-bottom:.6rem }
.llamada p{ color:var(--sobre-verde); max-width:52ch; font-size:.97rem }

/* ---------- Detrás de Madeja ---------- */
.detras{
  display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:clamp(2rem,5vw,4rem); align-items:center;
}
.detras__retrato{ justify-self:center; width:100%; max-width:380px }
.detras__retrato img{ width:100%; height:auto }

/* escena de conversación en "Cómo trabajamos" */
.escena{ margin:0 auto clamp(1rem,2vw,1.5rem); max-width:560px }
.escena img{ width:100%; height:auto }
.detras h2{ font-size:clamp(1.5rem,2.6vw,2.05rem); font-weight:300; margin-bottom:1rem }
.detras p{ color:var(--tinta-suave); margin-bottom:1rem; max-width:52ch }

/* ---------- Contacto ---------- */
.contacto{
  display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
  gap:clamp(2rem,5vw,4rem); align-items:start;
}
.contacto h2{ font-size:clamp(1.8rem,3.2vw,2.5rem); font-weight:300; margin-bottom:1rem }
.contacto__texto > p{ color:var(--sobre-verde); max-width:40ch }

.contacto__datos{ list-style:none; margin:1.5rem 0; display:grid; gap:.6rem }
.contacto__datos li{
  display:grid; grid-template-columns:110px 1fr; gap:1rem;
  padding-bottom:.9rem; border-bottom:1px solid var(--linea-oscura);
  font-size:.94rem;
}
.contacto__datos span{ font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:var(--rosa); padding-top:.28rem }
.contacto__datos a{ text-decoration:none }
.contacto__datos a:hover{ color:#fff }
.icono-wa{ width:17px; height:17px }

.contacto__saludo{ margin-top:1.25rem; max-width:190px }
.contacto__saludo img{ width:100%; height:auto }

.contacto__formulario{
  background:var(--verde-claro);
  border:1px solid var(--linea-oscura);
  padding:clamp(1.5rem,3.5vw,2.5rem);
}
.contacto__formulario form{ display:grid; gap:1.15rem }
.contacto__formulario label{ display:grid; gap:.45rem; font-size:.76rem; letter-spacing:.04em; color:var(--crema) }
.contacto__formulario input,
.contacto__formulario textarea{
  width:100%; padding:.8rem .9rem;
  background:rgba(11,47,45,.55); border:1px solid var(--linea-oscura);
  color:var(--crema); font-family:inherit; font-size:.94rem; font-weight:300;
  border-radius:2px; transition:border-color .25s ease,background-color .25s ease;
}
.contacto__formulario textarea{ resize:vertical; line-height:1.6 }
.contacto__formulario input:focus,
.contacto__formulario textarea:focus{ outline:none; border-color:var(--rosa); background:rgba(11,47,45,.85) }
.contacto__formulario .boton{ justify-self:start; margin-top:.25rem }
.formulario__nota{ font-size:.78rem; color:var(--sobre-verde) }
.trampa{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden }

.errores{
  margin-bottom:1.25rem; padding:.9rem 1.1rem;
  border-left:2px solid #E0A0A0; background:rgba(224,160,160,.12); font-size:.87rem;
}
.recibido{ padding:1rem 0 }
.recibido h3{ font-size:1.25rem; margin-bottom:.5rem; color:var(--crema) }
.recibido p{ color:var(--sobre-verde) }

/* ============================================================
   Pie
   ============================================================ */
.pie{ background:var(--verde-osc); color:var(--crema); padding:clamp(2rem,3.5vw,2.75rem) 0 0 }
.pie__interior{
  display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,1fr);
  gap:2rem; padding-bottom:1.75rem;
}
.pie__marca img{ width:170px; margin-bottom:1rem }
.pie__marca p{ font-size:.86rem; color:var(--sobre-verde); max-width:26ch }
.pie__enlaces{ display:grid; gap:.6rem; align-content:start }
.pie__enlaces a{ font-size:.85rem; color:var(--sobre-verde); text-decoration:none; transition:color .25s ease }
.pie__enlaces a:hover{ color:var(--crema) }
.pie__datos{ display:grid; gap:.5rem; align-content:start; font-size:.85rem; color:var(--sobre-verde) }
.pie__datos a{ text-decoration:none }
.pie__datos a:hover{ color:var(--crema) }
.pie__legal{
  border-top:1px solid var(--linea-oscura);
  padding:1.25rem var(--margen);
  text-align:center; font-size:.72rem; letter-spacing:.08em; color:rgba(230,229,208,.4);
}

/* ---------- Botón flotante de WhatsApp ---------- */
.flotante{
  position:fixed; right:1.25rem; bottom:1.25rem; z-index:45;
  display:grid; place-items:center;
  width:52px; height:52px; border-radius:50%;
  background:var(--rosa); color:#12332F;
  box-shadow:0 14px 34px -14px rgba(11,47,45,.85);
  transition:transform .28s ease,background-color .28s ease;
}
.flotante:hover{ transform:translateY(-3px); background:var(--crema) }
.flotante svg{ width:25px; height:25px }

/* ============================================================
   Aparición al desplazar
   ============================================================ */
.revelar{ opacity:0; transform:translateY(16px); transition:opacity .7s ease,transform .7s ease }
.revelar.visible{ opacity:1; transform:none }

/* ============================================================
   Pantallas medianas y pequeñas
   ============================================================ */
@media (max-width:960px){
  .hero__interior,.madeja,.detras,.contacto{ grid-template-columns:1fr }
  .hero__ilustracion{ max-width:460px; justify-self:center; margin-top:.75rem }
  .detras__retrato{ order:2; max-width:300px }
  .pie__interior{ grid-template-columns:1fr 1fr }
}

@media (max-width:820px){
  .hamburguesa{ display:flex }
  .menu{
    position:fixed; inset:var(--alto-cabecera) 0 auto 0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--verde); border-bottom:1px solid var(--linea-oscura);
    padding:1rem var(--margen) 1.75rem;
    transform:translateY(-120%); transition:transform .35s cubic-bezier(.4,0,.2,1);
    max-height:calc(100vh - var(--alto-cabecera)); overflow:auto;
  }
  .menu.abierto{ transform:none }
  .menu a{ padding:.95rem 0; border-bottom:1px solid var(--linea-oscura); font-size:.82rem }
  .menu__cta{ margin-top:1.25rem; border-bottom:0; justify-content:center }
}

@media (max-width:600px){
  .situacion--destacada{ flex-direction:column; gap:.9rem }
  .contacto__saludo{ display:none }
  .solucion > p{ padding-left:0 }
  .contacto__datos li{ grid-template-columns:1fr; gap:.15rem }
  .pie__interior{ grid-template-columns:1fr }
  .hero__acciones .boton,.llamada .boton{ flex:1 1 100%; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  .hilo{ animation:none; stroke-dashoffset:0 }
  .revelar{ opacity:1; transform:none; transition:none }
}


/* ============================================================
   MOVIMIENTO
   ============================================================ */

/* ---------- Barra de lectura ---------- */
.progreso{
  position:fixed; top:0; left:0; right:0; z-index:70;
  height:3px; background:transparent; pointer-events:none;
}
.progreso span{
  display:block; height:100%; width:0;
  background:var(--rosa);
  transition:width .12s linear;
}

/* ---------- La gente respira y saluda ---------- */
.hero__ilustracion svg{ overflow:visible }
.fig{
  transform-box:fill-box;
  transform-origin:center bottom;
  animation:respira 6.5s ease-in-out infinite;
}
.fig--1{ animation-delay:0s }
.fig--2{ animation-delay:.7s }
.fig--3{ animation-delay:1.4s }
.fig--4{ animation-delay:.4s }
.fig--5{ animation-delay:1.1s }

@keyframes respira{
  0%,100%{ transform:translateY(0) }
  50%    { transform:translateY(-6px) }
}

.saluda-mano{
  transform-box:fill-box;
  transform-origin:70% 100%;
  animation:saluda 2.6s ease-in-out infinite;
}
@keyframes saluda{
  0%,62%,100%{ transform:rotate(0deg) }
  70%        { transform:rotate(-11deg) }
  78%        { transform:rotate(7deg) }
  86%        { transform:rotate(-8deg) }
  94%        { transform:rotate(3deg) }
}

/* la ilustración entra desde abajo */
.hero__ilustracion{ animation:entra 1.1s cubic-bezier(.22,.61,.36,1) both .15s }
@keyframes entra{
  from{ opacity:0; transform:translateY(28px) }
  to  { opacity:1; transform:none }
}

/* ---------- Cinta con las áreas ---------- */
.cinta{
  background:var(--verde-osc);
  border-top:1px solid var(--linea-oscura);
  border-bottom:1px solid var(--linea-oscura);
  overflow:hidden;
  padding:.95rem 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.cinta__pista{
  display:flex; align-items:center; gap:1.5rem;
  width:max-content;
  animation:desfile 38s linear infinite;
}
.cinta:hover .cinta__pista{ animation-play-state:paused }
.cinta__pista span{
  font-size:.82rem; font-weight:400; letter-spacing:.16em; text-transform:uppercase;
  color:var(--crema); white-space:nowrap;
}
.cinta__pista i{ color:var(--rosa); font-style:normal }
@keyframes desfile{
  from{ transform:translateX(0) }
  to  { transform:translateX(-50%) }
}

/* ---------- Soluciones desplegables ---------- */
.soluciones{ border-top:1px solid var(--linea-clara) }
.soluciones li{ border-bottom:1px solid var(--linea-clara) }

.solucion__num{ font-size:.74rem; letter-spacing:.1em; color:var(--rosa); flex:none; min-width:22px }
.solucion summary{
  display:flex; align-items:center; gap:1.25rem;
  padding:1.25rem 0;
  cursor:pointer; list-style:none;
  transition:padding-left .3s ease;
}
.solucion summary::-webkit-details-marker{ display:none }
.solucion summary:hover{ padding-left:.5rem }
.solucion summary h3{ flex:1; font-size:clamp(1rem,1.6vw,1.2rem); font-weight:400 }

.solucion__mas{
  position:relative; width:20px; height:20px; flex:none;
}
.solucion__mas::before,
.solucion__mas::after{
  content:""; position:absolute; inset:50% 0 auto 0;
  height:1.5px; background:var(--rosa);
  transition:transform .35s cubic-bezier(.22,.61,.36,1);
}
.solucion__mas::after{ transform:rotate(90deg) }
.solucion[open] .solucion__mas::after{ transform:rotate(0deg) }
.solucion[open] summary{ padding-left:.5rem }

.solucion > p{
  max-width:58ch; color:var(--tinta-suave); font-size:.95rem;
  padding:0 0 1.4rem 2.6rem;
  animation:despliega .4s ease both;
}
@keyframes despliega{
  from{ opacity:0; transform:translateY(-6px) }
  to  { opacity:1; transform:none }
}

/* ---------- Pasos con línea que avanza ---------- */
.pasos li{ position:relative; border-top:0; padding-top:1.5rem }
.pasos li::before{
  content:""; position:absolute; top:0; left:0; right:0;
  height:1px; background:var(--linea-clara);
}
.pasos li::after{
  content:""; position:absolute; top:0; left:0;
  height:1.5px; width:0; background:var(--rosa);
  transition:width .9s cubic-bezier(.22,.61,.36,1);
}
.pasos li.visible::after{ width:100% }
.pasos li:nth-child(2).visible::after{ transition-delay:.18s }
.pasos li:nth-child(3).visible::after{ transition-delay:.36s }
.pasos li:nth-child(4).visible::after{ transition-delay:.54s }

/* ---------- Tarjetas de situación con más vida ---------- */
.situacion{ position:relative; overflow:hidden }
.situacion::after{
  content:""; position:absolute; inset:auto 0 0 0; height:2px;
  background:var(--rosa); transform:scaleX(0); transform-origin:left;
  transition:transform .4s cubic-bezier(.22,.61,.36,1);
}
.situacion:hover::after{ transform:scaleX(1) }
.situacion__ico{ transition:transform .4s cubic-bezier(.34,1.56,.64,1) }
.situacion:hover .situacion__ico{ transform:scale(1.14) rotate(-4deg) }

/* ---------- Botones con un guiño ---------- */
.boton{ position:relative; overflow:hidden }
.boton--lleno:hover{ transform:translateY(-2px) }
.boton{ transition:background-color .28s ease,color .28s ease,border-color .28s ease,transform .28s ease }

@media (prefers-reduced-motion:reduce){
  .fig,.saluda-mano,.hero__ilustracion,.cinta__pista,.solucion > p{ animation:none }
  .pasos li::after{ transition:none }
  .progreso span{ transition:none }
}


/* ---------- La elección viaja hasta el formulario ---------- */
.situacion.elegida{
  border-color:var(--rosa);
  box-shadow:0 0 0 1px var(--rosa) inset;
}
.situacion.elegida::after{ transform:scaleX(1) }

.eleccion{
  display:flex; align-items:center; gap:.6rem; flex-wrap:wrap;
  margin-bottom:1.25rem; padding:.7rem .9rem;
  background:rgba(193,138,133,.16);
  border-left:2px solid var(--rosa);
  font-size:.84rem; color:var(--crema);
  animation:despliega .35s ease both;
}
.eleccion[hidden]{ display:none }
.eleccion span{ color:var(--sobre-verde) }
.eleccion b{ font-weight:500 }
.eleccion button{
  margin-left:auto; width:24px; height:24px;
  background:none; border:0; color:var(--crema);
  font-size:1.1rem; line-height:1; cursor:pointer; opacity:.65;
  transition:opacity .25s ease;
}
.eleccion button:hover{ opacity:1 }

/* ---------- El botón flotante late ---------- */
.flotante::before{
  content:""; position:absolute; inset:0;
  border-radius:50%; background:var(--rosa);
  animation:latido 2.8s ease-out infinite;
  z-index:-1;
}
@keyframes latido{
  0%      { transform:scale(1);   opacity:.55 }
  70%,100%{ transform:scale(1.7); opacity:0 }
}
@media (prefers-reduced-motion:reduce){
  .flotante::before{ animation:none }
}