/* =====================================================================
   Las 7 guías hermanas, traducidas al sistema de diseño · pata 04 · 16/9/2026
   ---------------------------------------------------------------------
   POR QUÉ ASÍ: las guías no son páginas de WordPress; son páginas sueltas hechas
   sobre la plantilla vieja de la hoja de ruta, cada una con sus calculadoras. Rehacerlas
   una a una sería tirar contenido que funciona. En su lugar, esta hoja **traduce cada
   pieza vieja a la pieza equivalente del sistema**: la guía sigue siendo la misma por
   dentro (mismo texto, mismas calculadoras) y por fuera pasa a ser de la casa.

   REGLAS: ni un color, radio o sombra inventado (todo sale de las variables del sistema),
   y no se toca ninguna clase .g2-*. Se carga DESPUÉS del sistema y ANTES del acabado.
   Se aplica a: paternidad · cobro · derechos · conciliación · monoparental ·
   familia numerosa · parto múltiple.
   ===================================================================== */

/* ---------- base: la letra y el color de la casa ---------- */
body{font-family:var(--g2-txt);color:var(--g2-tinta);font-size:17px;line-height:1.55;background:#fff}
body::before,.marca-agua{display:none!important}          /* los fondos de colores viejos, fuera */
h1,h2,h3,h4{font-family:var(--g2-tit);font-weight:700;font-style:normal;letter-spacing:-.015em;color:var(--g2-navy)}
b,strong{font-weight:800}
a{color:var(--g2-teal)}

/* ---------- primera pantalla: el degradado de marca ---------- */
/* el dibujo grande del fondo asoma por la derecha a propósito; se recorta aquí (ya lo hacía la plantilla,
   se deja explícito para que no dependa de ella). Medido el 16/9: la guía NO se sale a lo ancho. */
.hero{background:var(--g2-grad);color:#fff;padding:clamp(34px,6vw,84px) clamp(20px,5vw,40px) clamp(48px,8vw,96px);overflow:hidden}
.hero::before,.hero::after{display:none}
.hero h1{color:#fff;font-weight:700;font-size:clamp(34px,7.2vw,62px);line-height:1.06}
.hero h1 em{font-style:italic;color:var(--g2-cian-2);display:block}
.hero .saludito{font-weight:800;font-size:13px;letter-spacing:.11em;text-transform:uppercase;color:var(--g2-cian-2)}
.hero .meta,.hero .familia,.hero .scroll-hint{color:rgba(255,255,255,.82)!important;font-style:normal}
.hero .meta strong{color:#fff}

/* ---------- secciones: se distinguen al bajar, nunca dos iguales seguidas ---------- */
.section{padding:clamp(40px,7vw,72px) clamp(20px,5vw,40px);background:#fff}
.section.tinted{background:var(--g2-hielo)!important;border-top:0!important}
.section+.section:not(.tinted){border-top:1px solid var(--g2-borde)}
/* los titulares iban en cursiva fina: la casa los quiere rectos y con cuerpo
   (la regla vieja es «.section h2», así que la mía tiene que llevar el mismo peso) */
.section h2,.section h3{font-family:var(--g2-tit);font-style:normal;font-weight:700;color:var(--g2-navy)}
.section h2{font-size:clamp(26px,5vw,38px);line-height:1.1;margin-bottom:10px}
.section h2::after{display:none}                           /* la rayita bajo el título, fuera */
.section-label{display:inline-flex;align-items:center;gap:9px;padding:8px 14px;border-radius:999px;background:rgba(10,183,198,.12);color:var(--g2-teal);font-weight:800!important;font-size:13px!important;letter-spacing:.11em;text-transform:uppercase;margin-bottom:18px}
.section-label svg{width:18px;height:18px;opacity:1}
.sub-h2{font-family:var(--g2-txt);font-weight:800;font-size:19px;color:var(--g2-navy);margin:1.6em 0 .4em}

/* ---------- marcas escritas como texto (✓ y →) → iconos de línea de la marca ----------
   Las guías pintaban la marca de «hecho» y las flechas de lista con caracteres sueltos.
   El manual no los admite: se sustituyen por el mismo trazo de los iconos del sistema,
   dibujado aquí (no es una imagen: es el trazo, y toma el color del sitio donde esté). */
.tarea.hecha .casilla::after,.ti-step li::before,.lead-magnet li::before{
  content:"";display:block;width:1em;height:1em;background-color:currentColor;
  -webkit-mask:center/contain no-repeat;mask:center/contain no-repeat;
  -webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")}
.ti-step li::before,.lead-magnet li::before{color:var(--g2-cian);top:.25em}
.tree-card li::before{
  content:"";display:block;width:1em;height:1em;background-color:var(--g2-cian);top:.3em;
  -webkit-mask:center/contain no-repeat;mask:center/contain no-repeat;
  -webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E")}

/* las estrellas de las opiniones: las del sistema, rellenas y en ámbar */
.stars{display:inline-flex;gap:3px;color:var(--g2-ambar);font-size:0}
.stars .i{width:18px;height:18px;fill:currentColor;stroke:none}

/* ---------- listas: la viñeta de la casa ---------- */
.lista-limpia{list-style:none;margin:0 0 1.2em;padding:0}
.lista-limpia>li{position:relative;padding-left:26px;margin-bottom:.55em;line-height:1.5}
.lista-limpia>li::before{content:"";position:absolute;left:4px;top:.7em;width:8px;height:8px;border-radius:50%;background:var(--g2-cian)}

/* ---------- tarjetas ---------- */
.pack-card,.scard{background:#fff;border:1px solid var(--g2-borde);border-radius:var(--g2-r-l);padding:clamp(20px,3vw,28px);box-shadow:var(--g2-sh-s)}
.pack-card{border-left:1px solid var(--g2-borde)}
.pack-card .pack-nombre,.scard .sc-tit{font-family:var(--g2-tit);font-weight:700;font-size:22px;color:var(--g2-navy)}
.pack-card .pack-desc,.scard p{color:var(--g2-gris)}
.pack-card .pack-tag{background:var(--g2-cian);color:#fff;border-radius:999px;font-weight:800;font-size:12px;letter-spacing:.08em;text-transform:uppercase;padding:6px 12px;box-shadow:none}
.sc-top,.sc-pie{color:var(--g2-gris)}
.sc-num{font-family:var(--g2-tit);color:var(--g2-teal)}

/* ---------- pasos ---------- */
.timeline::before{background:var(--g2-cian-3)}
.timeline>li::before,.cnum{background:var(--g2-cian);color:#fff;font-weight:800}

/* ---------- preguntas frecuentes: el plegable de la casa ---------- */
.faq-item{background:#fff;border:1px solid var(--g2-borde);border-radius:var(--g2-r-m);margin-bottom:10px}
.faq-item[open]{box-shadow:var(--g2-sh-m);border-color:transparent}
.faq-item summary{padding:18px 20px;font-weight:800;font-size:17px;color:var(--g2-navy);gap:14px}
.faq-item summary::after{content:"+";display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--g2-hielo);color:var(--g2-teal);font-size:22px;font-weight:400;line-height:1}
.faq-item[open] summary::after{content:"+";transform:rotate(45deg);background:var(--g2-cian);color:#fff}
.faq-respuesta{padding:0 20px 22px;font-size:16px;color:var(--g2-gris);line-height:1.6}
.faq-respuesta strong{color:var(--g2-navy);font-weight:800}

/* ---------- calculadoras: campos con la piel de la casa ---------- */
.calc-row{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end}
.campo,.calc-row input,.calc-row select{font-family:var(--g2-txt);font-size:16px;color:var(--g2-tinta);background:#fff;border:1.5px solid var(--g2-borde);border-radius:var(--g2-r-s);padding:12px 14px;min-width:0}
.campo:focus,.calc-row input:focus,.calc-row select:focus{outline:3px solid var(--g2-cian-2);outline-offset:2px;border-color:var(--g2-cian)}
.clab,.blab{font-weight:800;font-size:13px;letter-spacing:.04em;color:var(--g2-gris);text-transform:uppercase}
.v-precio,.bnum{font-family:var(--g2-tit);font-weight:700;color:var(--g2-navy)}
.v-b-txt{color:var(--g2-gris)}
.bpick{border:1.5px solid var(--g2-borde);border-radius:999px;background:#fff;color:var(--g2-navy);font-weight:800;padding:9px 15px}
.bpick.on,.bpick[aria-pressed="true"]{background:var(--g2-navy);border-color:var(--g2-navy);color:#fff}

/* ---------- botones ---------- */
.n-btn,.cta a,.cta-btn{display:inline-flex;align-items:center;justify-content:space-between;gap:14px;min-height:62px;padding:10px 22px;border-radius:18px;font:800 18px/1.15 var(--g2-txt);text-decoration:none;box-shadow:var(--g2-sh-m);background:var(--g2-navy);color:#fff}
.n-btn.verde,.cta a.verde,.cta-btn.verde{background:linear-gradient(135deg,#27C774 0%,#1A9D5A 52%,#12804A 100%);box-shadow:var(--g2-sh-verde)}
.n-btn:hover,.cta a:hover,.cta-btn:hover{transform:translateY(-2px);box-shadow:var(--g2-sh-l)}
@media(max-width:560px){.n-btn,.cta a,.cta-btn{width:100%}}

/* ---------- móvil: una sola columna, nada que se salga ---------- */
@media(max-width:700px){
  .section{padding-inline:20px}
  .section [style*="grid-template-columns"]{grid-template-columns:minmax(0,1fr)!important}
  .calc-row{flex-direction:column;align-items:stretch}
  .campo,.calc-row input,.calc-row select{width:100%}
}

/* ---------- fase 2 (16/9 noche, diseño aprobado): primera pantalla oscura con la cabecera integrada ----------
   Mismo fondo que el acabado v6 pone a las primeras pantallas interiores (móvil y ordenador) y el mismo hueco
   arriba para que la cabecera transparente no tape el título. La página lo pide con body.hf4-oscura
   (lo pone el fragmento 69 en vista previa, como hace el sistema con las páginas nuevas). */
body.hf4-oscura{padding-top:0!important}
body.hf4-oscura .hero{padding-top:calc(var(--hf4h,74px) + clamp(34px,6vw,84px))!important}   /* !important: la guía fija su padding así (17/9: en móvil la cabecera tapaba la etiqueta) */
.hero{background:#06233E url("https://api-minio.prestacionespornacimiento.es/archivos/informes/higgsfield/fondos/fondo_hero_movil_v2_vacio_1520x2504.webp?v=2") center top/100% auto no-repeat!important}
@media (min-width:900px){.hero{background:#06233E url("https://api-minio.prestacionespornacimiento.es/archivos/informes/higgsfield/fondos/fondo_hero_pc_gpt05_sinmovil_2688x1520.webp?v=2") center center/cover no-repeat!important}}

/* v3 (17/9): en PC las siete guías van en una columna de 720 px sobre fondo claro, y la cabecera
   transparente (letras blancas) quedaba ilegible fuera de la columna. La primera pantalla se sale
   de la columna y ocupa todo el ancho (mismo fondo del hero del sistema); el texto sigue alineado
   con la columna. Por debajo, la columna blanca sigue igual. */
@media (min-width:900px){
  .app{overflow:visible;margin-top:0}                       /* la guía pone margin:32px auto y recorta: aquí no */
  .hero{margin-inline:calc(50% - 50vw)}
  body.hf4-oscura .hero{padding-top:calc(var(--hf4h,74px) + 40px)!important;padding-bottom:56px!important}   /* la guía fija su padding con !important en PC */
  .hero>*{max-width:640px;margin-inline:auto}   /* 720 de columna menos los 40 de cada lado: el texto sigue en la columna */
}

/* ---------- legibilidad (pata LEGIBILIDAD · 18/9/2026): botón secundario de la venta sobre el degradado azul ---------- */
/* .v-b-txt sale gris (regla de arriba) también dentro del botón «fantasma» .v-sec → gris sobre azul, ilegible en el móvil.
   Aquí el texto va blanco y el botón lleva un fondo navy translúcido + borde blanco para que se lea como botón. Cubre las 7 hermanas. */
.venta .v-botones a.v-sec{background:rgba(13,39,66,.42);border-color:#fff;box-shadow:0 2px 10px rgba(13,39,66,.18)}
.venta .v-botones a.v-sec .v-b-txt,.venta .v-botones a.v-sec small,.venta .v-botones a.v-sec .v-precio{color:#fff}
.venta .v-botones a.v-sec small{opacity:.96}
.venta .v-botones a.v-sec svg{stroke:#fff}