/* ============================================================
   TIPOGRAFÍA DE LA MARCA — un solo sitio para cambiarla.
   Hoy: Poppins (licencia abierta SIL OFL 1.1, gratuita también para uso comercial).
   Para pasar a otra (por ejemplo Mont), sustituye los archivos .woff2 y las rutas de abajo:
   todas las páginas usan la familia «FC Marca», así que no hay que tocar nada más.
   ============================================================ */
@font-face{font-family:'FC Marca';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fuentes/poppins-400.woff2') format('woff2');}
@font-face{font-family:'FC Marca';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fuentes/poppins-500.woff2') format('woff2');}
@font-face{font-family:'FC Marca';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fuentes/poppins-600.woff2') format('woff2');}
@font-face{font-family:'FC Marca';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fuentes/poppins-700.woff2') format('woff2');}
@font-face{font-family:'FC Marca';font-style:normal;font-weight:800;font-display:swap;src:url('/assets/fuentes/poppins-800.woff2') format('woff2');}
@font-face{font-family:'FC Marca';font-style:normal;font-weight:900;font-display:swap;src:url('/assets/fuentes/poppins-900.woff2') format('woff2');}
@font-face{font-family:'FC Marca';font-style:italic;font-weight:300;font-display:swap;src:url('/assets/fuentes/poppins-300-italic.woff2') format('woff2');}
/* Medidas exactas de cada letra: sin esto, algunos navegadores redondean el ancho de la «t» de Poppins y aparecen huecos («complet o») */
html{ text-rendering:geometricPrecision; }

/* Letra de reserva con las medidas de Poppins: mientras llega Poppins, el texto se pinta con Arial (o Roboto)
   ajustada al mismo tamaño, para que la página no «salte» al cambiar de letra. Medido con textos de la web. */
@font-face{font-family:'FC Marca Reserva';font-weight:100 600;src:local('Arial'),local('ArialMT'),local('Helvetica'),local('Liberation Sans'),local('Roboto');size-adjust:111.7%;ascent-override:94%;descent-override:31.3%;line-gap-override:9%;}
@font-face{font-family:'FC Marca Reserva';font-weight:700 900;src:local('Arial Bold'),local('Arial-BoldMT'),local('Helvetica Bold'),local('Liberation Sans Bold'),local('Roboto Bold');size-adjust:107%;ascent-override:98.1%;descent-override:32.7%;line-gap-override:9.3%;}

/* ============================================================
   FINAN COACH — hoja de estilo común (brandbook de Bruno v2.0, octubre 2026)
   Verde #07E77C y su escala · neutros 60 % · amarillo y rosa solo como acento (≤10 %).
   Titulares en Black, en minúsculas normales, con punto final y la última línea en verde.
   Sobre claro, el verde de texto es #019C53 (solo titulares grandes); en texto pequeño, #01733D.
   Tipografía: Poppins, familia «FC Marca» (definida en /assets/fuente.css?v=202610301456).
   ============================================================ */
:root{
  --verde:#07E77C; --verde-2:#08C468; --verde-3:#019C53; --verde-4:#01733D; --verde-5:#034A27;
  --amarillo:#F4BD0F; --rosa:#FF1273;
  --negro:#0A0A0A; --grafito:#3A3A3A; --gris:#666665; --gris-claro:#EDEDED; --linea:#E3E3E2; --blanco:#FFFFFF;
  --fuente:'FC Marca','FC Marca Reserva', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --verde-texto:var(--verde-3);   /* verde de titular sobre claro */
  --verde-txt-peq:var(--verde-4); /* verde de texto pequeño sobre claro (contraste AA) */
  --ancho:1160px;
}
*,*::before,*::after{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{ font-family:var(--fuente); color:var(--negro); background:var(--blanco); line-height:1.6; font-size:16px; -webkit-font-smoothing:antialiased; }
a{ color:inherit; text-decoration:none; }
img,svg{ display:block; }
.contenedor{ max-width:var(--ancho); margin:0 auto; padding:0 24px; }

/* Logo: lv = verde, lt = tinta (blanca sobre fondo oscuro) */
.logo-svg .lv, .icono-svg .lv{ fill:var(--verde); }
.logo-svg .lt, .icono-svg .lt{ fill:var(--negro); }
.oscuro .logo-svg .lt, .oscuro .icono-svg .lt{ fill:var(--blanco); }

/* Titulares (brandbook p. 17): Black, minúsculas normales, punto final.
   <b> = el titular · <span> = la última línea, la promesa, en verde (solo una línea verde). */
.titular{ font-weight:900; line-height:1.04; letter-spacing:-.022em; }
.titular b{ font-weight:900; display:block; color:inherit; }
.titular span{ font-weight:900; display:block; color:var(--verde-texto); }
.oscuro .titular span{ color:var(--verde); }

/* Eyebrow de sección (FC_Eyebrow): «01 — CÓMO FUNCIONA», Black, mayúsculas, muy espaciado */
.sec-etiqueta{ display:flex; align-items:center; gap:10px; margin-bottom:22px; font-size:.74rem; font-weight:900; text-transform:uppercase; letter-spacing:.2em; line-height:1.2; color:var(--negro); word-spacing:.08em; }
.sec-etiqueta .num{ color:inherit; font-weight:900; }
.sec-etiqueta .num::after{ content:'—'; margin-left:10px; letter-spacing:0; }
.sec-etiqueta .txt{ color:inherit; font-weight:900; }
.oscuro .sec-etiqueta{ color:var(--blanco); }

/* Botones de esquinas rectas */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; font-weight:800; font-size:.88rem; text-transform:uppercase; letter-spacing:.03em; word-spacing:.1em; padding:14px 22px; border:2px solid transparent; cursor:pointer; font-family:inherit; transition:transform .15s, background .15s; }
.btn:hover{ transform:translateY(-1px); }
.btn svg{ width:14px; height:14px; }
.btn-verde{ background:var(--verde); color:var(--negro); }
.btn-verde:hover{ background:#2BF28E; }
.btn-linea{ border-color:currentColor; background:transparent; }
.btn-negro{ background:var(--negro); color:var(--blanco); }

/* Nota autoadhesiva (FC_Etiqueta): Heavy, mayúsculas, esquina superior derecha cortada */
.detalle{ display:inline-block; font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; word-spacing:.1em; padding:6px 20px 6px 12px; background:var(--verde); color:var(--negro); clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,0 100%); }
.detalle.gris{ background:var(--gris-claro); color:var(--grafito); }
.detalle.negro{ background:var(--negro); color:var(--verde); }

/* Tramas */
/* Patrón de isotipos neutros (brandbook p. 19): textura de fondo oscuro para logo y titulares */
.trama-flechas{ background-image:url("/assets/marca/flechas-gris.svg?v=202610301456"); background-size:40px 40px; }
.trama-triangulos{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36'%3E%3Cpath d='M8 8 H26 V26 Z' fill='%2307E77C'/%3E%3C/svg%3E"); }
.trama-cuadros{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Crect x='8' y='8' width='12' height='12' fill='%23000' fill-opacity='.08'/%3E%3C/svg%3E"); }

/* ============================================================ AVISO + NAV */
.aviso{ background:var(--negro); color:#DADADA; font-size:.8rem; }
.aviso .contenedor{ display:flex; align-items:center; justify-content:center; gap:10px; padding-top:9px; padding-bottom:9px; text-align:center; flex-wrap:wrap; }
.aviso b{ color:var(--verde); font-weight:900; text-transform:uppercase; letter-spacing:.16em; font-size:.72rem; word-spacing:.08em; }
.aviso a{ color:var(--blanco); font-weight:700; border-bottom:1px solid var(--verde); }
header.nav{ position:sticky; top:0; z-index:50; background:rgba(255,255,255,.96); backdrop-filter:blur(8px); border-bottom:1px solid var(--linea); }
.nav-inner{ display:flex; align-items:center; justify-content:space-between; height:74px; }
.nav .logo-svg{ height:40px; width:auto; }
.nav-links{ display:flex; align-items:center; gap:30px; }
.nav-links a{ font-weight:600; font-size:.88rem; }
.nav-links a:not(.btn):hover{ color:var(--verde-3); }
.nav-links .btn{ padding:11px 16px; font-size:.78rem; }
.nav-toggle{ display:none; background:none; border:0; cursor:pointer; padding:6px; }
.nav-toggle span{ display:block; width:24px; height:3px; background:var(--negro); margin:5px 0; }

/* ============================================================ PIE */
footer{ background:var(--negro); color:#A5A5A5; padding:48px 0 40px; font-size:.82rem; }
.pie-fila{ display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap; }
footer .logo-svg{ height:34px; width:auto; }
.pie-links{ display:flex; gap:18px; flex-wrap:wrap; }
.pie-links a:hover{ color:var(--verde); }
.disclaimer{ margin-top:28px; padding-top:22px; border-top:1px solid #222; font-size:.74rem; line-height:1.7; color:#7C7C7C; max-width:900px; }

/* ============================================================ PÁGINAS DE CONTENIDO (blog y legales) */
.pagina{ max-width:1060px; margin:0 auto; padding:64px 24px 96px; }
.cabecera, .cabecera-doc{ margin-bottom:44px; padding-bottom:30px; border-bottom:2px solid var(--negro); }
.cabecera .eyebrow, .cabecera-doc .eyebrow, .art-eyebrow{ display:block; font-size:.74rem; font-weight:900; text-transform:uppercase; letter-spacing:.2em; color:var(--negro); margin-bottom:16px; word-spacing:.08em; }
.cabecera .eyebrow::before, .cabecera-doc .eyebrow::before, .art-eyebrow::before{ content:''; display:block; width:44px; height:5px; background:var(--verde); margin-bottom:14px; }
.cabecera h1, .cabecera-doc h1{ font-size:clamp(2.1rem,4.6vw,3.3rem); font-weight:900; line-height:1.04; letter-spacing:-.022em; margin-bottom:14px; }
.cabecera p{ font-size:1.05rem; color:var(--gris); max-width:680px; }
.cabecera-doc .meta{ font-size:.86rem; color:var(--gris); }

.doc-seccion{ margin-bottom:38px; max-width:820px; }
.doc-seccion h2{ font-size:1.25rem; font-weight:900; letter-spacing:-.01em; line-height:1.2; margin-bottom:12px; }
.doc-seccion h3{ font-size:1rem; font-weight:700; margin:18px 0 8px; }
.doc-seccion p{ margin-bottom:12px; font-size:.97rem; color:#3A3A3A; }
.doc-seccion ul{ list-style:none; margin:0 0 12px; }
.doc-seccion li{ font-size:.97rem; color:#3A3A3A; margin-bottom:8px; padding-left:20px; position:relative; }
.doc-seccion li::before{ content:''; position:absolute; left:0; top:.6em; width:8px; height:8px; background:var(--verde-3); }
.doc-seccion a{ color:var(--verde-4); text-decoration:underline; }
.doc-modelo{ background:var(--gris-claro); border-left:4px solid var(--verde-3); padding:16px 18px; margin:6px 0 14px; }
.doc-modelo p{ margin-bottom:8px; }
.doc-seccion table{ width:100%; border-collapse:collapse; font-size:.9rem; margin:10px 0 16px; }
.doc-seccion th, .doc-seccion td{ border:1px solid var(--linea); padding:8px 10px; text-align:left; vertical-align:top; overflow-wrap:anywhere; }
.doc-seccion th{ background:var(--gris-claro); font-weight:700; }
.pendiente{ background:var(--amarillo); color:var(--negro); padding:1px 7px; font-size:.82rem; font-weight:700; }

/* Blog: listado */
.blog-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:0; border-top:2px solid var(--negro); border-left:2px solid var(--negro); }
.blog-card{ display:flex; flex-direction:column; gap:12px; padding:30px; border-right:2px solid var(--negro); border-bottom:2px solid var(--negro); background:var(--blanco); transition:background .15s; }
.blog-card:hover{ background:var(--gris-claro); }
.blog-card .cat{ align-self:flex-start; font-size:.7rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; padding:5px 10px; border:1.5px solid var(--verde-3); color:var(--negro); word-spacing:.08em; }
.blog-card:hover .cat{ background:var(--verde); border-color:var(--verde); }
.blog-card h2{ font-size:1.22rem; font-weight:800; line-height:1.22; letter-spacing:-.01em; }
.blog-card p{ font-size:.92rem; color:var(--gris); flex:1; }
.blog-card .meta{ font-size:.78rem; color:var(--gris); padding-top:10px; border-top:1px solid var(--linea); }
.blog-card .leer{ font-size:.8rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--verde-4); display:inline-flex; align-items:center; gap:6px; word-spacing:.08em; }
.blog-card .leer svg{ width:14px; height:14px; }

/* Blog: artículo */
.articulo{ max-width:760px; margin:0 auto; padding:64px 24px 96px; }
.art-titulo{ font-size:clamp(2rem,4.6vw,3rem); font-weight:900; line-height:1.06; letter-spacing:-.022em; margin-bottom:22px; }
.art-meta{ display:flex; align-items:center; gap:14px; font-size:.84rem; color:var(--gris); margin-bottom:40px; padding-bottom:26px; border-bottom:2px solid var(--negro); flex-wrap:wrap; }
.art-meta .autor{ font-weight:700; color:var(--negro); }
.art-meta .tiempo{ display:flex; align-items:center; gap:5px; }
.art-meta .tiempo svg{ width:14px; height:14px; }
.art-cuerpo{ font-size:1.04rem; color:#2E2E2E; }
.art-cuerpo p{ margin-bottom:22px; }
.art-cuerpo h2{ font-size:1.55rem; font-weight:900; line-height:1.18; letter-spacing:-.015em; margin:48px 0 16px; padding-top:18px; border-top:5px solid var(--verde); display:inline-block; }
.art-cuerpo h3{ font-size:1.08rem; font-weight:800; margin:30px 0 10px; }
.art-cuerpo strong{ font-weight:700; color:var(--negro); }
.art-cuerpo ul, .art-cuerpo ol{ margin:0 0 22px; padding-left:0; list-style:none; }
.art-cuerpo li{ margin-bottom:10px; padding-left:22px; position:relative; }
.art-cuerpo li::before{ content:''; position:absolute; left:0; top:.62em; width:9px; height:9px; background:var(--verde-3); }
.art-cuerpo a{ color:var(--verde-4); text-decoration:underline; }
.art-cuerpo table{ width:100%; border-collapse:collapse; font-size:.92rem; margin:10px 0 24px; }
.art-cuerpo th, .art-cuerpo td{ border:1px solid var(--linea); padding:9px 11px; text-align:left; }
.art-cuerpo th{ background:var(--gris-claro); font-weight:700; }
/* Callout oscuro (brandbook p. 18): barra grafito, isotipo de color y una idea en negrita */
blockquote{ margin:34px 0; padding:22px 26px; background:var(--grafito); color:var(--blanco); font-size:1.12rem; font-weight:700; line-height:1.45; position:relative; }
.art-cuerpo blockquote{ margin:34px 0; padding:22px 26px 22px 76px; background:var(--grafito); color:var(--blanco); font-size:1.12rem; font-weight:700; line-height:1.45; position:relative; }
.art-cuerpo blockquote::before{ content:''; position:absolute; left:24px; top:24px; width:32px; height:32px; background:url("/assets/marca/isotipo-verde.svg") no-repeat center/contain; }
.art-cta{ margin-top:48px; padding:34px; background:var(--negro); color:var(--blanco); clip-path:polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 0 100%); }
.art-cta h3{ font-size:1.5rem; font-weight:900; line-height:1.1; letter-spacing:-.015em; margin-bottom:10px; color:var(--verde); }
.art-cta p{ color:#C9C9C9; margin-bottom:22px; }
.art-cta .btn{ background:var(--verde); color:var(--negro); }
.art-nav{ border-top:1px solid var(--linea); margin-top:52px; padding-top:28px; display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.art-nav a{ font-size:.86rem; font-weight:700; color:var(--gris); display:inline-flex; align-items:center; gap:6px; }
.art-nav a svg{ width:16px; height:16px; }
.art-nav a:hover{ color:var(--verde-4); }

/* ============================================================ RESPONSIVE */
@media (max-width: 960px){
  .nav-links{ display:none; position:absolute; top:74px; left:0; right:0; background:var(--blanco); flex-direction:column; align-items:flex-start; gap:18px; padding:24px; border-bottom:1px solid var(--linea); }
  .nav-links.abierto{ display:flex; }
  .nav-toggle{ display:block; }
}
@media (max-width: 520px){
  .contenedor{ padding:0 16px; }
  .pagina, .articulo{ padding:44px 16px 72px; }
  .blog-card{ padding:24px; }
  .art-cta{ padding:26px 22px; }
}
.art-cuerpo .btn, .art-cta a{ text-decoration:none; }

/* ============================================================ FOTOGRAFÍAS DE LA MARCA
   Sistema de imagen de Bruno: hormigón + un único trazo verde + persona pequeña que avanza.
   Mientras falta una foto, en /pruebas se ve un hueco marcado con lo que debe ir (construir.py → FOTOS). */
.foto{ position:relative; margin:0; overflow:hidden; background:#D9D9D8; }
.foto img{ display:block; width:100%; height:100%; object-fit:cover; }
.foto-portada{ justify-self:end; width:min(440px,100%); aspect-ratio:4/5; }
.foto-reconocimiento, .foto-planificacion{ width:100%; aspect-ratio:21/9; max-height:560px; }
.foto-carlos{ aspect-ratio:4/5; width:100%; }
.foto-hueco{ background:#E3E3E2; display:flex; align-items:center; justify-content:center; }
.foto-hueco::before{ content:''; position:absolute; inset:18px; border:1px solid #C9C9C8; }
.foto-hueco figcaption{ position:relative; text-align:center; display:grid; gap:4px; color:var(--gris); font-size:.8rem; line-height:1.4; padding:0 24px; }
.foto-hueco figcaption .foto-prompt{ display:block; margin-top:10px; max-width:560px; text-align:left; font-size:.74rem; line-height:1.5; color:var(--grafito); background:rgba(255,255,255,.75); padding:10px 12px; user-select:all; }
.foto-hueco figcaption .foto-prompt i{ display:block; font-style:normal; font-weight:800; font-size:.62rem; text-transform:uppercase; letter-spacing:.14em; color:var(--verde-4); margin-bottom:4px; }
.foto-hueco figcaption b{ color:var(--negro); font-weight:900; text-transform:uppercase; letter-spacing:.2em; font-size:.74rem; }
.bio:not(:has(.foto)){ grid-template-columns:1fr; }
@media (max-width:960px){ .foto-portada{ justify-self:stretch; width:100%; aspect-ratio:4/3; } .foto-reconocimiento, .foto-planificacion{ aspect-ratio:16/9; } }
@media (max-width:700px){ .foto-hueco{ aspect-ratio:auto !important; max-height:none !important; padding:40px 0; } }
.foto-problema{ aspect-ratio:4/3; width:100%; margin-top:30px; }
.foto-caos{ width:100%; aspect-ratio:21/9; max-height:520px; }
@media (max-width:960px){ .foto-caos{ aspect-ratio:16/9; } }

/* ============================================================ FONDO DE FLECHAS CON OLA (loop 01 de Bruno, FH-LOOPMOTION_01)
   Flecha exacta de BACKGROUND_sin-editar.ai; colores y ritmo medidos en el vídeo. */
.trama-flechas.ola{ background:none !important; overflow:hidden; }
.trama-flechas.ola svg{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.trama-flechas.ola{ inset:0 !important; height:auto !important; opacity:1 !important; -webkit-mask-image:none !important; mask-image:none !important; }
@media (prefers-reduced-motion: reduce){ .ola-luz{ display:none; } }

/* ---------- Las notas de Finan Coach (lista de suscriptores) ---------- */
.notas-caja{ margin-top:40px; padding:30px 32px; background:var(--gris-claro); border-left:5px solid var(--verde); }
.notas-caja h3{ font-size:1.45rem; font-weight:900; line-height:1.1; letter-spacing:-.015em; margin:14px 0 8px; }
.notas-caja p{ color:var(--grafito); margin:0 0 16px; line-height:1.55; }
.notas-fila{ display:flex; gap:10px; flex-wrap:wrap; }
.notas-fila input[type=email]{ flex:1 1 220px; min-width:0; font:inherit; font-size:1rem; padding:14px 16px; border:2px solid var(--negro); background:var(--blanco); }
.notas-fila .btn{ white-space:nowrap; }
.notas-trampa{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
.notas-acepto{ display:flex; gap:10px; align-items:flex-start; margin-top:12px; font-size:.84rem; color:var(--grafito); line-height:1.45; cursor:pointer; }
.notas-acepto input{ margin-top:3px; flex-shrink:0; width:18px; height:18px; accent-color:var(--verde-3); }
.notas-acepto a{ color:var(--negro); font-weight:700; }
.notas-msg{ margin:10px 0 0; font-weight:700; font-size:.9rem; min-height:1.2em; }
section.notas{ padding:8px 0 0; }
.art-cuerpo .notas-caja{ margin-top:28px; }
@media (max-width:640px){ .notas-caja{ padding:22px 18px; } .notas-fila .btn{ width:100%; text-align:center; } }