/* ===========================================================================
   home.css — lenguaje visual de la portada (rediseño "Landing Neto v2")
   Solo lo cargan index.html y en/index.html.

   Por que una hoja aparte y no tocar styles.css: styles.css es el build de
   Tailwind + los ajustes de TODO el sitio. La portada necesita un tratamiento
   propio (bloques oscuros, tarjetas con elevacion, hero con glow) que no debe
   filtrarse a las 90 paginas restantes.

   Todo va prefijado --nh-/.nh- para no chocar con --neto-* (styles.css) ni
   --nshell-* (site-shell.css).
   =========================================================================== */

:root{
  --nh-ink:#0B100E;
  --nh-accent:#18C37E;
  --nh-accent-deep:#0B7A4E;
  --nh-muted:#49544E;
  --nh-faint:#7A847E;
  --nh-dark:#070D0A;
  --nh-dark-card:#121614;
  --nh-line:rgba(11,16,14,0.06);
  --nh-line-strong:rgba(11,16,14,0.1);
}

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

/* ------------------------------------------------------------- antetitulos
   El "— PATRIMONIO NETO" con guion verde es la firma visual de la referencia.
   Las secciones ya traian el antetitulo en verde; solo se le añade el guion. */
main > section p.uppercase.tracking-wider:first-child,
main > section .text-center > p.uppercase.tracking-wider:first-child{
  display:inline-flex;
  align-items:center;
  gap:12px;
  letter-spacing:.16em !important;
  font-weight:800 !important;
}
main > section p.uppercase.tracking-wider:first-child::before{
  content:"";
  width:26px;
  height:2px;
  border-radius:2px;
  background:var(--nh-accent);
  flex:none;
}
/* En las secciones centradas el guion descuadra el centro optico */
main > section .text-center p.uppercase.tracking-wider::before{
  display:none;
}

/* ------------------------------------------------------------------- hero */
.nh-badge{
  display:inline-flex;
  align-items:center;
  gap:9px;
  background:#fff;
  border:1px solid var(--nh-line-strong);
  border-radius:999px;
  padding:5px 15px 5px 6px;
  width:fit-content;
  box-shadow:0 4px 14px rgba(11,16,14,.05);
}
.nh-badge b{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:24px;
  height:24px;
  border-radius:999px;
  background:rgba(24,195,126,.14);
  color:var(--nh-accent-deep);
  font-size:11px;
  font-weight:800;
  flex:none;
}
.nh-badge span{
  font-size:12.5px;
  font-weight:600;
  color:var(--nh-muted);
}

/* Chips de confianza: la referencia los pone en pastilla, no en lista suelta */
.nh-pills{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:26px;
}
.nh-pills li{
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-size:13px;
  font-weight:600;
  color:var(--nh-muted);
  background:rgba(255,255,255,.7);
  border:1px solid var(--nh-line);
  border-radius:999px;
  padding:7px 13px;
}
.nh-pills svg{ color:var(--nh-accent); }

/* Glow verde detras de la ilustracion + tarjetas flotantes */
.nh-hero-media{
  position:relative;
  width:100%;
  display:flex;
  justify-content:center;
}
@media (min-width:1024px){
  .nh-hero-media{ justify-content:flex-end; }
}
.nh-glow{
  position:absolute;
  top:8%;
  left:50%;
  width:min(74%,430px);
  aspect-ratio:1;
  transform:translateX(-50%);
  border-radius:999px;
  background:radial-gradient(circle,rgba(24,195,126,.28),rgba(24,195,126,0) 68%);
  filter:blur(6px);
  pointer-events:none;
  z-index:0;
}
.nh-hero-media picture,
.nh-hero-media img{ position:relative; z-index:1; }

.nh-float{
  position:absolute;
  z-index:2;
  background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  border:1px solid var(--nh-line);
  border-radius:18px;
  padding:13px 17px;
  box-shadow:0 16px 36px rgba(11,16,14,.12);
  animation:nhFloat 6.5s cubic-bezier(.4,0,.6,1) infinite;
}
.nh-float--top{ top:3%; left:0; }
.nh-float--bottom{ bottom:9%; right:0; animation-delay:1.8s; }
.nh-float dt{
  font-size:10px;
  font-weight:700;
  letter-spacing:.14em;
  /* la referencia usa #8A948E: a 10px se queda en 3,1:1 y no pasa AA */
  color:#5B6560;
}
.nh-float dd{
  margin:4px 0 0;
  font-size:23px;
  font-weight:800;
  letter-spacing:-.035em;
  white-space:nowrap;
  color:var(--nh-ink);
}
.nh-float dd small{
  font-size:12px;
  font-weight:700;
  /* el verde claro sobre blanco se queda en 2,3:1 */
  color:var(--nh-accent-deep);
  margin-left:6px;
}
.nh-float--bottom dd{ color:var(--nh-accent-deep); }

