/* ============================================================================
   Norte · la página de la casa
   Tono ejecutivo: papel, tinta y un solo verde. Filetes finos, mucho aire,
   una sola sección oscura (el método). La brújula gira una vez al abrir.
   ========================================================================== */
:root{
  --tinta:#191714; --verde:#2F5D4E; --noche:#22463A; --papel:#FBFAF8; --cal:#F2EFE8;
  --piedra:#8E887F; --piedra-osc:#5F5A53; --linea:#E3DED5; --verde-cal:#E9EFEB; --salvia:#A9C7B8;
  --noche-linea:rgba(233,239,235,.18); --noche-apoyo:rgba(233,239,235,.72);
  --serif:"Instrument Serif",Georgia,"Times New Roman",serif;
  --sans:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  --ancho:1160px;
  color-scheme:light;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;background:var(--papel);color:var(--tinta);font-family:var(--sans);font-size:16px;line-height:1.65;
  -webkit-font-smoothing:antialiased;}
img{max-width:100%;display:block;}
a{color:inherit;}
h1,h2,h3{margin:0;font-weight:400;text-wrap:balance;}
p,ul,ol,figure,dl,dd{margin:0;}
:focus-visible{outline:2px solid var(--verde);outline-offset:3px;}
.wrap{max-width:var(--ancho);margin:0 auto;padding-inline:clamp(18px,4vw,40px);}

.eyebrow{font-size:11.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--verde);}
.eyebrow.claro,.noche .eyebrow{color:var(--salvia);}
h2{font-family:var(--serif);font-size:clamp(38px,4.8vw,62px);line-height:1.04;letter-spacing:-.01em;margin-top:14px;}
h2 em,h1 em{font-style:italic;color:var(--verde);}
.noche h2 em{color:var(--salvia);}
.intro{font-size:17px;color:var(--piedra-osc);max-width:58ch;margin-top:18px;}
.noche .intro{color:var(--noche-apoyo);}
.parrafo{font-size:clamp(17px,1.5vw,19px);line-height:1.7;color:var(--piedra-osc);max-width:58ch;}
.cab{margin-bottom:clamp(40px,5vw,64px);}

.seccion{padding-block:clamp(80px,10vw,128px);border-top:1px solid var(--linea);}
.cal{background:var(--cal);}
.noche{background:var(--noche);color:var(--papel);border-top:0;}
.dos-col{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(30px,6vw,90px);align-items:start;}
.col-cab h2{margin-top:14px;}

/* ---------- botones ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--sans);font-weight:600;font-size:15px;
  padding:14px 24px;border-radius:3px;text-decoration:none;border:1px solid var(--verde);cursor:pointer;
  background:var(--verde);color:var(--papel);transition:background .2s ease,color .2s ease,border-color .2s ease;}
.btn:hover{background:var(--noche);border-color:var(--noche);}
.btn span{transition:transform .2s ease;}
.btn:hover span{transform:translateX(3px);}
.btn.linea,.btn.linea-osc{background:transparent;color:var(--tinta);border-color:var(--tinta);}
.btn.linea:hover,.btn.linea-osc:hover{background:var(--tinta);color:var(--papel);}
.btn.oscuro{background:var(--tinta);border-color:var(--tinta);}
.btn.claro{background:var(--papel);color:var(--noche);border-color:var(--papel);}
.btn.claro:hover{background:var(--verde-cal);border-color:var(--verde-cal);}
.btn.chico{padding:9px 16px;font-size:13.5px;}
.acciones{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px;}

/* ---------- navegación ---------- */
.nav{position:sticky;top:0;z-index:50;background:rgba(251,250,248,.92);backdrop-filter:blur(10px);
  border-bottom:1px solid transparent;transition:border-color .3s ease;}
.nav.solido{border-bottom-color:var(--linea);}
.nav .in{max-width:var(--ancho);margin:0 auto;padding:14px clamp(18px,4vw,40px);display:flex;align-items:center;gap:30px;}
.logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--tinta);}
.logo span{font-family:var(--serif);font-size:26px;letter-spacing:.06em;line-height:1;}
.logo .aguja{width:10px;height:24px;transform-origin:50% 50%;}
.nav nav{display:flex;gap:28px;margin-left:auto;}
.nav nav a{text-decoration:none;font-size:14px;font-weight:500;color:var(--piedra-osc);}
.nav nav a:hover{color:var(--tinta);}

