/* ============================================================ MICROGEN — Sistema "Precisión & Custodia" Tokens base (línea ADN-Parentesco/DDC). Las líneas Tamizaje Prenatal/Natera y Peekaboo sobreescriben estos mismos tokens vía body.theme-natera / body.theme-peekaboo más abajo. ============================================================ */ :root{ --ink:#0E1A2B; --ink-soft:#16283F; --paper:#F6F8FB; --surface:#FFFFFF; --surface-2:#EDF1F6; --border:#DCE3EC; --text:#1B2636; --text-muted:#5B6B84; --text-on-ink:#EAF0F5; --text-on-ink-muted:#9FB2C6; /* Azul Microgen — muestreado del ícono del logo (#2496D2 → #1F3F72) y calibrado para contraste AA como color de marca/CTA. */ --accent:#1670B0; --accent-strong:#125C90; --accent-soft:#E7F1FA; --accent-on-ink:#2496D2; --gold:#B08D57; --gold-soft:#F3EBDD; --good:#2F7D5E; --good-soft:#E7F3EC; --ink-tint:#E4EAF3; --gold-strong:#8A6A3A; --good-strong:#256349; --font-display:'Iowan Old Style','Palatino Linotype','Book Antiqua',Georgia,'Times New Roman',serif; --font-body:'Segoe UI',system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif; --font-mono:'IBM Plex Mono','SF Mono',Consolas,'Courier New',monospace; --maxw:1180px; --radius:6px; color-scheme: light; } /* Línea Prenatal / Natera — rosa coral. Se activa poniendo class="theme-natera" en , o class="scope-natera" en cualquier sección suelta (ej. el bloque de FAQ de NIPT). */ body.theme-natera, .scope-natera{ --ink:#3D2233; --ink-soft:#4A2A3E; --paper:#FDF6F8; --surface:#FFFFFF; --surface-2:#FBEAF0; --border:#F3D7E1; --text:#3D2233; --text-muted:#8A5F6E; --text-on-ink:#FBEAF0; --text-on-ink-muted:#DDB3C2; --accent:#D9628A; --accent-strong:#B8446C; --accent-soft:#FBE3EC; --accent-on-ink:#E68CAA; --gold:#D9A857; --gold-soft:#F7EEDD; --good:#5FA084; --good-soft:#EAF6F0; --ink-tint:#F4E5EC; --gold-strong:#8A6A3A; --good-strong:#3E7C64; } /* Línea Peekaboo — revelación de sexo, violeta bebé. Se activa poniendo class="theme-peekaboo" en , o class="scope-peekaboo" en una sección suelta. No es Natera ni DDC: es su propia línea. */ body.theme-peekaboo, .scope-peekaboo{ --ink:#2E2350; --ink-soft:#372B60; --paper:#F8F5FC; --surface:#FFFFFF; --surface-2:#F1EAFA; --border:#E3D6F2; --text:#2A2340; --text-muted:#6E6188; --text-on-ink:#F3EEFC; --text-on-ink-muted:#C3B3E0; --accent:#8E7CC3; --accent-strong:#6B57A0; --accent-soft:#EFE9FA; --accent-on-ink:#8E7CC3; --gold:#E894B3; --gold-soft:#FDEAF1; --good:#5FA084; --good-soft:#EAF6F0; --ink-tint:#ECE6F4; --gold-strong:#B85A7C; --good-strong:#3E7C64; } *{box-sizing:border-box;} html{scroll-behavior:smooth;} body{ margin:0; background:var(--paper); color:var(--text); font-family:var(--font-body); font-size:16px; line-height:1.65; -webkit-font-smoothing:antialiased; } img{max-width:100%;display:block;} a{color:inherit;text-decoration:none;} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;} .scrollx{overflow-x:auto;} @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important;} } /* ---------------- Type ---------------- */ h1,h2,h3,h4{font-family:var(--font-display);color:var(--ink);margin:0;text-wrap:balance;} .eyebrow{ font-family:var(--font-mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-strong); } p{margin:0 0 14px;max-width:70ch;} .lede{font-size:17.5px;color:var(--text-muted);max-width:62ch;} .muted{color:var(--text-muted);} .mono{font-family:var(--font-mono);} /* ---------------- Buttons ---------------- */ .btn{ display:inline-flex; align-items:center; gap:8px; font-family:var(--font-body); font-weight:600; font-size:14.5px; padding:12px 20px; border-radius:4px; border:1px solid transparent; cursor:pointer; transition:transform .15s ease, box-shadow .15s ease; } .btn:active{transform:translateY(1px);} .btn-primary{background:var(--accent);color:#fff;} body.theme-peekaboo .btn-primary{color:#22163b;} .btn-primary:hover{background:var(--accent-strong);box-shadow:0 6px 18px rgba(22,112,176,.32);} body.theme-natera .btn-primary:hover{box-shadow:0 6px 18px rgba(217,98,138,.32);} body.theme-peekaboo .btn-primary:hover{background:var(--accent);box-shadow:0 6px 18px rgba(142,124,195,.32);} .btn-outline{background:transparent;border-color:var(--border);color:var(--text);} .btn-outline:hover{border-color:var(--accent);color:var(--accent-strong);} .btn-ghost-ink{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.25);color:var(--text-on-ink);} .btn-ghost-ink:hover{background:rgba(255,255,255,.14);} .btn svg{width:16px;height:16px;flex-shrink:0;} /* ---------------- Header / nav ---------------- */ header.site{ position:sticky;top:0;z-index:40; background:rgba(247,248,250,.92); backdrop-filter:blur(6px); border-bottom:1px solid var(--border); } body.theme-natera header.site{background:rgba(253,246,248,.92);} body.theme-peekaboo header.site{background:rgba(248,245,252,.92);} header.site .bar{ display:flex;align-items:center;justify-content:space-between; padding:16px 24px;max-width:var(--maxw);margin:0 auto; gap:20px; } .logo{ font-family:var(--font-display); font-weight:600; font-size:20px; letter-spacing:.02em; color:var(--ink); display:flex;align-items:center;gap:6px; } .logo .dot{color:var(--accent);} .logo img{height:38px;width:auto;display:block;} @media (max-width:460px){ .logo img{height:30px;} } nav.primary{display:flex;gap:26px;align-items:center;} nav.primary a{ font-size:13.5px;font-weight:600;letter-spacing:.02em; color:var(--text-muted); padding:6px 2px;border-bottom:2px solid transparent; } nav.primary a:hover, nav.primary a.active{color:var(--text);border-color:var(--accent);} .nav-cta{display:flex;align-items:center;gap:12px;} .nav-toggle{display:none;background:none;border:none;cursor:pointer;padding:6px; width:44px;height:44px;align-items:center;justify-content:center;} .nav-toggle svg{width:24px;height:24px;color:var(--ink);} @media (max-width: 860px){ nav.primary{ position:absolute;top:100%;left:0;right:0; background:var(--surface); border-bottom:1px solid var(--border); flex-direction:column;align-items:flex-start; padding:18px 24px;gap:16px; display:none; max-height:calc(100vh - 70px);overflow-y:auto; } nav.primary.open{display:flex;} .nav-toggle{display:flex;} header.site .bar{flex-wrap:wrap;} } /* ---------------- Nav dropdown ("Pruebas de ADN") ---------------- */ .nav-drop{position:relative;} .nav-drop-row{display:flex;align-items:center;gap:4px;} .nav-drop-row a{padding:6px 2px;} .nav-drop-toggle{ background:none;border:none;cursor:pointer;padding:4px;color:var(--text-muted); display:flex;align-items:center;justify-content:center; /* 44x44 de zona táctil real; los márgenes negativos evitan que ese tamaño descuadre la fila del menú, que sigue midiendo lo mismo visualmente. */ width:44px;height:44px;margin:-11px; } .nav-drop-toggle svg{width:14px;height:14px;transition:transform .18s ease;} .nav-drop.open .nav-drop-toggle svg{transform:rotate(180deg);} .nav-drop-panel{ display:none;flex-direction:column;gap:14px; position:absolute;top:100%;left:-20px; background:var(--surface);border:1px solid var(--border);border-radius:8px; box-shadow:0 16px 40px rgba(14,26,43,.14); padding:28px 22px 22px; min-width:640px;z-index:50; } @media (min-width:861px){ .nav-drop:hover .nav-drop-panel, .nav-drop.open .nav-drop-panel{display:flex;} } .ndp-row{display:flex;gap:28px;} .ndp-col{display:flex;flex-direction:column;gap:2px;min-width:170px;} .ndp-head{ display:flex;align-items:center;gap:8px; font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase; color:var(--text-muted);margin-bottom:8px; } .ndp-head .dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;} .ndp-head .dot.ddc{background:#1670B0;} .ndp-head .dot.natera{background:#D9628A;} .ndp-head .dot.peekaboo{background:#8E7CC3;} .ndp-col a{ font-size:14px;font-weight:500;color:var(--text);padding:8px 8px;border-radius:4px; border-bottom:none;letter-spacing:normal; } .ndp-col a:hover{background:var(--surface-2);color:var(--accent-strong);border-color:transparent;} .ndp-foot{ border-top:1px solid var(--border);padding-top:12px; } .ndp-foot a{font-size:13px;font-weight:600;color:var(--accent-strong);border:none;padding:0;} @media (max-width:860px){ .nav-drop{width:100%;} .nav-drop-row{width:100%;justify-content:space-between;} /* En movil el submenu va SIEMPRE abierto. Escondido tras la flecha, casi nadie lo tocaba y NIPT-Natera y Peekaboo quedaban invisibles. Por eso tambien se oculta la flecha: ya no controla nada aqui. */ .nav-drop-panel{ display:flex;position:static;box-shadow:none;border:none;background:none; padding:6px 0 0 14px;min-width:0;flex-direction:column;gap:18px; } .nav-drop-toggle{display:none;} .ndp-row{flex-direction:column;gap:18px;} .ndp-col{min-width:0;} .ndp-col a{padding:6px 0;} } /* ---------------- ACGT divider ---------------- */ .acgt-divider{ display:flex; overflow:hidden; white-space:nowrap; border-top:1px solid var(--border); border-bottom:1px solid var(--border); background:var(--surface-2); } .acgt-track{ display:flex;gap:28px;padding:9px 0; animation:acgt-scroll 26s linear infinite; } @keyframes acgt-scroll{ from{transform:translateX(0);} to{transform:translateX(-50%);} } .acgt-track span{ font-family:var(--font-mono);font-size:12.5px;letter-spacing:.08em; color:var(--text-muted); } .acgt-track span b{color:var(--accent-strong);font-weight:700;} @media (prefers-reduced-motion: reduce){ .acgt-track{animation:none;} } /* ---------------- Sections ---------------- */ section{padding:76px 0;} section.tight{padding:48px 0;} section.on-ink{background:var(--ink);color:var(--text-on-ink);} section.on-ink h2, section.on-ink h3{color:#fff;} section.on-ink p{color:var(--text-on-ink-muted);} section.on-surface2{background:var(--surface-2);} /* Bloques temáticos (FAQ): cada línea con su propio color de fondo y su franja superior */ section.faq-block{border-top:3px solid var(--accent);} section.faq-block.scope-natera, section.faq-block.scope-peekaboo{background:var(--surface-2);color:var(--text);} .section-head{max-width:64ch;margin-bottom:36px;} .section-head h2{font-size:clamp(26px,3vw,34px);margin:8px 0 12px;} /* ---------------- Hero ---------------- */ .hero{ padding:64px 0 72px; background: linear-gradient(100deg, rgba(246,248,251,.35) 0%, rgba(246,248,251,.2) 30%, rgba(246,248,251,.08) 58%, rgba(246,248,251,0) 85%), url('../img/hero-inicio-bg.jpg') center bottom / cover no-repeat; } @media (max-width:900px){ .hero{ background: linear-gradient(180deg, rgba(246,248,251,.4) 0%, rgba(246,248,251,.22) 35%, rgba(246,248,251,.08) 65%, rgba(246,248,251,0) 90%), url('../img/hero-inicio-bg.jpg') center bottom / cover no-repeat; } } .hero-grid{ display:grid;grid-template-columns:1.15fr 1fr;gap:56px;align-items:center; } .hero h1{ font-size:clamp(34px,4.6vw,54px); line-height:1.06; margin:14px 0 20px; } .hero h1 em{font-style:normal;color:var(--accent-strong);} .hero .lede{margin-bottom:28px;} .hero-ctas{display:flex;gap:14px;flex-wrap:wrap;} .hero-stats{display:flex;gap:28px;margin-top:36px;flex-wrap:wrap;} .hero-stats .stat b{ font-family:var(--font-mono);font-size:24px;color:var(--ink);display:block; } .hero-stats .stat span{font-size:12.5px;color:var(--text-muted);} /* result card */ .result-card{ background:var(--ink);color:#fff; border-radius:10px;padding:28px; box-shadow:0 18px 50px rgba(14,26,43,.28); transform:rotate(1.2deg); transition:transform .35s ease; } .result-card:hover{transform:rotate(0deg) translateY(-3px);} .result-card .rc-top{ display:flex;justify-content:space-between;align-items:center; font-family:var(--font-mono);font-size:11px;letter-spacing:.1em; color:var(--text-on-ink-muted);border-bottom:1px solid rgba(255,255,255,.12); padding-bottom:12px;margin-bottom:16px;text-transform:uppercase; } .result-card .rc-top .live{color:var(--accent-on-ink);display:flex;align-items:center;gap:6px;} .result-card .rc-top .live::before{ content:'';width:6px;height:6px;border-radius:50%;background:var(--accent-on-ink); animation:pulse 1.8s ease-in-out infinite; } @keyframes pulse{0%,100%{opacity:1;}50%{opacity:.35;}} .result-card .rc-prob{font-family:var(--font-mono);font-size:44px;font-weight:700;color:#fff;line-height:1;} .result-card .rc-prob span{font-size:16px;color:var(--text-on-ink-muted);font-weight:400;} .result-card .rc-label{font-size:13px;color:var(--text-on-ink-muted);margin:4px 0 18px;} .result-card .rc-seq{ font-family:var(--font-mono);font-size:13px;letter-spacing:.12em; color:var(--accent-on-ink);background:rgba(255,255,255,.05); padding:9px 12px;border-radius:4px;margin-bottom:14px; } .result-card .rc-chain{ display:flex;justify-content:space-between;font-family:var(--font-mono); font-size:11px;color:var(--text-on-ink-muted);border-top:1px solid rgba(255,255,255,.12); padding-top:12px; } @media (max-width: 900px){ .hero-grid{grid-template-columns:1fr;} .result-card{transform:none;} } /* ---------------- Hero art (ilustración) + aparición gradual ---------------- */ .hero-art{ width:100%;display:block; background:none;border:none;padding:0;margin:0; } .hero-art-imgs{display:block;position:relative;overflow:hidden;aspect-ratio:900/840;cursor:pointer;} .cycle-frame{ position:absolute;inset:0;width:100%;height:100%;object-fit:contain; opacity:0;transition:opacity .5s ease; } .cycle-frame.is-active{opacity:1;} /* ---------------- Hero con fondo interactivo (ADN-Parentesco) ---------------- */ .ddc-hero{position:relative;overflow:hidden;padding:76px 0;cursor:pointer;} .ddc-hero-bg{position:absolute;inset:0;z-index:0;} .ddc-hero-bg .cycle-frame{object-fit:cover;object-position:center right;} .ddc-hero > .wrap{position:relative;z-index:1;} @media (max-width:700px){ .ddc-hero{padding:48px 0;} .ddc-hero-bg .cycle-frame{object-position:75% center;} /* En movil la foto se recentra y la cara queda justo detras del titulo. Sin esta cortina el texto oscuro cae sobre la imagen y no se lee. */ .ddc-hero-bg::after{ content:"";position:absolute;inset:0; background:linear-gradient(180deg, color-mix(in srgb, var(--paper) 95%, transparent) 0%, color-mix(in srgb, var(--paper) 86%, transparent) 68%, color-mix(in srgb, var(--paper) 60%, transparent) 100%); } /* El gris de --text-muted se pierde sobre la foto aun con la cortina. */ .ddc-hero .lede{color:var(--text);} } /* Tarjeta ancha (icono + texto + enlace en una fila). En movil se apila: en fila, al parrafo le quedaban 91px de ancho en una pantalla de 375px. */ .svc-card-wide{display:flex;align-items:center;gap:22px;} .svc-card-wide .ic-wrap{width:64px;height:64px;flex-shrink:0;} .svc-card-wide .go{flex-shrink:0;} @media (max-width:640px){ .svc-card-wide{flex-direction:column;align-items:flex-start;gap:14px;} } /* CTA del hero DDC. Antes era una caja blanca con filete bronce: se leía como un aviso, no como un botón. Ahora va en azul Microgen sólido (el color de acción de la marca), más grande y con la acción explícita en texto. */ .hero-hook{ display:inline-flex;align-items:center;gap:24px;margin-top:20px; padding:20px 26px;border-radius:12px; background:linear-gradient(118deg,var(--accent) 0%,var(--accent-strong) 100%); border:none; box-shadow:0 14px 34px rgba(14,26,43,.30); transition:transform .16s ease, box-shadow .16s ease; } .hero-hook:hover{transform:translateY(-3px);box-shadow:0 20px 44px rgba(14,26,43,.38);} .hero-hook-copy{display:flex;flex-direction:column;gap:4px;} .hero-hook-doubt{ font-family:var(--font-mono);font-size:12.5px;letter-spacing:.08em;text-transform:uppercase; font-weight:700;color:#FFEBD0; } .hero-hook-truth{ font-family:var(--font-display);font-size:clamp(23px,2.6vw,30px);font-weight:600; color:#fff;line-height:1.15; } .hero-hook-act{font-size:14px;font-weight:600;color:rgba(255,255,255,.88);} .hero-hook-go{ flex:none;width:52px;height:52px;border-radius:50%; background:rgba(255,255,255,.18);color:#fff; display:flex;align-items:center;justify-content:center; transition:transform .16s ease, background .16s ease; } .hero-hook-go svg{width:24px;height:24px;} .hero-hook:hover .hero-hook-go{transform:translateX(4px);background:rgba(255,255,255,.28);} @media (max-width:560px){ .hero-hook{display:flex;justify-content:space-between;gap:14px;padding:18px 20px;} .hero-hook-go{width:44px;height:44px;} .hero-hook-go svg{width:20px;height:20px;} } @media (prefers-reduced-motion: no-preference){ .reveal-in{ opacity:0; animation:hero-reveal 1s cubic-bezier(.16,.8,.24,1) forwards; animation-delay:.2s; } @keyframes hero-reveal{ from{opacity:0;transform:translateY(22px) scale(.97);} to{opacity:1;transform:none;} } } /* ---------------- Alliance banner ---------------- */ .alliance{ background:var(--ink-soft);color:var(--text-on-ink); padding:44px 0; } .alliance .wrap{display:flex;gap:20px;align-items:flex-start;} .alliance .mark{ flex-shrink:0;width:34px;height:34px; border:1.5px solid var(--gold);transform:rotate(45deg); margin-top:6px; } .alliance p{ font-family:var(--font-display);font-size:20px;line-height:1.45; color:var(--text-on-ink);max-width:58ch;margin:0; } .alliance strong{color:var(--gold);font-weight:600;} .alliance strong.accent{color:var(--accent-on-ink);} /* Bloques oscuros consecutivos (banda de alianza -> CTA -> pie de pagina): sin corte se leen como una sola masa. Escalonamos el tono y marcamos el borde con una linea fina. */ .alliance + section.on-ink, .alliance + footer.site, section.on-ink + footer.site{ border-top:1px solid rgba(255,255,255,.12); } /* ---------------- Cards grid (index services) ---------------- */ .svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;} .svc-card{ display:block;background:var(--surface);border:1px solid var(--border); border-radius:var(--radius);padding:28px;transition:border-color .2s, transform .2s; } .svc-card:hover{border-color:var(--accent);transform:translateY(-3px);} .svc-card .num{font-family:var(--font-mono);font-size:12px;color:var(--accent-strong);} .svc-card h3{font-size:20px;margin:10px 0 8px;} .svc-card p{font-size:14.5px;color:var(--text-muted);margin-bottom:16px;} .svc-card .go{font-family:var(--font-mono);font-size:12.5px;color:var(--accent-strong);font-weight:600;} .svc-card.dim{opacity:.75;border-style:dashed;} .svc-card.dim:hover{transform:none;border-color:var(--border);} @media (max-width:900px){ .svc-grid{grid-template-columns:1fr;} } /* ---------------- Process steps ---------------- */ .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;counter-reset:step;} /* Variante de 3 columnas. Va aqui a proposito: las media queries de .steps estan mas abajo con el mismo peso, asi que la siguen colapsando en movil. Antes esto era un style="" en linea y por eso no se apilaba nunca. */ .steps-3{grid-template-columns:repeat(3,1fr);} .step{border-top:2px solid var(--border);padding-top:16px;} .step::before{ counter-increment:step;content:counter(step,decimal-leading-zero); display:block;font-family:var(--font-mono);color:var(--accent-strong);font-size:13px;margin-bottom:8px; } .step h4{font-size:16px;margin-bottom:6px;} .step p{font-size:14px;color:var(--text-muted);margin:0;} @media (max-width:900px){ .steps{grid-template-columns:1fr 1fr;} } @media (max-width:560px){ .steps{grid-template-columns:1fr;} } /* ---------------- Photo / logo placeholder ---------------- */ .placeholder{ border:1.5px dashed var(--border); border-radius:var(--radius); background:var(--surface-2); display:flex;flex-direction:column;align-items:center;justify-content:center; text-align:center;gap:6px;padding:24px;min-height:160px; } .placeholder .ph-num{ font-family:var(--font-mono);font-size:20px;color:var(--accent-strong);font-weight:700; } .placeholder .ph-label{font-size:13px;color:var(--text-muted);max-width:26ch;} .placeholder.video .ph-icon{ width:40px;height:40px;border-radius:50%;background:var(--accent);color:#fff; display:flex;align-items:center;justify-content:center;margin-bottom:2px; } .placeholder.video .ph-icon svg{width:16px;height:16px;} /* ---------------- Real vertical video (Facebook reel embed) ---------------- */ .video-frame{ height:340px;width:fit-content;margin:0 auto;align-self:center; display:flex;align-items:center;justify-content:center; background:var(--ink);border-radius:var(--radius);overflow:hidden; } .video-frame video{ height:100%;width:auto;display:block;object-fit:cover; } @media (max-width:760px){ .video-frame{height:420px;} } /* ---------------- Info callout (autoservicio, etc.) ---------------- */ .info-box{ border:1.5px solid var(--border);border-left:4px solid var(--accent); background:var(--surface);border-radius:var(--radius); padding:20px 22px;display:flex;gap:16px;align-items:flex-start;margin:16px 0; } .info-box .ic{flex-shrink:0;width:34px;height:34px;border-radius:50%;background:var(--accent-soft);color:var(--accent-strong);display:flex;align-items:center;justify-content:center;} .info-box .ic svg{width:18px;height:18px;} .info-box h4{font-size:15.5px;margin-bottom:6px;} .info-box p{font-size:14px;margin:0;color:var(--text-muted);} /* ---------------- Trust / accreditation block ---------------- */ .trust-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;} .trust-card{ background:var(--surface);border:1px solid var(--border);border-radius:var(--radius); padding:24px;display:flex;flex-direction:column;gap:14px; } .trust-card h4{font-size:17px;} .trust-card .placeholder{min-height:100px;} .trust-card .logo-frame{ background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius); min-height:100px;display:flex;align-items:center;justify-content:center;padding:18px; } .trust-card .logo-frame img{height:44px;width:auto;max-width:100%;object-fit:contain;} .trust-card .cert-links{display:flex;gap:14px;flex-wrap:wrap;} .trust-card .cert-links a{ font-family:var(--font-mono);font-size:12px;font-weight:600;color:var(--accent-strong); display:inline-flex;align-items:center;gap:5px; } .trust-card .cert-links a svg{width:13px;height:13px;} .trust-card .cert-links a:hover{text-decoration:underline;} .photo-frame{margin-top:20px;position:relative;} /* Kit Panorama: recortado del fondo, apoyado sobre la página en vez de enmarcado como foto. */ .kit-shot{margin:8px auto 0;max-width:340px;text-align:center;} .kit-shot img{ width:100%;height:auto;display:block;cursor:zoom-in; filter:drop-shadow(0 18px 28px rgba(75,59,122,.16)); } .kit-shot figcaption{ margin-top:-6px;font-family:var(--font-mono);font-size:12px;letter-spacing:.06em; text-transform:uppercase;color:var(--text-muted); } .photo-frame img{ width:100%;aspect-ratio:4/3;object-fit:contain;background:var(--surface-2); border-radius:var(--radius);border:1px solid var(--border);display:block; } .photo-frame img[data-lightbox]{cursor:zoom-in;} .photo-frame figcaption{ margin-top:10px;font-family:var(--font-mono);font-size:12px;color:var(--text-muted); } .photo-frame .zoom-hint{ position:absolute;top:12px;right:12px;width:34px;height:34px;border-radius:50%; background:rgba(14,26,43,.55);color:#fff;display:flex;align-items:center;justify-content:center; opacity:0;transition:opacity .15s ease;pointer-events:none; } .photo-frame .zoom-hint svg{width:16px;height:16px;} .photo-frame:hover .zoom-hint{opacity:1;} /* ---------------- Lightbox (ver foto completa) ---------------- */ .lightbox{ position:fixed;inset:0;background:rgba(6,10,16,.92);z-index:100; display:none;align-items:center;justify-content:center;padding:48px; } .lightbox.open{display:flex;} .lightbox img{max-width:100%;max-height:100%;object-fit:contain;border-radius:6px;} .lightbox-close{ position:fixed;top:20px;right:24px;width:44px;height:44px;border-radius:50%; background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.25);color:#fff; display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:24px;line-height:1; transition:background .15s ease; } .lightbox-close:hover{background:rgba(255,255,255,.2);} @media (max-width:760px){ .trust-grid{grid-template-columns:1fr;} } /* ---------------- Accordion ---------------- */ .accordion{border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;background:var(--surface);} .acc-item + .acc-item{border-top:1px solid var(--border);} .acc-head{ width:100%;display:flex;align-items:center;gap:16px; background:none;border:none;text-align:left;cursor:pointer; padding:20px 22px;font-family:var(--font-body);color:var(--text); } .acc-head .ic{ width:38px;height:38px;flex-shrink:0;border-radius:50%; background:var(--accent-soft);color:var(--accent-strong); display:flex;align-items:center;justify-content:center; } .acc-head .ic svg{width:20px;height:20px;} .acc-head .ttl{flex:1;} .acc-head .ttl h4{font-size:16.5px;font-weight:600;font-family:var(--font-body);color:var(--text);margin:0;} .acc-head .ttl small{font-size:13px;color:var(--text-muted);} .acc-head .chev{width:18px;height:18px;color:var(--text-muted);transition:transform .2s;flex-shrink:0;} .acc-item[data-open="true"] .chev{transform:rotate(180deg);} .acc-panel{ max-height:0;overflow:hidden;transition:max-height .28s ease; padding:0 22px; } .acc-item[data-open="true"] .acc-panel{padding:0 22px 22px;} .acc-panel .modes{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px;} .mode-pill{ font-family:var(--font-mono);font-size:11px;letter-spacing:.05em;text-transform:uppercase; padding:4px 10px;border-radius:3px;background:var(--surface-2);color:var(--text-muted);border:1px solid var(--border); } .mode-pill.judicial{background:var(--gold-soft);color:var(--gold);border-color:transparent;font-weight:600;} /* Cuando el pill es enlace a su modalidad (tarjeta destacada de Paternidad). */ a.mode-pill{text-decoration:none;cursor:pointer;transition:background .2s ease,color .2s ease,border-color .2s ease;} a.mode-pill:hover{background:var(--accent-soft);color:var(--accent-strong);border-color:var(--accent);} a.mode-pill.judicial:hover{background:var(--gold);color:#fff;border-color:var(--gold);} /* Resalta un momento la modalidad a la que se acaba de llegar. */ .mode-card.is-target{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);} .mode-card.mode-card-judicial.is-target{border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-soft);} .acc-panel p{font-size:14.5px;margin-bottom:12px;} .acc-panel .wa-link{font-size:13.5px;font-weight:600;color:var(--accent-strong);display:inline-flex;gap:6px;align-items:center;} .acc-panel .panel-row{display:flex;gap:24px;align-items:center;} .acc-panel .panel-row .txt{flex:1;min-width:0;} .acc-panel .panel-row .acc-photo{ width:200px;height:150px;object-fit:cover;border-radius:var(--radius); flex-shrink:0;cursor:zoom-in; } @media (max-width:700px){ .acc-panel .panel-row{flex-direction:column;} .acc-panel .panel-row .acc-photo{width:100%;height:auto;aspect-ratio:16/10;} } /* ---------------- Modalidad cards ---------------- */ .mode-card{ background:var(--surface);border:1px solid var(--border);border-radius:var(--radius); padding:22px; } .mode-card .tag{ font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase; color:var(--accent-strong); } .mode-card h4{font-size:17px;margin:8px 0 8px;} .mode-card p{font-size:14px;color:var(--text-muted);margin:0;} .mode-card.highlight{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset;} /* .modes-grid: the 3 "Tres modalidades" cards (Confidencial/Legal/Judicial) only — premium treatment scoped here so it doesn't leak into other .mode-card usages (ej. Paternidad Prenatal). */ .modes-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch;} .modes-grid .mode-card{ display:flex;flex-direction:column;align-items:center;text-align:center; border-radius:14px;padding:46px 28px 28px;position:relative;overflow:hidden; box-shadow:0 2px 10px rgba(14,26,43,.05); transition:all .3s ease; } .modes-grid .mode-card:hover{ transform:translateY(-5px); box-shadow:0 18px 34px rgba(14,26,43,.14); border-color:var(--accent); } .modes-grid .mode-icon-slot{ height:150px;display:flex;align-items:center;justify-content:center;margin-bottom:16px; } .modes-grid .mode-icon{ width:130px;height:130px;object-fit:contain;display:block; transition:transform .3s ease; } .modes-grid .mode-card-judicial .mode-icon{width:150px;height:150px;} .modes-grid .mode-card:hover .mode-icon{transform:scale(1.05);} .modes-grid .mode-badge{ display:inline-block;font-family:var(--font-mono);font-size:10.5px;font-weight:700; letter-spacing:.05em;text-transform:uppercase;color:#fff;background:var(--accent); padding:5px 13px;border-radius:20px;margin-bottom:16px; } .modes-grid .mode-card h4{margin-top:8px;} .modes-grid .mode-card p{margin:0 0 6px;text-align:left;align-self:stretch;} .modes-grid .mode-card .wa-link{margin-top:auto;align-self:flex-start;padding-top:12px;} @media (max-width:860px){ .modes-grid{grid-template-columns:1fr;} } /* ---------------- Paternidad Prenatal cards (#prenatal) — ilustración en la esquina ---------------- */ #prenatal .prenatal-card{ display:flex;flex-direction:column;position:relative;overflow:hidden; } #prenatal .prenatal-illust{ position:absolute;top:16px;right:16px;width:38%;max-width:215px;height:auto; transition:transform .3s ease;pointer-events:none; } #prenatal .prenatal-card:hover .prenatal-illust{transform:scale(1.05);} #prenatal .prenatal-card .tag, #prenatal .prenatal-card h4, #prenatal .prenatal-card > p{padding-right:40%;} #prenatal .benefit-list{ list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:8px; } #prenatal .benefit-list li{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--text);} #prenatal .benefit-list svg{width:17px;height:17px;flex-shrink:0;color:var(--accent-strong);} /* Red de seguridad: los 2 primeros ítems quedan a la altura de la ilustración (posicionada absoluta arriba-derecha). Sin este padding, un texto largo se mete por debajo del dibujo y se pierde. Con él, envuelve en vez de esconderse. */ #prenatal .benefit-list li:nth-child(-n+2){padding-right:40%;} #prenatal .benefit-list li{align-items:flex-start;} #prenatal .benefit-list svg{margin-top:2px;} #prenatal .prenatal-card.no-invasiva:hover{border-color:var(--accent);box-shadow:0 10px 24px rgba(22,112,176,.12);} #prenatal .prenatal-card.invasiva{--coral:#D9628A;} #prenatal .prenatal-card.invasiva .benefit-list svg{color:var(--coral);} #prenatal .prenatal-card.invasiva:hover{border-color:var(--coral);box-shadow:0 10px 24px rgba(217,98,138,.14);} #prenatal .prenatal-card{transition:border-color .3s ease, box-shadow .3s ease;} @media (max-width:760px){ #prenatal .prenatal-illust{position:static;order:-1;width:62%;max-width:220px;margin:0 auto 14px;} #prenatal .prenatal-card .tag, #prenatal .prenatal-card h4, #prenatal .prenatal-card > p, #prenatal .benefit-list li:nth-child(-n+2){padding-right:0;} } /* ---------------- Zona táctil en móvil ---------------- Los enlaces de texto (wa-link, "Ver todos…", "Pregúntanos →") miden ~21px de alto: se pueden tocar, pero exigen puntería. En pantallas sin cursor se les da 44px de alto real sin cambiar cómo se ven — el relleno crece hacia arriba y abajo, y el margen negativo lo compensa para no mover el diseño. */ @media (hover:none),(pointer:coarse){ .wa-link, .link-more, .acc-panel .wa-link{ display:inline-flex;align-items:center; min-height:44px;padding-top:11px;padding-bottom:11px; margin-top:-11px;margin-bottom:-11px; } } /* ---------------- Tarjeta "Preguntas Frecuentes" ---------------- Va al final de cada página de servicio y lleva a la sección del FAQ que corresponde a esa página. Usa las variables del tema, así que se pinta sola con el azul de DDC, el rosa de Natera o el violeta de Peekaboo. */ .faq-card{ display:flex;align-items:center;gap:20px; padding:22px 26px;border-radius:12px; background:var(--accent-soft);border:1px solid var(--border); text-decoration:none;color:inherit; transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease; } .faq-card:hover{ transform:translateY(-2px); box-shadow:0 12px 30px rgba(14,26,43,.10); border-color:var(--accent); } .faq-card-ic{ flex:none;width:50px;height:50px;border-radius:50%; background:var(--surface);color:var(--accent-strong); display:flex;align-items:center;justify-content:center; } .faq-card-ic svg{width:25px;height:25px;} .faq-card-copy{display:flex;flex-direction:column;gap:5px;} .faq-card-copy b{ font-family:var(--font-display);font-size:21px;font-weight:600;color:var(--ink); } .faq-card-copy > span{font-size:14px;color:var(--text-muted);line-height:1.5;} .faq-card-go{ flex:none;width:44px;height:44px;border-radius:50%;margin-left:auto; background:var(--surface);color:var(--accent-strong); display:flex;align-items:center;justify-content:center; transition:transform .16s ease; } .faq-card-go svg{width:21px;height:21px;} .faq-card:hover .faq-card-go{transform:translateX(4px);} @media (max-width:640px){ .faq-card{flex-direction:column;align-items:flex-start;gap:14px;padding:20px;} .faq-card-go{margin-left:0;align-self:flex-end;} } /* ---------------- Stat cards (con ícono) ---------------- */ .stat-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:28px 0;} .stat-card{ background:var(--surface);border:1px solid var(--border);border-radius:var(--radius); padding:18px 20px;display:flex;align-items:center;gap:14px; } .stat-card .ic{ flex-shrink:0;width:42px;height:42px;border-radius:50%; background:var(--accent-soft);color:var(--accent-strong); display:flex;align-items:center;justify-content:center; } .stat-card .ic svg{width:20px;height:20px;} .stat-card b{display:block;font-size:16px;color:var(--ink);font-family:var(--font-body);} .stat-card span{font-size:12px;color:var(--text-muted);} @media (max-width:760px){ .stat-cards{grid-template-columns:1fr;} } /* ---------------- "¿Por qué elegir Natera?" (servicios-natera) ---------------- Logo de marca + titular, seguido de la fila de 4 razones. El logo va en un marco claro porque el azul corporativo de Natera no es del tema baby-violet. */ .why-natera{margin-top:30px;} .why-natera-head{display:flex;align-items:center;gap:16px;flex-wrap:wrap;} .why-natera-head h3{margin:0;font-size:clamp(20px,2.4vw,26px);} .why-natera-logo{ display:inline-flex;align-items:center;justify-content:center; background:var(--surface);border:1px solid var(--border);border-radius:var(--radius); padding:10px 16px;flex:none; } .why-natera-logo img{display:block;height:30px;width:auto;max-width:100%;object-fit:contain;} .why-natera .stat-cards{margin-top:16px;} .stat-cards.is-4{grid-template-columns:repeat(4,1fr);} /* Con 4 columnas el texto queda muy angosto al costado del ícono: se apila. */ .stat-cards.is-4 .stat-card{flex-direction:column;align-items:flex-start;gap:12px;} .stat-cards.is-4 .stat-card span{line-height:1.45;} @media (max-width:1020px){ .stat-cards.is-4{grid-template-columns:repeat(2,1fr);} } @media (max-width:760px){ .stat-cards.is-4{grid-template-columns:1fr;} } /* ---------------- Fila de beneficios (chips con emoji) ---------------- */ .benefit-row{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:8px;} .benefit{ display:flex;align-items:center;gap:8px; background:var(--surface);border:1px solid var(--border);border-radius:20px; padding:8px 16px;font-size:13.5px;font-weight:600;color:var(--text); } .benefit .emoji{font-size:15px;line-height:1;} /* ---------------- Chips (dentro de mode-card, reemplazan listas largas) ---------------- */ .chip-row{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 18px;} .chip{ font-size:14px;font-weight:600;padding:8px 14px;border-radius:18px;line-height:1.35; background:var(--accent-soft);color:var(--accent-strong);white-space:nowrap; } /* Comparación Básica/Extendida: qué ya viene incluido vs. qué se suma */ .chip-included{background:var(--good-soft);color:var(--good);} .chip-plus{background:var(--accent-strong);color:#fff;} /* Bloque NIPT Panorama (Básica / Extendida): tipografía más legible que el resto de mode-cards */ .theme-natera .mode-card{padding:24px;} .theme-natera .mode-card .tag{font-size:12.5px;} .theme-natera .mode-card h4{font-size:20px;} .theme-natera .mode-card p{font-size:15.5px;line-height:1.6;} .theme-natera .mode-card .wa-link{font-size:15.5px;font-weight:600;} .theme-natera .info-box h4{font-size:17px;} .theme-natera .info-box p{font-size:15.5px;line-height:1.6;} /* ---------------- Ilustración decorativa de fondo (ADN, tipo watermark) ---------------- */ .deco-section{position:relative;overflow:hidden;} .deco-illustration{ position:absolute;top:-30px;right:-40px;width:340px;height:100%;max-height:520px; color:var(--accent);opacity:.13;pointer-events:none;z-index:0; } .deco-section > .wrap{position:relative;z-index:1;} @media (max-width:900px){ .deco-illustration{display:none;} } /* ---------------- Peekaboo hero (símbolos ♂♀) ---------------- Antes era un background con `cover` anclado a la derecha: recortaba el lado izquierdo y el degradado tapaba justo el símbolo femenino. Ahora es una fila de dos columnas (texto | arte) con la imagen completa siempre visible; la máscara radial le difumina los bordes para que siga leyéndose como fondo ambiental y no como una foto encajonada. */ .pk-hero{ position:relative; background:radial-gradient(120% 120% at 76% 50%, var(--surface-2) 0%, var(--paper) 60%); } .pk-hero-row{display:flex;align-items:center;gap:28px;flex-wrap:wrap;} .pk-hero-copy{flex:1 1 400px;min-width:280px;max-width:56ch;} .pk-hero-art{flex:1 1 400px;min-width:280px;max-width:600px;} .pk-hero-art img{ display:block;width:100%;height:auto; -webkit-mask-image:radial-gradient(ellipse 76% 76% at 50% 50%, #000 52%, transparent 100%); mask-image:radial-gradient(ellipse 76% 76% at 50% 50%, #000 52%, transparent 100%); } @media (max-width:760px){ .pk-hero-row{gap:8px;} .pk-hero-art{order:2;margin:0 auto;max-width:420px;} } /* ============================================================ Peekaboo — "¿niño o niña?" interactivo. Al pasar el cursor sobre el símbolo masculino la página entera vira a azul; sobre el femenino, a rosa; al salir vuelve al violeta del tema. Se registran las variables con @property para que sean de tipo y por tanto ANIMABLES: sin esto el cambio sería un salto seco, no un fundido. La detección del hover es CSS puro con :has() — no hace falta JS. ============================================================ */ @property --ink{syntax:"";inherits:true;initial-value:#0E1A2B} @property --ink-soft{syntax:"";inherits:true;initial-value:#16283F} @property --paper{syntax:"";inherits:true;initial-value:#F6F8FB} @property --surface-2{syntax:"";inherits:true;initial-value:#EDF1F6} @property --border{syntax:"";inherits:true;initial-value:#DCE3EC} @property --text{syntax:"";inherits:true;initial-value:#1B2636} @property --text-muted{syntax:"";inherits:true;initial-value:#5B6B84} @property --accent{syntax:"";inherits:true;initial-value:#1670B0} @property --accent-strong{syntax:"";inherits:true;initial-value:#125C90} @property --accent-soft{syntax:"";inherits:true;initial-value:#E7F1FA} @property --accent-on-ink{syntax:"";inherits:true;initial-value:#2496D2} @property --gold{syntax:"";inherits:true;initial-value:#B08D57} @property --gold-soft{syntax:"";inherits:true;initial-value:#F3EBDD} /* Zonas sensibles sobre cada símbolo. Invisibles hasta que se las activa: entonces encienden un halo del color y la etiqueta. Quien enciende/apaga es main.js (`.is-on` aquí, `.pk-tint-*` en el body): con cursor basta pasar por encima, en táctil hay que tocar. */ .pk-hero-art{position:relative;} .pk-hs{ position:absolute;border-radius:44%; display:flex;align-items:flex-end;justify-content:center; background:none;border:0;padding:0;margin:0;appearance:none;font:inherit; } .pk-hs::before{ content:"";position:absolute;inset:0;border-radius:inherit; opacity:0;transition:opacity .35s ease; } .pk-hs.is-on::before{opacity:1;} .pk-hs-nina{left:23%;top:26%;width:23%;height:59%;} .pk-hs-nino{left:54%;top:24%;width:30%;height:57%;} .pk-hs-nina::before{background:radial-gradient(closest-side,rgba(244,156,192,.55),rgba(244,156,192,0) 72%);} .pk-hs-nino::before{background:radial-gradient(closest-side,rgba(143,176,234,.55),rgba(143,176,234,0) 72%);} .pk-hs-label{ position:relative; font-family:var(--font-mono);font-size:12px;font-weight:700; letter-spacing:.1em;text-transform:uppercase;color:#fff; padding:5px 13px;border-radius:999px;transform:translateY(38%); white-space:nowrap;opacity:0;transition:opacity .35s ease; } .pk-hs.is-on .pk-hs-label{opacity:1;} .pk-hs-nina .pk-hs-label{background:#D9628A;} .pk-hs-nino .pk-hs-label{background:#4E7FD1;} /* Con cursor: se apaga solo al salir, así que no hace falta pista permanente. */ @media (hover:hover) and (pointer:fine){ .pk-hs{cursor:pointer;} } /* Táctil: sin cursor nadie adivina que los símbolos reaccionan, así que las etiquetas quedan siempre a la vista invitando al toque (el halo no: taparía los símbolos todo el tiempo). */ @media (hover:none),(pointer:coarse){ .pk-hs-label{opacity:.92;} } /* El fundido entre los tres colores. Va fuera de cualquier media query: sirve igual para el cursor y para el toque. */ body.theme-peekaboo{ transition: --ink .55s ease, --ink-soft .55s ease, --paper .55s ease, --surface-2 .55s ease, --border .55s ease, --text .55s ease, --text-muted .55s ease, --accent .55s ease, --accent-strong .55s ease, --accent-soft .55s ease, --accent-on-ink .55s ease, --gold .55s ease, --gold-soft .55s ease; } /* NIÑO — azul */ body.theme-peekaboo.pk-tint-nino{ --ink:#1C2C52; --ink-soft:#243768; --paper:#F2F6FD; --surface-2:#E7EFFB; --border:#D3E0F5; --text:#22304F; --text-muted:#5B6C8C; --accent:#6E93DB; --accent-strong:#3D6CBE; --accent-soft:#E5EDFB; --accent-on-ink:#8FB0EA; --gold:#5E8AD8; --gold-soft:#E8F0FD; } /* NIÑA — rosa */ body.theme-peekaboo.pk-tint-nina{ --ink:#4A1E38; --ink-soft:#5C2646; --paper:#FDF4F8; --surface-2:#FBE7F0; --border:#F6D5E3; --text:#472138; --text-muted:#8C6178; --accent:#E086AC; --accent-strong:#B84D7D; --accent-soft:#FCE7F0; --accent-on-ink:#F49CC0; --gold:#D9628A; --gold-soft:#FDEAF1; } /* Sin animación para quien pidió menos movimiento: el color cambia igual, pero de golpe en vez de con fundido. */ @media (prefers-reduced-motion: reduce){ body.theme-peekaboo{transition:none;} .pk-hs{transition:none;} } /* Tarjeta CTA rosa→azul: recoge los dos colores de los símbolos del hero. Texto en violeta profundo (no blanco): sobre pasteles el blanco da ~2:1 de contraste, el violeta pasa AA en los dos extremos del degradado. */ .pk-cta{ display:inline-flex;align-items:center;gap:20px;margin-top:24px; padding:16px 22px;border-radius:16px; background:linear-gradient(100deg,#F49CC0 0%,#F6ABC8 44%,#AEC2EE 56%,#8FB0EA 100%); color:#2E2350;text-decoration:none; box-shadow:0 10px 26px rgba(142,124,195,.26); transition:transform .16s ease, box-shadow .16s ease; } .pk-cta:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(142,124,195,.34);} .pk-cta-text{display:flex;flex-direction:column;line-height:1.25;} .pk-cta-text b{font-family:var(--font-display);font-size:23px;font-weight:600;} .pk-cta-text span{font-size:14px;font-weight:600;opacity:.85;} .pk-cta-arrow{ flex:none;width:38px;height:38px;border-radius:50%; background:rgba(255,255,255,.55); display:flex;align-items:center;justify-content:center; transition:transform .16s ease; } .pk-cta-arrow svg{width:19px;height:19px;} .pk-cta:hover .pk-cta-arrow{transform:translateX(3px);} @media (max-width:760px){ .pk-cta{display:flex;justify-content:space-between;} } /* ---------------- Natera hero v2 — imagen premium (perla/marfil) + animación científica sutil ---------------- La foto en sí (madre, fondo, composición) NUNCA se anima — solo 3 capas superpuestas: brillo pulsante sobre el feto, partículas flotantes, y un acento de hélice ADN que gira. */ .nt-hero-v2{position:relative;overflow:hidden;background:var(--paper);padding:56px 0;} .nt-hero-row{display:flex;align-items:center;gap:40px;flex-wrap:wrap;} .nt-hero-text{flex:1 1 340px;min-width:280px;max-width:52ch;} .nt-hero-media{ position:relative;flex:1 1 420px;max-width:560px;width:100%; aspect-ratio:1684/934;margin:0 auto; } .nt-hero-img{width:100%;height:100%;display:block;border-radius:14px;object-fit:contain;} video.nt-hero-img{object-fit:cover;} .nt-glow{ position:absolute;left:63%;top:67%;width:20%;aspect-ratio:1/1; transform:translate(-50%,-50%);border-radius:50%;pointer-events:none; background:radial-gradient(circle, rgba(255,255,255,.95) 0%, rgba(217,98,138,.45) 40%, rgba(217,98,138,0) 72%); animation:nt-pulse 3.2s ease-in-out infinite; } @keyframes nt-pulse{ 0%,100%{opacity:.5;transform:translate(-50%,-50%) scale(.92);} 50%{opacity:1;transform:translate(-50%,-50%) scale(1.08);} } .nt-particles{position:absolute;inset:0;pointer-events:none;} .nt-particles span{ position:absolute;width:5px;height:5px;border-radius:50%; background:var(--accent);opacity:.6; animation:nt-float 5.5s ease-in-out infinite; } @keyframes nt-float{ 0%,100%{transform:translate(0,0);opacity:.35;} 50%{transform:translate(5px,-9px);opacity:.9;} } .nt-helix-accent{ position:absolute;right:1%;top:6%;width:14%;height:88%; color:var(--accent);opacity:.3;pointer-events:none; animation:nt-spin 10s linear infinite; } @keyframes nt-spin{ 0%{transform:scaleX(1);} 25%{transform:scaleX(.12);} 50%{transform:scaleX(-1);} 75%{transform:scaleX(.12);} 100%{transform:scaleX(1);} } @media (max-width:760px){ .nt-hero-row{flex-direction:column;align-items:stretch;gap:24px;} .nt-hero-text{max-width:none;} .nt-hero-media{flex:none;width:100%;max-width:100%;} } /* ---------------- Featured card (Paternidad) ---------------- */ .featured{ background:var(--accent-soft);color:var(--text);border-radius:10px; border:1.5px solid var(--accent); padding:32px;display:flex;gap:28px;align-items:center;margin-bottom:28px; } .featured .star{ font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;color:var(--gold); display:flex;align-items:center;gap:6px;margin-bottom:10px; } .featured h3{color:var(--ink);font-size:26px;margin-bottom:8px;} .featured p{color:var(--text-muted);margin-bottom:16px;} .featured .ic-wrap{ flex-shrink:0;width:88px;height:88px;border-radius:50%; background:var(--surface);border:1px solid var(--border);display:flex;align-items:center;justify-content:center; } .featured .ic-wrap svg{width:44px;height:44px;color:var(--accent-strong);} .featured .featured-photo{ width:240px;height:220px;object-fit:cover;object-position:65% center; border-radius:8px;flex-shrink:0;cursor:zoom-in;border:1px solid var(--border); } @media (max-width:760px){ .featured{flex-direction:column;text-align:center;} .featured .featured-photo{width:100%;height:auto;aspect-ratio:16/10;} } /* Peekaboo: foto retrato completa, sin recorte (a diferencia del recorte 240x220 por defecto) */ body.theme-peekaboo .featured .featured-photo{ width:220px;height:auto;object-fit:contain;object-position:top center; } @media (max-width:760px){ body.theme-peekaboo .featured .featured-photo{width:100%;max-width:280px;aspect-ratio:auto;margin:0 auto;} } /* ---------------- Sample type cards ---------------- */ .sample-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;} .sample-card{ background:var(--surface);border:1px solid var(--border);border-radius:var(--radius); padding:18px;text-align:center; } .sample-card.primary{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset;} .sample-card .ic{ width:52px;height:52px;margin:0 auto 12px;border-radius:50%; background:var(--accent-soft);color:var(--accent-strong); display:flex;align-items:center;justify-content:center; } .sample-card .ic svg{width:26px;height:26px;} .sample-card .thumb{ width:100%;aspect-ratio:4/3;object-fit:cover;object-position:center; border-radius:calc(var(--radius) - 4px);margin-bottom:12px;cursor:zoom-in; display:block;background:var(--surface-2); } .sample-card h4{font-size:15px;margin-bottom:6px;} .sample-card p{font-size:12.8px;color:var(--text-muted);margin:0;} .sample-card .badge{ display:inline-block;margin-top:8px;font-family:var(--font-mono);font-size:10.5px; color:var(--accent-strong);background:var(--accent-soft);padding:2px 8px;border-radius:3px; } @media (max-width:900px){ .sample-grid{grid-template-columns:repeat(2,1fr);} } /* Antes decia "1fr 1fr", igual que la regla de 900px, asi que no apilaba nunca: a 375px cada tarjeta quedaba en 155px y su texto en 118px. */ @media (max-width:520px){ .sample-grid{grid-template-columns:1fr;} } /* ---------------- Big line cards (hub) ---------------- */ /* Tarjetas horizontales apiladas: texto a la izquierda, atajos + CTA a la derecha */ .line-grid{display:grid;grid-template-columns:1fr;gap:20px;} .line-card{ border-radius:10px;padding:34px 36px;color:#fff;position:relative;overflow:hidden; display:grid;grid-template-columns:1.15fr 1fr;gap:24px 44px;align-items:center; } .line-card .lc-main{min-width:0;} .line-card .lc-side{display:flex;flex-direction:column;align-items:flex-start;gap:16px;min-width:0;} .line-card.ddc{background:linear-gradient(155deg,#0E1A2B,#125C90);} .line-card.natera{background:linear-gradient(155deg,#4B3B7A,#B36E93);} .line-card .eyebrow{color:rgba(255,255,255,.75);} .line-card h3{color:#fff;font-size:26px;margin:10px 0 10px;} .line-card p{color:rgba(255,255,255,.82);margin-bottom:0;} .line-card .btn-outline{border-color:rgba(255,255,255,.4);color:#fff;} .line-card .btn-outline:hover{background:rgba(255,255,255,.12);border-color:#fff;} .line-card .sub-list{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:0;} .line-card .sub-list a{ font-size:12.5px;font-weight:600;padding:6px 12px;border-radius:20px; background:rgba(255,255,255,.1);color:rgba(255,255,255,.92); border:1px solid rgba(255,255,255,.2);white-space:nowrap; } .line-card .sub-list a:hover{background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.4);} @media (max-width:860px){ .line-card{grid-template-columns:1fr;gap:20px;padding:28px 24px;} } /* ---------------- Pending-confirmation notice ---------------- */ .pending{ border:1.5px dashed var(--gold);background:var(--gold-soft);border-radius:var(--radius); padding:16px 18px;font-size:13.8px;color:var(--text);display:flex;gap:10px;margin:16px 0; } .pending b{color:var(--gold);} /* ---------------- FAQ teaser / contact strip ---------------- */ .cta-band{ background:var(--ink);color:var(--text-on-ink);border-radius:10px; padding:44px;display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap; } .cta-band h3{color:#fff;font-size:24px;margin-bottom:6px;} .cta-band p{color:var(--text-on-ink-muted);margin:0;} .cta-band .actions{display:flex;gap:12px;flex-wrap:wrap;} /* ---------------- Footer ---------------- */ footer.site{background:linear-gradient(rgba(0,0,0,.24),rgba(0,0,0,.24)),var(--ink);color:var(--text-on-ink-muted);padding:56px 0 28px;} .footer-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:36px;margin-bottom:36px;} .footer-grid h5{ font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase; color:#fff;margin-bottom:14px; } .footer-grid p, .footer-grid a{display:block;font-size:14px;color:var(--text-on-ink-muted);margin-bottom:8px;} .footer-grid a:hover{color:#fff;} .social-row{display:flex;gap:10px;margin-top:6px;} .social-row a{ display:flex;align-items:center;justify-content:center; width:34px;height:34px;border-radius:50%;margin-bottom:0; background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18); color:var(--text-on-ink-muted); transition:background .15s ease, color .15s ease, border-color .15s ease; } .social-row a svg{width:17px;height:17px;} .social-row a:hover{background:var(--accent);color:#fff;border-color:var(--accent);} body.theme-peekaboo .social-row a:hover{color:#22163b;} /* Variante discreta — junto a CTAs, no en el footer */ .social-row.sm a{width:26px;height:26px;} .social-row.sm a svg{width:13px;height:13px;} .footer-logo{display:flex;align-items:center;gap:9px;font-family:var(--font-display);font-size:20px;color:#fff;margin-bottom:10px;} .footer-logo img{height:28px;width:auto;display:block;} .footer-bottom{ border-top:1px solid rgba(255,255,255,.12);padding-top:20px; display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px; font-size:12.5px;color:var(--text-on-ink-muted); } @media (max-width:900px){ .footer-grid{grid-template-columns:1fr 1fr;} } @media (max-width:560px){ .footer-grid{grid-template-columns:1fr;} } /* ---------------- Floating WhatsApp ---------------- */ .wa-float{ position:fixed;bottom:22px;right:22px;z-index:50; width:56px;height:56px;border-radius:50%; background:#25D366;color:#fff; display:flex;align-items:center;justify-content:center; box-shadow:0 10px 24px rgba(0,0,0,.22); transition:transform .15s ease; } .wa-float:hover{transform:scale(1.06);} .wa-float svg{width:28px;height:28px;} .social-float{ position:fixed;right:22px;bottom:90px;z-index:50; display:flex;flex-direction:column;gap:10px; } .social-float a{ width:38px;height:38px;border-radius:50%; display:flex;align-items:center;justify-content:center; background:var(--surface);border:1px solid var(--border);color:var(--text-muted); box-shadow:0 6px 16px rgba(14,26,43,.18); transition:transform .15s ease, color .15s ease, border-color .15s ease; } .social-float a svg{width:17px;height:17px;} .social-float a:hover{color:var(--accent-strong);border-color:var(--accent);transform:scale(1.08);} @media (max-width:480px){ .social-float{right:16px;bottom:84px;gap:8px;} .social-float a{width:34px;height:34px;} .social-float a svg{width:15px;height:15px;} } /* ---------------- Utility ---------------- */ .center{text-align:center;} .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:24px;} @media (max-width:760px){ .grid-2{grid-template-columns:1fr;} } /* ---------------- Cursor interactivo ---------------- */ @media (pointer:fine){ body.custom-cursor, body.custom-cursor a, body.custom-cursor button{cursor:none;} .cursor-dot, .cursor-ring{ position:fixed;top:0;left:0;border-radius:50%; pointer-events:none;z-index:9999;will-change:transform; } .cursor-dot{ width:7px;height:7px;background:var(--accent); } .cursor-ring{ width:32px;height:32px;border:1.5px solid var(--accent);opacity:.5; transition:width .2s ease,height .2s ease,opacity .2s ease,border-color .2s ease; } .cursor-ring.hover{width:46px;height:46px;border-color:var(--accent-strong);opacity:.9;} .cursor-dot.is-hidden, .cursor-ring.is-hidden{opacity:0;} } /* ---------------- Tarjetas de contacto y sedes (contacto.html) ---------------- Misma caja base que .trust-card, pero con un "tono" por tarjeta: filete superior, halo suave en la esquina y chip de icono. El tono se cambia con .tone-good / .tone-gold, siempre con tokens del tema (no colores sueltos), asi que sigue funcionando en las lineas Natera y Peekaboo. */ .contact-card{ --tone:var(--accent); --tone-soft:var(--accent-soft); --tone-strong:var(--accent-strong); position:relative;overflow:hidden; background:var(--surface);border:1px solid var(--border);border-radius:var(--radius); padding:26px 24px 24px;display:flex;flex-direction:column;gap:12px; transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease; } .contact-card.tone-good{--tone:var(--good);--tone-soft:var(--good-soft);--tone-strong:var(--good-strong);} .contact-card.tone-gold{--tone:var(--gold);--tone-soft:var(--gold-soft);--tone-strong:var(--gold-strong);} .contact-card::before{ content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--tone); } .contact-card::after{ content:"";position:absolute;right:-46px;top:-46px;width:150px;height:150px; border-radius:50%;background:var(--tone-soft);pointer-events:none; } .contact-card > *{position:relative;z-index:1;} .contact-card:hover{ transform:translateY(-3px);border-color:var(--tone); box-shadow:0 14px 30px -20px rgba(14,26,43,.55); } .contact-card .ic{ width:44px;height:44px;border-radius:12px; background:var(--tone-soft);color:var(--tone-strong); border:1px solid var(--tone); display:flex;align-items:center;justify-content:center; } .contact-card .ic svg{width:21px;height:21px;} .contact-card h4{font-size:17px;margin:0;} .contact-card p{margin:0;} .contact-card .tag{ align-self:flex-start; font-family:var(--font-mono);font-size:11px;font-weight:600; letter-spacing:.1em;text-transform:uppercase; color:var(--tone-strong);background:var(--tone-soft); border:1px solid var(--tone);border-radius:100px;padding:3px 10px; } .contact-card .addr{ font-family:var(--font-mono);font-size:14px;line-height:1.55;color:var(--text);margin:0; } .contact-card .note{font-size:13px;color:var(--text-muted);margin:0;} .contact-card .card-actions{margin-top:auto;padding-top:8px;display:flex;gap:12px;flex-wrap:wrap;} .contact-card .btn-tone{ background:var(--tone);color:#fff;border-color:var(--tone); } .contact-card .btn-tone:hover{background:var(--tone-strong);border-color:var(--tone-strong);} @media (prefers-reduced-motion: reduce){ .contact-card:hover{transform:none;} } /* Sedes: las tres comparten el mismo tono (azul tinta de la marca) para que se lean como una familia y no repitan los colores de los canales de arriba. Lo que las diferencia es el numero de sede: chip mono + cifra grande al fondo en la esquina, en lugar del halo de color. */ .contact-card.tone-sede{ --tone:var(--ink); --tone-soft:var(--ink-tint); --tone-strong:var(--ink); } .contact-card.tone-sede::after{ content:attr(data-num); right:18px;top:6px;width:auto;height:auto;border-radius:0;background:none; font-family:var(--font-mono);font-weight:700;font-size:54px;line-height:1; letter-spacing:-.03em;color:var(--ink);opacity:.09; } .contact-card.tone-sede{ background: radial-gradient(circle 150px at calc(100% + 40px) -40px, var(--ink-tint) 0 100%, transparent 100%), var(--surface); }