/* Por debajo de lg la imagen se estrecha y las tarjetas taparian las mascotas */
@media (max-width:1023px){
  .nh-float{ display:none; }
}

/* Barra de cifras bajo el hero */
.nh-stats{
  border-top:1px solid var(--nh-line-strong);
  border-bottom:1px solid var(--nh-line-strong);
  background:#FAFBF7;
  margin-top:clamp(32px,5vw,56px);
}
.nh-stats ul{
  max-width:1180px;
  margin:0 auto;
  padding:24px 28px;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));
  gap:18px 32px;
  list-style:none;
}
.nh-stats li{
  display:flex;
  align-items:baseline;
  gap:9px;
}
.nh-stats b{
  font-size:28px;
  font-weight:800;
  letter-spacing:-.04em;
  color:var(--nh-ink);
}
.nh-stats span{
  font-size:13.5px;
  font-weight:600;
  /* --nh-faint (#7A847E) se queda en 3,7:1 a este tamaño */
  color:#5B6560;
}
.nh-stats a{
  color:var(--nh-accent-deep);
  border-bottom:1px solid rgba(11,122,78,.35);
}

/* --------------------------------------------------------- tarjetas claras
   Borde fino visible + elevacion al pasar por encima. */
#features .grid > div,
#how-it-works .grid > div,
#trust .grid > div,
#benefits .grid > div{
  border:1px solid var(--nh-line) !important;
  border-radius:22px !important;
  transition:transform 200ms cubic-bezier(.2,.8,.2,1),box-shadow 200ms,border-color 200ms;
}
@media (hover:hover){
  #features .grid > div:hover,
  #how-it-works .grid > div:hover,
  #trust .grid > div:hover,
  #benefits .grid > div:hover{
    transform:translateY(-3px);
    box-shadow:0 20px 44px rgba(11,16,14,.09);
    border-color:rgba(24,195,126,.4) !important;
  }
}

/* ------------------------------------------------- patrimonio neto: oscuro
   El bloque oscuro con trama es lo que mas cambia la percepcion de la pagina.
   Se sobreescribe por elemento dentro de #net-worth para no depender de las
   clases arbitrarias de Tailwind (text-[#1a1a1a] y compañia). */
/* styles.css pinta el fondo de #features/#net-worth/#trust/#faq con
   !important, asi que aqui hace falta el mismo peso para ganarle. */
#net-worth.nh-dark{
  background-color:var(--nh-dark) !important;
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px) !important;
  background-size:72px 72px !important;
  color:#fff;
}
/* Se invierten las utilidades de color UNA a UNA en vez de con reglas amplias
   tipo `.font-bold{color:#fff}`: esa barria tambien las pastillas de fondo
   claro y dejaba texto blanco sobre verde claro (el badge "+12,4 %"). */
#net-worth.nh-dark h2,
#net-worth.nh-dark .text-\[\#1a1a1a\]{ color:#fff !important; }
#net-worth.nh-dark .text-\[\#555\]{ color:#9AA4A0 !important; }
#net-worth.nh-dark .text-\[\#999\]{ color:#7F8A85 !important; }
#net-worth.nh-dark p.uppercase{ color:var(--nh-accent) !important; }

/* La tarjeta blanca del grafico pasa a tarjeta oscura */
#net-worth.nh-dark .bg-white{
  background:var(--nh-dark-card) !important;
  border-color:rgba(255,255,255,.08) !important;
  box-shadow:0 30px 70px rgba(0,0,0,.5) !important;
}
/* Pastillas y chips que venian en verde/crema claro */
#net-worth.nh-dark .bg-\[\#E6FFF5\]{
  background:rgba(24,195,126,.14) !important;
  border-color:rgba(24,195,126,.28) !important;
}
#net-worth.nh-dark .text-\[\#00a860\]{ color:var(--nh-accent) !important; }
#net-worth.nh-dark .bg-\[\#F7F4EE\]{
  background:#1B201D !important;
  color:#7F8A85 !important;
}
/* El chip activo del grafico venia con texto blanco sobre verde claro (2:1).
   Ya que se rehace la tarjeta, se deja legible. */