/* ---------- portada ---------- */
.hero{padding-block:clamp(56px,8vw,96px) 0;}
.hero-in{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);gap:clamp(30px,5vw,70px);align-items:center;}
.hero h1{font-family:var(--serif);font-size:clamp(50px,6.8vw,92px);line-height:.98;letter-spacing:-.018em;margin-top:20px;}
.hero h1 em{display:block;}
.hero-sub{font-size:clamp(17px,1.6vw,19.5px);line-height:1.65;color:var(--piedra-osc);max-width:52ch;margin-top:26px;}
.brujula-caja{justify-self:center;width:100%;max-width:320px;}
.brujula{width:100%;height:auto;overflow:visible;}
.brujula .aro{fill:none;stroke:var(--tinta);stroke-width:1.2;}
.brujula .aro.fino{stroke:var(--linea);stroke-width:1;}
.brujula .marcas line{stroke:var(--tinta);stroke-width:1.2;}
.brujula .letra{font-family:var(--serif);font-size:20px;text-anchor:middle;fill:var(--verde);}
.brujula .letra.tenue{fill:var(--piedra);font-size:15px;}
.aguja-grande{transform-origin:100px 100px;}

/* La vuelta de la brújula: gira, se pasa un poco y se asienta en el norte. */
@keyframes vuelta{
  0%{transform:rotate(-200deg);}
  62%{transform:rotate(368deg);}
  80%{transform:rotate(352deg);}
  92%{transform:rotate(362deg);}
  100%{transform:rotate(360deg);}
}
html.js .aguja-grande{animation:vuelta 2.2s cubic-bezier(.2,.7,.2,1) .25s both;}
html.js .logo .aguja{animation:vuelta 2.2s cubic-bezier(.2,.7,.2,1) .25s both;}

.franja-datos{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:clamp(56px,7vw,90px);}
.franja-datos > div{padding:22px 24px 30px 0;border-top:1px solid var(--tinta);}
.franja-datos > div + div{padding-left:24px;border-left:1px solid var(--linea);}
.franja-datos .k{font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--piedra);}
.franja-datos p{font-size:15.5px;margin-top:6px;}

/* ---------- el punto de partida ---------- */
.areas{list-style:none;padding:0;margin-top:34px;border-top:1px solid var(--linea);}
.areas li{display:grid;grid-template-columns:minmax(0,190px) minmax(0,1fr);gap:20px;padding:18px 0;border-bottom:1px solid var(--linea);}
.areas b{font-weight:700;}
.areas span{color:var(--piedra-osc);}

/* ---------- método ---------- */
.metodo{list-style:none;padding:0;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--noche-linea);}
.metodo li{padding:28px 26px 10px 0;display:flex;flex-direction:column;}
.metodo li + li{padding-left:26px;border-left:1px solid var(--noche-linea);}
.metodo .n{font-family:var(--serif);font-size:56px;line-height:1;color:var(--salvia);font-variant-numeric:tabular-nums;}
.metodo h3{font-size:19px;font-weight:700;margin-top:20px;}
.metodo p{font-size:15px;color:var(--noche-apoyo);margin-top:8px;flex:1;}
.metodo em{font-style:normal;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--salvia);margin-top:22px;}

/* ---------- etapas ---------- */
.etapas{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,24px);counter-reset:etapa;}
.etapa{border:1px solid var(--linea);border-radius:4px;padding:30px;display:flex;flex-direction:column;background:var(--papel);
  position:relative;}
.etapa:not(:last-child)::after{content:"→";position:absolute;right:-19px;top:34px;width:14px;text-align:center;color:var(--piedra);}
.etiqueta{font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--piedra);}
.etapa h3{font-family:var(--serif);font-size:32px;line-height:1.05;margin-top:12px;}
.etapa p:not(.etiqueta):not(.estado){color:var(--piedra-osc);margin-top:12px;font-size:15px;flex:1;}
.estado{align-self:flex-start;margin-top:22px;font-size:12px;font-weight:700;padding:4px 11px;border-radius:999px;
  border:1px solid var(--linea);color:var(--piedra-osc);}