#net-worth.nh-dark .bg-\[\#00d27a\]{ color:#04241A !important; }

/* ------------------------------------------------------------ precios: PRO
   La tarjeta PRO en oscuro es lo que la separa de la gratuita de un vistazo. */
.nh-pro-dark{
  background:var(--nh-dark) !important;
  background-image:radial-gradient(620px 300px at 108% -10%,rgba(24,195,126,.22),rgba(24,195,126,0) 68%) !important;
  border-color:rgba(24,195,126,.28) !important;
  box-shadow:0 26px 60px rgba(7,13,10,.3) !important;
  color:#fff;
}
.nh-pro-dark h3,
.nh-pro-dark .font-bold{ color:#fff !important; }
.nh-pro-dark p{ color:#7F8A85 !important; }
.nh-pro-dark li{ color:#CFD6D2 !important; }
.nh-pro-dark li div:first-child{
  background:rgba(24,195,126,.16) !important;
}
/* OJO: el CTA de PRO NO se toca. Es un boton verde con texto blanco que ya
   contrasta; forzarlo a fondo blanco dejaba texto blanco sobre blanco. */

/* ------------------------------------------------------------ FAQ acordeon */
#faq details{
  border-radius:20px !important;
  padding:0 !important;
  overflow:hidden;
  transition:border-color 180ms;
}
#faq details summary{
  padding:21px 24px;
  align-items:center !important;
}
#faq details summary > span:first-child{
  font-size:16.5px !important;
  letter-spacing:-.015em;
  font-weight:700 !important;
}
#faq details summary > span:last-child{
  flex:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  border-radius:999px;
  background:rgba(24,195,126,.12);
  color:var(--nh-accent-deep);
  font-size:17px;
  line-height:1;
}
#faq details > p{
  padding:0 24px 24px;
  margin-top:0 !important;
  font-size:15.5px !important;
  line-height:1.65 !important;
}
#faq details[open]{
  border-color:rgba(24,195,126,.38) !important;
}

/* --------------------------------------------------------------- reduccion
   Respeta a quien pide menos movimiento. */
@media (prefers-reduced-motion:reduce){
  .nh-float{ animation:none; }
  #features .grid > div,
  #how-it-works .grid > div,
  #trust .grid > div,
  #benefits .grid > div{ transition:none; }
}

/* ===========================================================================
   Secciones al lenguaje de la referencia v2
   Se hace por CSS sobre el marcado que ya existe: las secciones y el copy
   cargan el SEO de la portada, asi que se cambia la piel, no la estructura.
   =========================================================================== */

/* -------------------------------------------------- QUE PUEDES HACER (#features)
   La referencia no pinta el borde en verde: lo deja neutro y es el icono el
   que aporta color, uno distinto por tarjeta. */
#features .grid > div{
  border-color:var(--nh-line) !important;
}
#features .grid > div > div:first-child{
  border-radius:13px !important;
  width:44px !important;
  height:44px !important;
}
#features .grid > div:nth-child(6n+1) > div:first-child{
  background:rgba(24,195,126,.12) !important;
  box-shadow:inset 0 0 0 1px rgba(24,195,126,.2);
}
#features .grid > div:nth-child(6n+2) > div:first-child{
  background:rgba(107,143,255,.13) !important;
  box-shadow:inset 0 0 0 1px rgba(107,143,255,.22);
}
#features .grid > div:nth-child(6n+2) svg{ color:#4A6FE0 !important; }
#features .grid > div:nth-child(6n+3) > div:first-child{
  background:rgba(232,92,176,.13) !important;
  box-shadow:inset 0 0 0 1px rgba(232,92,176,.22);
}
#features .grid > div:nth-child(6n+3) svg{ color:#C74A96 !important; }
#features .grid > div:nth-child(6n+4) > div:first-child{
  background:rgba(255,138,74,.13) !important;
  box-shadow:inset 0 0 0 1px rgba(255,138,74,.22);
}
#features .grid > div:nth-child(6n+4) svg{ color:#E0722E !important; }
#features .grid > div:nth-child(6n+5) > div:first-child{
  background:rgba(24,195,126,.12) !important;
  box-shadow:inset 0 0 0 1px rgba(24,195,126,.2);
}
#features .grid > div:nth-child(6n) > div:first-child{
  background:rgba(122,132,126,.14) !important;
  box-shadow:inset 0 0 0 1px rgba(122,132,126,.2);
}
#features .grid > div:nth-child(6n) svg{ color:#5B6560 !important; }