.estado.listo{background:var(--verde-cal);border-color:var(--verde-cal);color:var(--verde);}

/* ---------- experiencias ---------- */
.caso{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(30px,5vw,64px);align-items:center;
  background:var(--papel);border:1px solid var(--linea);border-radius:4px;padding:clamp(26px,4vw,48px);}
.caso h3{font-family:var(--serif);font-size:clamp(40px,4.6vw,58px);line-height:1;margin-top:10px;}
.caso-txt > p:not(.etiqueta):not(.nota){color:var(--piedra-osc);margin-top:16px;}
.caso-datos{display:grid;grid-template-columns:repeat(3,1fr);margin-top:26px;border-top:1px solid var(--linea);}
.caso-datos div{padding:14px 12px 0 0;}
.caso-datos dt{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--piedra);}
.caso-datos dd{font-size:15px;font-weight:600;margin-top:4px;}
.nota{font-size:12.5px;color:var(--piedra);margin-top:14px;}
/* el texto del caso en dos columnas, el escaparate a todo lo ancho debajo */
.caso-txt{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);column-gap:clamp(30px,5vw,64px);
  grid-template-areas:"eti datos" "tit datos" "desc acc" "desc nota";align-items:start;}
.caso-txt > .etiqueta{grid-area:eti;}
.caso-txt > h3{grid-area:tit;}
.caso-txt > p:not(.etiqueta):not(.nota){grid-area:desc;}
.caso-txt > .caso-datos{grid-area:datos;margin-top:0;align-self:end;}
.caso-txt > .acciones{grid-area:acc;margin-top:24px;}
.caso-txt > .nota{grid-area:nota;}
.ventana,.ventana:hover{text-decoration:none;}
@media (max-width:820px){
  .caso-txt{grid-template-columns:1fr;grid-template-areas:"eti" "tit" "desc" "datos" "acc" "nota";}
  .caso-txt > .caso-datos{margin-top:26px;}
}
/* escaparate: la página en su ventana y dos teléfonos al frente */
.escaparate{position:relative;padding:0 0 14% 0;margin-top:clamp(20px,3vw,36px);width:88%;}
.ventana{display:block;border-radius:10px;overflow:hidden;border:1px solid var(--linea);background:#fff;
  box-shadow:0 30px 60px -20px rgba(25,23,20,.28),0 2px 6px rgba(25,23,20,.06);transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s ease;}
.ventana:hover{transform:translateY(-4px);box-shadow:0 40px 70px -24px rgba(25,23,20,.34),0 2px 6px rgba(25,23,20,.06);}
.ventana-barra{display:flex;align-items:center;gap:6px;height:30px;padding:0 12px;background:var(--cal);border-bottom:1px solid var(--linea);}
.ventana-barra i{width:9px;height:9px;border-radius:50%;background:var(--linea);}
.ventana-barra .url{margin-left:14px;flex:1;max-width:260px;height:18px;border-radius:9px;background:var(--papel);
  font-size:10.5px;line-height:18px;padding:0 10px;color:var(--piedra);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ventana img{width:100%;height:auto;}
.tel{position:absolute;margin:0;width:23%;bottom:0;}
.tel img{width:100%;height:auto;border-radius:22px;border:5px solid #121110;background:#121110;
  box-shadow:0 26px 50px -14px rgba(25,23,20,.45);}
.tel figcaption{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--piedra);
  text-align:center;margin-top:10px;}
.tel-carta{right:12%;bottom:-3%;}
.tel-chat{right:-13%;bottom:3%;}
.tel{transition:transform .5s cubic-bezier(.2,.7,.2,1);}
.escaparate:hover .tel-carta{transform:translateY(-6px) rotate(-1.5deg);}
.escaparate:hover .tel-chat{transform:translateY(-10px) rotate(1.5deg);}
@media (max-width:980px){
  .escaparate{width:100%;padding-bottom:34%;}
  .tel{width:34%;}
  .tel-carta{right:37%;bottom:-2%;}
  .tel-chat{right:-1%;bottom:3%;}
}
.otros{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-top:26px;
  padding:24px 0 0;border-top:1px solid var(--linea);}
.otros p{max-width:64ch;color:var(--piedra-osc);}
.otros b{color:var(--tinta);}

/* ---------- resultado ---------- */
.resultados{list-style:none;padding:0;margin-top:30px;}
.resultados li{display:flex;gap:16px;padding:16px 0;border-bottom:1px solid var(--linea);font-size:17px;}
.resultados span{color:var(--verde);font-weight:700;}

/* ---------- inversión ---------- */
.tabla{width:100%;border-collapse:collapse;margin-top:28px;font-variant-numeric:tabular-nums;}
.tabla th,.tabla td{text-align:left;padding:14px 12px 14px 0;border-bottom:1px solid var(--linea);vertical-align:top;}
.tabla thead th{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--piedra);border-bottom-color:var(--tinta);}
.tabla tbody th{font-weight:600;}
.tabla small{display:block;font-weight:400;font-size:13px;color:var(--piedra);}
.tabla td{font-family:var(--serif);font-size:26px;line-height:1.1;white-space:nowrap;}
.letra{font-size:13.5px;color:var(--piedra);margin-top:16px;}

/* ---------- preguntas + contacto ---------- */
.faq-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(30px,5vw,64px);align-items:start;}
.faq{margin-top:36px;border-top:1px solid var(--tinta);}
.faq details{border-bottom:1px solid var(--linea);}
.faq summary{list-style:none;cursor:pointer;padding:18px 0;font-weight:600;font-size:16.5px;display:flex;justify-content:space-between;gap:16px;align-items:center;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+";font-family:var(--serif);font-size:26px;line-height:1;color:var(--verde);transition:transform .2s ease;}
.faq details[open] summary::after{transform:rotate(45deg);}
.faq details p{padding:0 0 20px;color:var(--piedra-osc);max-width:62ch;}
.contacto{position:sticky;top:96px;background:var(--noche);color:var(--papel);border-radius:4px;padding:clamp(28px,3vw,40px);}
.contacto h3{font-family:var(--serif);font-size:clamp(30px,3vw,40px);line-height:1.08;margin-top:14px;}
.contacto > p{color:var(--noche-apoyo);margin-top:14px;}
.contacto .btn{margin-top:24px;}
.firma-contacto{font-size:13px;margin-top:20px;}

/* ---------- pie ---------- */
.pie{background:var(--tinta);color:var(--papel);padding-block:64px 28px;}
.pie-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;align-items:start;}
.pie .logo{color:var(--papel);}
.pie .logo.grande span{font-size:40px;}
.pie .logo.grande .aguja{width:13px;height:32px;}
.pie-grid > div p:last-child{color:rgba(251,250,248,.62);margin-top:14px;max-width:38ch;font-size:14.5px;}
.pie nav{display:flex;flex-direction:column;gap:8px;}
.pie nav a{text-decoration:none;color:rgba(251,250,248,.75);font-size:14.5px;}
.pie nav a:hover{color:var(--papel);}
.firma{font-family:var(--serif);font-style:italic;font-size:30px;line-height:1.1;color:var(--salvia);}
.legal{font-size:12px;color:rgba(251,250,248,.45);margin-top:52px;padding-top:20px;border-top:1px solid rgba(251,250,248,.12);}