/* --------------------------------------------------- COMO FUNCIONA (#how-it-works)
   La referencia numera con un cuadrado oscuro arriba a la izquierda y un
   numeral gigante de fondo. El numeral sale de un contador CSS, asi no hay
   que tocar el HTML ni mantener los numeros a mano. */
#how-it-works .grid{ counter-reset:nh-paso; }
#how-it-works .grid > div:not([class*="absolute"]){
  counter-increment:nh-paso;
  overflow:hidden;
  border-color:var(--nh-line) !important;
}
#how-it-works .grid > div:not([class*="absolute"])::before{
  content:counter(nh-paso);
  position:absolute;
  top:2px;
  right:20px;
  font-size:62px;
  font-weight:800;
  letter-spacing:-.05em;
  line-height:1;
  color:rgba(11,16,14,.05);
  pointer-events:none;
}
/* La chapa flotaba centrada sobre el borde; aqui va dentro, arriba a la izq.
   Se acota con .rounded-2xl: si no, la regla pillaba tambien las flechas
   conectoras entre pasos y las convertia en cuadrados negros sueltos. */
#how-it-works .grid > div > div.absolute.rounded-2xl{
  position:absolute !important;
  top:26px !important;
  left:26px !important;
  transform:none !important;
  width:34px !important;
  height:34px !important;
  border-radius:11px !important;
  background:var(--nh-ink) !important;
  border:0 !important;
  box-shadow:none !important;
}
#how-it-works .grid > div > div.absolute.rounded-2xl span{ font-size:13.5px !important; }
/* La linea y las flechas que unian los pasos sobran con la numeracion nueva */
#how-it-works .grid > div[class*="h-0.5"]{ display:none; }
#how-it-works .grid > div > div.absolute:not(.rounded-2xl){ display:none !important; }

/* ------------------------------------------------------- PRIVACIDAD (#trust) */
#trust .grid > div{ border-color:var(--nh-line) !important; }

/* ------------------------------------------------ INVERSIONES (#investments)
   En la referencia la tarjeta de portfolio es el contrapunto oscuro de la
   seccion. Aqui venia en blanco con solo la cabecera oscura. */
#investments .bg-white.rounded-3xl{
  background:var(--nh-dark) !important;
  border-color:rgba(255,255,255,.08) !important;
  box-shadow:0 26px 60px rgba(7,13,10,.35) !important;
}
#investments .bg-white.rounded-3xl .bg-gradient-to-r{
  background:transparent !important;
}
#investments .bg-white.rounded-3xl [class*="border-b"]{
  border-color:rgba(255,255,255,.07) !important;
}
#investments .bg-white.rounded-3xl .text-\[\#1a1a1a\]{ color:#fff !important; }
#investments .bg-white.rounded-3xl .text-\[\#666\],
#investments .bg-white.rounded-3xl .text-\[\#999\],
#investments .bg-white.rounded-3xl .text-\[\#555\]{ color:#9AA4A0 !important; }
#investments .bg-white.rounded-3xl .bg-\[\#F7F4EE\],
#investments .bg-white.rounded-3xl .bg-\[\#FAFAF8\]{ background:#121614 !important; }
/* El hueco central del donut era blanco: sobre negro se veia como un agujero */
#investments .bg-white.rounded-3xl svg circle[fill="white"]{ fill:#070D0A; }

/* Distintivo de puesto en la App Store, debajo del <h1>.
   Antes iba encima del titular con el numero dentro de un circulo verde; el
   trofeo dice lo mismo sin competir con el "33" del propio texto, y abajo
   tiene sitio para respirar. Lo escribe scripts/ranking.py. */
.nh-badge--trofeo {
  margin: 2px 0 22px;
  padding: 5px 15px 5px 7px;
}

.nh-badge--trofeo b {
  background: rgba(24, 195, 126, .13);
  color: var(--nh-accent-deep);
}

/* El SVG hereda el color de la <b>; centrado optico, que el pie del trofeo
   pesa mas que la copa. */
.nh-badge--trofeo b svg { transform: translateY(.5px); }

@media (min-width: 768px) {
  .nh-badge--trofeo { margin-bottom: 26px; }
}