/* ---------- pantallas chicas ---------- */
@media (max-width:980px){
  .hero-in,.dos-col,.caso,.faq-grid{grid-template-columns:1fr;}
  .brujula-caja{max-width:220px;order:-1;justify-self:start;}
  .metodo{grid-template-columns:1fr 1fr;}
  .metodo li:nth-child(3){padding-left:0;border-left:0;}
  .metodo li:nth-child(n+3){border-top:1px solid var(--noche-linea);}
  .etapas{grid-template-columns:1fr;}
  .etapa:not(:last-child)::after{content:"↓";right:auto;left:30px;top:auto;bottom:-22px;}
  .contacto{position:static;}
  .pie-grid{grid-template-columns:1fr 1fr;}
  .pie-grid > div:first-child{grid-column:1 / -1;}
}
@media (max-width:700px){
  .nav nav{display:none;}
  .nav .btn{margin-left:auto;}
  .franja-datos{grid-template-columns:1fr;}
  .franja-datos > div + div{padding-left:0;border-left:0;border-top-color:var(--linea);}
  .franja-datos > div{padding:16px 0;}
  .metodo{grid-template-columns:1fr;}
  .metodo li,.metodo li + li{padding-left:0;border-left:0;}
  .metodo li + li{border-top:1px solid var(--noche-linea);}
  .areas li{grid-template-columns:1fr;gap:4px;}
  .caso-datos{grid-template-columns:1fr 1fr;}
  .tabla td{font-size:21px;}
  .brujula-caja{max-width:170px;}
}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} }

/* ============================================================================
   Movimiento. Todo el contenido se ve sin script; el script sólo agrega html.js
   y las clases que disparan cada efecto. Un efecto por intención, sin adornos sueltos.
   ========================================================================== */

/* barra de avance de lectura */
.progreso{position:fixed;top:0;left:0;right:0;height:2px;z-index:60;background:var(--verde);
  transform:scaleX(0);transform-origin:0 50%;}

/* portada: entra por líneas, en orden */
html.js .hero .eyebrow,html.js .hero-sub,html.js .hero .acciones{opacity:0;transform:translateY(14px);
  animation:subir .9s cubic-bezier(.2,.7,.2,1) forwards;}
html.js .hero .eyebrow{animation-delay:.1s;}
html.js .hero-sub{animation-delay:.95s;}
html.js .hero .acciones{animation-delay:1.1s;}
.hero h1 .ln{display:block;overflow:hidden;padding-bottom:.06em;}
.hero h1 .ln > span{display:inline-block;}
html.js .hero h1 .ln > span{transform:translateY(105%);animation:asomar 1s cubic-bezier(.2,.8,.2,1) forwards;}
html.js .hero h1 .ln:nth-child(1) > span{animation-delay:.25s;}
html.js .hero h1 .ln:nth-child(2) > span{animation-delay:.42s;}
html.js .hero h1 .ln:nth-child(3) > span{animation-delay:.59s;}
html.js .hero h1 .ln:nth-child(4) > span{animation-delay:.76s;}
@keyframes subir{to{opacity:1;transform:none;}}
@keyframes asomar{to{transform:none;}}

/* la franja de datos se traza de izquierda a derecha */
html.js .franja-datos > div{border-top-color:transparent;position:relative;}
html.js .franja-datos > div::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--tinta);
  transform:scaleX(0);transform-origin:0 50%;animation:trazo 1.1s cubic-bezier(.6,0,.2,1) forwards;}
html.js .franja-datos > div:nth-child(1)::before{animation-delay:1.3s;}
html.js .franja-datos > div:nth-child(2)::before{animation-delay:1.45s;}
html.js .franja-datos > div:nth-child(3)::before{animation-delay:1.6s;}
@keyframes trazo{to{transform:scaleX(1);}}

/* la brújula: después de la vuelta, la aguja queda viva, como una de verdad */
html.js .aguja-grande.viva{animation:mecer 5s ease-in-out infinite;}
@keyframes mecer{0%,100%{transform:rotate(0deg);}30%{transform:rotate(3deg);}65%{transform:rotate(-2deg);}}
.brujula-caja{cursor:pointer;}
.brujula .aro{transition:stroke .3s ease;}
.brujula-caja:hover .aro:not(.fino){stroke:var(--verde);}
html.js .brujula .marcas line{stroke-dasharray:14;stroke-dashoffset:14;animation:marca .6s ease forwards;}
html.js .brujula .marcas line:nth-child(odd){animation-delay:.3s;}
html.js .brujula .marcas line:nth-child(even){animation-delay:.45s;}
@keyframes marca{to{stroke-dashoffset:0;}}
html.js .brujula .aro:not(.fino){stroke-dasharray:600;stroke-dashoffset:600;animation:aro 1.6s cubic-bezier(.6,0,.2,1) .05s forwards;}
@keyframes aro{to{stroke-dashoffset:0;}}

/* aparecer al llegar, con escalón entre hermanos */
html.js .revela{opacity:0;transform:translateY(22px);
  transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1);
  transition-delay:calc(var(--i,0) * 90ms);}
html.js .revela.visto{opacity:1;transform:none;}

/* el trazo verde bajo la frase en cursiva de cada título */
h2 em{background-image:linear-gradient(currentColor,currentColor);background-repeat:no-repeat;
  background-position:0 92%;background-size:0 1px;transition:background-size 1.1s cubic-bezier(.6,0,.2,1) .35s;}
html:not(.js) h2 em,.visto h2 em,h2.visto em{background-size:100% 1px;}

/* método: la línea superior se dibuja y cada número sube */
html.js .metodo{border-top-color:transparent;position:relative;}
html.js .metodo::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--salvia);
  transform:scaleX(0);transform-origin:0 50%;transition:transform 1.4s cubic-bezier(.6,0,.2,1);}
html.js .metodo.visto::before{transform:scaleX(1);}
.metodo li{transition:background .3s ease;}
.metodo li:hover{background:rgba(233,239,235,.04);}
.metodo li:hover .n{color:var(--papel);}
.metodo .n{transition:color .3s ease;}

/* áreas: al pasar el cursor, la fila se recorre y aparece la marca verde */
.areas li{position:relative;transition:padding-left .3s ease;}
.areas li::before{content:"";position:absolute;left:0;top:18px;bottom:18px;width:2px;background:var(--verde);
  transform:scaleY(0);transition:transform .3s ease;}
.areas li:hover{padding-left:16px;}
.areas li:hover::before{transform:scaleY(1);}

/* etapas: se levantan al pasar, y la flecha empuja hacia la siguiente */
.etapa{transition:transform .35s cubic-bezier(.2,.7,.2,1),border-color .3s ease,box-shadow .35s ease;}
.etapa:hover{transform:translateY(-6px);border-color:var(--verde);box-shadow:0 18px 40px rgba(25,23,20,.08);}
.etapa:not(:last-child)::after{animation:empuje 2.4s ease-in-out infinite;}
@keyframes empuje{0%,100%{transform:translateX(0);}50%{transform:translateX(4px);}}
@media (max-width:980px){ @keyframes empuje{0%,100%{transform:translateY(0);}50%{transform:translateY(4px);}} }
.estado:not(.listo){position:relative;padding-left:24px;}
.estado:not(.listo)::before{content:"";position:absolute;left:10px;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;
  background:var(--piedra);animation:latido 1.8s ease-in-out infinite;}
@keyframes latido{50%{opacity:.25;}}



/* resultados e inversión */
.resultados li{transition:color .3s ease;}
.resultados li:hover{color:var(--verde);}
.tabla tbody tr{transition:background .25s ease;}
.tabla tbody tr:hover{background:rgba(47,93,78,.05);}

/* preguntas: la respuesta se despliega suave */
.faq details[open] p{animation:abrir .45s ease;}
@keyframes abrir{from{opacity:0;transform:translateY(-6px);}}
.faq summary{transition:color .2s ease,padding-left .25s ease;}
.faq summary:hover{color:var(--verde);padding-left:6px;}

/* botones: un brillo que cruza al pasar el cursor */
.btn{position:relative;overflow:hidden;}
.btn::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;
  background:rgba(255,255,255,.16);transform:skewX(-18deg);transition:left .6s ease;}
.btn:hover::after{left:130%;}
.btn:active{transform:translateY(1px);}

/* contacto: el recuadro respira muy despacio para llamar la vista */
.contacto{transition:transform .4s ease,box-shadow .4s ease;}
.contacto:hover{transform:translateY(-4px);box-shadow:0 24px 50px rgba(34,70,58,.25);}
.firma-contacto a{color:var(--papel);text-decoration:none;font-weight:700;letter-spacing:.02em;}