/* HERACODE — sistema de diseño (limpio, sin WordPress). */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{margin:0;background:#fff;font-family:'Inconsolata',monospace;color:#4b4766} img{max-width:100%;height:auto} a{color:inherit} /* ============================================================ HERACODE — Sistema de diseno "Continuista" (marca intacta) Portado del mockup de Claude Design a WordPress (Astra + Spectra). Indigo #2d2270 - Verde #00ea8c - Coral #fe6472 Versos (titulares) - Inconsolata (texto) NOTAS DE PORTADO: - Clases prefijadas con .hc- y todo scopeado bajo .hc para NO afectar a Astra/Spectra ni al resto del sitio. Cada pattern se envuelve en .hc. - Versos solo tiene 300/400/900 (no 700/800): titulares en 900 (Black), textos/UI en 400. Se afinara al previsualizar. - Header/footer NO se tocan aqui: los gestiona Astra. Esto es el cuerpo Home. ============================================================ */ /* ---------- Tipografias auto-alojadas en el child theme ---------- CANON del diseno: Saira (titulares) + Inconsolata (texto). Versos disponible como alternativa: cambia --head a 'Versos' (1 linea). Nota: Versos solo tiene 300/400/900 — la escala 600/700/800 del diseno se aplana con ella; por eso el titular por defecto es Saira. */ @font-face{font-family:'Saira';src:url('/assets/fonts/Saira-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:'Saira';src:url('/assets/fonts/Saira-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap} @font-face{font-family:'Saira';src:url('/assets/fonts/Saira-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap} @font-face{font-family:'Saira';src:url('/assets/fonts/Saira-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap} @font-face{font-family:'Saira';src:url('/assets/fonts/Saira-800.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap} @font-face{font-family:'Inconsolata';src:url('/assets/fonts/Inconsolata-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:'Inconsolata';src:url('/assets/fonts/Inconsolata-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap} @font-face{font-family:'Inconsolata';src:url('/assets/fonts/Inconsolata-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap} @font-face{font-family:'Inconsolata';src:url('/assets/fonts/Inconsolata-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap} /* Kalam (manuscrita): SOLO para el tramo destacado del titular de los heros (ver bloque HERO KALAM HIGHLIGHT). Subset latin, self-hosted. */ @font-face{font-family:'Kalam';src:url('/assets/fonts/Kalam-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap} @font-face{font-family:'Versos';src:url('/assets/fonts/Versos-Light.woff2') format('woff2'),url('/assets/fonts/Versos-Light.woff') format('woff');font-weight:300;font-style:normal;font-display:swap} @font-face{font-family:'Versos';src:url('/assets/fonts/Versos-Regular.woff2') format('woff2'),url('/assets/fonts/Versos-Regular.woff') format('woff');font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:'Versos';src:url('/assets/fonts/Versos-Black.woff2') format('woff2'),url('/assets/fonts/Versos-Black.woff') format('woff');font-weight:900;font-style:normal;font-display:swap} /* ---------- Tokens ---------- */ .hc{ --ink:#2d2270; /* marca / titulares / fondos oscuros */ --ink-2:#1f1850; /* footer / bandas oscuras */ --green:#00ea8c; /* acento de marca: fondos, botones, graficos (NO texto sobre claro) */ --green-text:#00794f; /* verde para TEXTO sobre fondo claro (AA en blanco 5.46:1 y sobre lavanda .hc-reviews 4.77:1; antes #00875a caia a 3.98 sobre lavanda) */ --coral:#fe6472; /* acento secundario: fondos/graficos */ --coral-text:#c82f44; /* coral para TEXTO sobre fondo claro (AA en blanco 5.32:1 y sobre lavanda 4.65:1; antes #d63a4f caia a 4.01 sobre lavanda) */ --body:#4b4766; /* texto */ --faint:#666280; /* texto tenue (AA en blanco 5.8:1 y sobre lavanda .hc-reviews 5.07:1; antes #6e6a8a caia a 4.49 sobre lavanda) */ --bg:#ffffff; --soft:#fbfaff; /* fondo suave */ --line:#ece9f5; /* bordes */ --line-2:#f0eef7; --head:'Saira',system-ui,sans-serif; /* alternativa de marca: 'Versos' */ --text:'Inconsolata','SFMono-Regular',monospace; --maxw:1200px; --r:18px; --shadow:0 1px 0 rgba(45,34,112,.04); --shadow-lg:0 30px 70px -30px rgba(45,34,112,.35); } /* ---------- Base (scopeada) ---------- */ .hc{font-family:var(--text);color:var(--body);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility} .hc *{box-sizing:border-box} .hc img{max-width:100%;display:block} .hc a{color:inherit;text-decoration:none} .hc h1,.hc h2,.hc h3,.hc h4,.hc h5{font-family:var(--head);color:var(--ink);margin:0;letter-spacing:-.02em;line-height:1.05;font-weight:700} .hc p{margin:0} /* ---------- Container ---------- */ .hc-container{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 22px} /* ---------- Sections ---------- */ .hc-section{padding:56px 0} .hc-section--tight{padding:40px 0} .hc-soft{background:var(--soft)} .hc-ink{background:var(--ink);color:#fff} .hc-ink h1,.hc-ink h2,.hc-ink h3{color:#fff} /* ============================================================ BANDAS ESTÁNDAR (decisión 2026-07-13) — sistema de fondos por sección. Paleta: blanco/soft · lavanda #f1eefb · azul --ink-2 (tarjetas --ink). Regla: secciones consecutivas NUNCA repiten fondo (marca el cambio). ============================================================ */ .hc-band-lav{background:#f1eefb} .hc-band-ink{background:var(--ink-2);color:rgba(255,255,255,.86)} .hc-band-ink .hc-section-title,.hc-band-ink h2,.hc-band-ink h3{color:#fff} .hc-band-ink .hc-lead{color:rgba(255,255,255,.82)} .hc-band-ink .hc-eyebrow{color:var(--green)} .hc-band-ink .hc-muted{color:rgba(255,255,255,.62)} /* tarjetas dentro de banda azul: fondo --ink sólido (como el Plan de vuelo/portfolio) */ .hc-band-ink .hc-card{background:var(--ink);border:1px solid rgba(255,255,255,.12);box-shadow:0 24px 50px -30px rgba(0,0,0,.55);color:rgba(255,255,255,.86)} .hc-band-ink .hc-card h3{color:#fff} .hc-band-ink .hc-card p{color:rgba(255,255,255,.82)} /* enlaces de contenido: verde eléctrico (el green-text 2.4-2.9:1 suspende AA sobre azul). .hc.hc-band-ink (0,3,2) gana a `.hc :is(...) a` (0,2,2). */ .hc.hc-band-ink :is(.hc-ans,.hc-lead,.hc-ck,.hc-step,.hc-card p,p,li) a:not(.hc-btn){color:var(--green);text-decoration-color:rgba(0,234,140,.5)} .hc.hc-band-ink :is(.hc-ans,.hc-lead,.hc-ck,.hc-step,.hc-card p,p,li) a:not(.hc-btn):hover{color:#5affb4} .hc-band-ink .hc-step .hc-num{color:var(--green)} /* numeral de paso: green-text no da AA sobre azul */ .hc-band-ink .hc-card-link{color:var(--green)} .hc-band-ink .hc-ck li{color:rgba(255,255,255,.9);border-color:rgba(255,255,255,.14)} .hc-band-ink .hc-ck .hc-ic path{stroke:var(--green)} /* botón outline: .hc-btn.hc-btn--outline (0,3,0) gana a `.hc a.hc-btn--outline` (0,2,1) */ .hc-band-ink .hc-btn.hc-btn--outline{color:#fff;border-color:rgba(255,255,255,.55);background:transparent} .hc-band-ink a.hc-btn.hc-btn--outline:hover, .hc-band-ink a.hc-btn.hc-btn--outline:focus-visible{background:#fff;color:var(--ink);border-color:#fff} .hc-eyebrow{font-family:var(--text);font-size:12px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--green-text)} .hc-ink .hc-eyebrow{color:var(--green)} /* sobre indigo el verde de marca cumple (8.4:1) */ .hc-eyebrow--coral{color:var(--coral-text)} .hc-ink .hc-eyebrow--coral{color:var(--coral)} .hc-section-title{font-size:clamp(28px,5vw,42px);margin:12px 0 0;text-wrap:balance} .hc-lead{font-size:clamp(16px,2.4vw,19px);line-height:1.55;color:var(--body);max-width:62ch} .hc-lead b,.hc-lead strong{color:var(--ink)} .hc-ink .hc-lead{color:rgba(255,255,255,.78)}.hc-ink .hc-lead b{color:#fff} .hc-center{text-align:center}.hc-center .hc-lead{margin-left:auto;margin-right:auto} .hc-muted{color:var(--faint)} .hc-mark{background:linear-gradient(180deg,transparent 58%,rgba(0,234,140,.45) 58%);padding:0 .05em} .hc-green{color:var(--green-text)}.hc-ink .hc-green{color:var(--green)} .hc-coral{color:var(--coral-text)}.hc-ink .hc-coral{color:var(--coral)} .hc-tink{color:var(--ink)} /* ---------- Buttons ---------- */ .hc-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:14px 24px;border-radius:999px; font-family:var(--head);font-weight:700;font-size:15px;letter-spacing:.01em;cursor:pointer;border:2px solid transparent; transition:transform .14s ease,filter .14s ease,background .14s,color .14s;white-space:nowrap} .hc-btn:hover{transform:translateY(-2px)} .hc-btn .hc-ar{width:16px;height:16px} .hc-btn--green{background:var(--green);color:var(--ink)} .hc-btn--green:hover{filter:brightness(1.05)} .hc-btn--ink{background:var(--ink);color:#fff} .hc-btn--outline{background:transparent;color:var(--ink);border-color:var(--ink)} .hc-btn--outline-light{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.8)} .hc-btn--block{width:100%} .hc-btn--lg{padding:16px 30px;font-size:16px} /* Móvil: un label largo envuelve y el botón nunca desborda el ancho de pantalla. */ @media(max-width:600px){.hc-btn{white-space:normal;max-width:100%}} /* ---------- Grids ---------- */ .hc-grid{display:grid;gap:18px} .hc-g2{grid-template-columns:1fr} .hc-g3{grid-template-columns:1fr} .hc-g4{grid-template-columns:1fr} .hc-cluster{display:flex;flex-wrap:wrap;gap:12px} .hc-cluster--center{justify-content:center} /* ---------- Cards ---------- */ .hc-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:26px} .hc-card.hc-ink{background:var(--ink);border-color:transparent} /* .hc-card pisa el fondo de .hc-ink por orden de declaracion; esta regla (2 clases) restaura el indigo */ .hc-card--soft{background:var(--soft)} .hc-card h3{font-size:20px;margin-bottom:8px} /* Cuadrado de acento con icono de linea (trazo 2, como flechas/checks del diseno). Color del icono con contraste AA sobre cada acento: tinta sobre verde/coral, blanco sobre indigo. */ .hc-icon-sq{width:38px;height:38px;border-radius:11px;flex:none;display:inline-flex;align-items:center;justify-content:center} .hc-icon-sq svg{width:20px;height:20px;display:block} .hc-icon-sq.hc-bg-green,.hc-icon-sq.hc-bg-coral{color:var(--ink)} .hc-icon-sq.hc-bg-ink{color:#fff} .hc-bg-green{background:var(--green)}.hc-bg-ink{background:var(--ink)}.hc-bg-coral{background:var(--coral)} /* Iconos inline self-hosted (hc_icon / ). En contenedores flex el valign se ignora; en texto corrido alinea el icono con la línea base. */ .hc-ic{vertical-align:-.15em} .hc-card-link{display:inline-flex;align-items:center;gap:7px;font-family:var(--head);font-weight:700;font-size:14px;color:var(--ink);margin-top:auto} .hc-card-link .hc-ar{width:14px;height:14px;transition:transform .15s} .hc-card:hover .hc-card-link .hc-ar{transform:translateX(3px)} .hc-service-card{display:flex;flex-direction:column;gap:14px;height:100%} .hc-service-card p{flex:1} /* ---------- Hero ---------- */ .hc-hero{background:linear-gradient(180deg,var(--soft),#fff);padding:46px 0 56px} .hc-hero h1{font-size:clamp(36px,7vw,58px);font-weight:800;letter-spacing:-.03em;line-height:1.04} .hc-hero .hc-lead{margin-top:22px} .hc-hero-actions{margin-top:28px} .hc-hero-grid{display:grid;gap:34px;align-items:center} /* Patrón "eyebrow invertido": H1 pequeño con keyword + titular grande emocional (no-H1). */ .hc-h1-kw{font-family:var(--head);font-weight:700;font-size:clamp(15px,2.2vw,18px);letter-spacing:.02em;color:var(--green-text);text-transform:none;margin:14px 0 6px} /* El H1-keyword debe ganar a .hc-hero h1 (58px) y a .hc h1 (color índigo), que si no lo agrandan/oscurecen por especificidad y rompen la inversión visual. */ .hc-hero h1.hc-h1-kw,.hc-hero--img h1.hc-h1-kw{ font-size:clamp(15px,2.2vw,18px);font-weight:700;line-height:1.3;letter-spacing:.02em;color:var(--green-text)} .hc-hero--img h1.hc-h1-kw{color:var(--green)} .hc-hero-big{font-family:var(--head);font-weight:800;letter-spacing:-.02em;line-height:1.05;color:var(--ink);font-size:clamp(30px,5.6vw,50px);text-wrap:balance;margin:0} /* ---------- PRECIO FANTASMA EN HERO — Lote de precios ---------- Sustituye al antiguo pill de precio (parecía un tercer botón y competía con el CTA). "Cifra fantasma": precio gigante en outline verde translúcido anclado abajo-derecha del hero, con el "desde" en VERTICAL pegado a su lateral izquierdo y un radial índigo de respaldo (::before) para asegurar contraste sobre la foto. Encendido secuencial tipo neón: el "desde" prende (~2.4 s) y se ATENÚA a .5 (~3.6 s); la cifra prende (~3.3 s) y es la ÚNICA que queda con el brillo neón fijo, sincronizada con el neón Kalam del titular. menu.js añade .hc-pg-go en el load; todos los delays viven en este CSS. El precio se lee UNA vez (aria-label del contenedor role="img"); el resto va aria-hidden. Reutilizable: «499€», «299€», «299€ /mes», «59€ /mes». Portado de la variante 19 de muestra-precio-hero.php (referencia histórica). */ .hc-pg{position:absolute;right:2%;bottom:8%;z-index:1; display:grid;grid-template-columns:auto auto;align-items:center;column-gap:4px; pointer-events:none;-webkit-user-select:none;user-select:none} .hc-pg::before{content:"";position:absolute;inset:-12% -16%;z-index:-1; background:radial-gradient(closest-side,rgba(20,15,52,.5),rgba(20,15,52,0))} /* "desde" vertical, outline fino, pegado al lateral izquierdo (abarca cifra + /mes) */ .hc-pg-desde{grid-column:1;grid-row:1 / span 2;writing-mode:vertical-rl;transform:rotate(180deg); font-family:var(--head);font-weight:800;font-size:clamp(22px,2.6vw,40px); line-height:1;letter-spacing:.08em; color:transparent;-webkit-text-stroke:1.2px rgba(0,234,140,.45)} /* la cifra fantasma: gigante, outline verde translúcido */ .hc-pg-amt{grid-column:2;grid-row:1;font-family:var(--head);font-weight:800; font-size:clamp(6rem,18vw,15rem);line-height:1;letter-spacing:-.02em; color:rgba(0,234,140,.08);-webkit-text-stroke:2px rgba(0,234,140,.45)} /* sufijo /mes: mismo material a ~0.32×, DEBAJO de la cifra y alineado a su derecha */ .hc-pg-unit{grid-column:2;grid-row:2;justify-self:end;margin-top:-.15em; font-family:var(--head);font-weight:800; font-size:clamp(1.9rem,5.8vw,4.8rem);line-height:1;letter-spacing:-.01em; color:rgba(0,234,140,.08);-webkit-text-stroke:2px rgba(0,234,140,.45)} /* Antes del disparo, las tres piezas apagadas. */ .hc-pg-desde,.hc-pg-amt,.hc-pg-unit{opacity:0} /* Encendido secuencial: primero el "desde" (2.4 s) y se atenúa (3.6 s); después la cifra + /mes (3.3 s), que quedan con el neón fijo. */ .hc-pg-go .hc-pg-desde{animation:hc-pg-on .8s linear 2.4s forwards,hc-pg-dim .8s ease 3.6s forwards} .hc-pg-go .hc-pg-amt,.hc-pg-go .hc-pg-unit{animation:hc-pg-on 1.2s linear 3.3s forwards,hc-pg-glow 1.2s linear 3.3s forwards} @keyframes hc-pg-dim{from{opacity:1}to{opacity:.5}} @keyframes hc-pg-on{ 0%{opacity:0} 10%{opacity:.6}15%{opacity:.1} 30%{opacity:.8}36%{opacity:.15} 50%{opacity:.95}58%{opacity:.3} 70%,100%{opacity:1} } @keyframes hc-pg-glow{ 0%,62%{text-shadow:none} 72%{text-shadow:0 0 34px rgba(0,234,140,.8),0 0 70px rgba(0,234,140,.4)} 100%{text-shadow:0 0 18px rgba(0,234,140,.3)} } @media(max-width:600px){ .hc-pg{bottom:6%} .hc-pg-amt{font-size:clamp(5rem,18vw,15rem);-webkit-text-stroke:2px rgba(0,234,140,.35)} .hc-pg-unit{font-size:clamp(1.6rem,5.8vw,4.8rem);-webkit-text-stroke:2px rgba(0,234,140,.35)} } /* Reduced motion: estado final estático (desde .5, cifra encendida), sin parpadeos. */ @media(prefers-reduced-motion:reduce){ .hc-pg-desde{opacity:.5} .hc-pg-amt,.hc-pg-unit{opacity:1;text-shadow:0 0 18px rgba(0,234,140,.3)} .hc-pg-go .hc-pg-desde,.hc-pg-go .hc-pg-amt,.hc-pg-go .hc-pg-unit{animation:none} } /* ============================================================ STAT STRIP (banda full-width + contadores) Banda oscura de borde a borde (indigo profundo, gradiente de marca) con el contenido alineado al .hc-container. Cifras Saira 800 verde con glow + labels en mayusculas espaciadas. Separadores finos. Contadores animados 0->valor al entrar en viewport (menu.js): easing easeOutExpo, one-shot; el "0" hace un pop con glow en vez de contar. prefers-reduced-motion: valores finales estaticos (ya en el markup). La banda es la
completa (full-bleed nativo, sin negative-margin): el fondo llega de borde a borde y el .hc-container de dentro mantiene el ancho del sitio. ============================================================ */ /* ============================================================ MIGAS DE PAN (.hc-crumbs) Van entre el hero de imagen y la banda de datos, las dos oscuras: sobre fondo blanco quedaban como una franja clara partiendo el bloque en dos. Toman el mismo azul con el que ARRANCA .hc-stat-band, así que hero, migas y banda se leen como una sola pieza y el filo verde de la banda hace de separación. Los colores viven aquí y no en el marcado: antes iban inline en los 324 contenidos, y con `style=` en cada
    ninguna regla podía cambiarlos. ============================================================ */ .hc-crumbs{background:#140f34} .hc-crumbs .hc-container{padding-top:14px;padding-bottom:14px} .hc-crumbs ol{color:rgba(255,255,255,.62)} .hc-crumbs a{color:rgba(255,255,255,.78);text-decoration:none} .hc-crumbs a:hover,.hc-crumbs a:focus-visible{color:#fff;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--green)} /* Página actual: blanco pleno, que es el único elemento que no es enlace. */ .hc-crumbs [aria-current="page"]{color:#fff} .hc-stat-band{ position:relative; padding:clamp(38px,6vw,60px) 0; color:#fff; overflow:hidden; background: radial-gradient(120% 150% at 8% -10%, rgba(0,234,140,.12), transparent 46%), radial-gradient(120% 150% at 100% 115%, rgba(254,100,114,.10), transparent 48%), linear-gradient(115deg,#140f34 0%,#221a56 55%,#2d2270 100%); } /* filo verde fino arriba y abajo: acabado de marca sin recargar */ .hc-stat-band::before, .hc-stat-band::after{ content:"";position:absolute;left:0;right:0;height:2px;pointer-events:none; background:linear-gradient(90deg,transparent,rgba(0,234,140,.65) 22%,rgba(0,234,140,.65) 78%,transparent); } .hc-stat-band::before{top:0} .hc-stat-band::after{bottom:0} .hc-stat-strip{display:grid;grid-template-columns:repeat(2,1fr);gap:0} .hc-stat{ position:relative;text-align:center; padding:clamp(16px,3.2vw,24px) clamp(10px,2.4vw,26px); } /* separadores en movil/tablet (2x2): vertical entre columnas + horizontal entre filas. Scopeado a max-width para que NO se filtren al layout de 4 columnas. El 2x2 llega hasta 1024 (peticion del usuario: en tablet mejor 2x2). */ @media(max-width:1023.98px){ .hc-stat:nth-child(even){border-left:1px solid rgba(255,255,255,.13)} .hc-stat:nth-child(n+3){border-top:1px solid rgba(255,255,255,.13)} } .hc-n{ font-family:var(--head);font-weight:800;line-height:1;letter-spacing:-.02em; font-size:clamp(30px,5.4vw,46px);color:var(--green); font-variant-numeric:tabular-nums;font-feature-settings:"tnum"; text-shadow:0 0 20px rgba(0,234,140,.38),0 0 46px rgba(0,234,140,.16); } .hc-l{ margin-top:10px;font-size:clamp(11px,1.5vw,12.5px);line-height:1.35; letter-spacing:.07em;text-transform:uppercase;color:rgba(255,255,255,.72); } /* pop de un "0" suelto (p.ej. "0 EUR" de coste): escala + glow al entrar */ .hc-n-pop{animation:hc-n-pop .6s cubic-bezier(.2,.8,.25,1) both} @keyframes hc-n-pop{ 0%{opacity:0;transform:scale(.4);text-shadow:none} 60%{opacity:1;transform:scale(1.18);text-shadow:0 0 34px rgba(0,234,140,.8),0 0 70px rgba(0,234,140,.4)} 100%{opacity:1;transform:scale(1);text-shadow:0 0 20px rgba(0,234,140,.38),0 0 46px rgba(0,234,140,.16)} } /* aterrizaje de la cuenta descendente de permanencia (365->0): pulso de glow verde de marca al clavar el "0", asentandose al glow base. Nada estridente. */ .hc-n-land{animation:hc-n-land .8s ease-out both} @keyframes hc-n-land{ 0%{text-shadow:0 0 30px rgba(0,234,140,.85),0 0 64px rgba(0,234,140,.42)} 100%{text-shadow:0 0 20px rgba(0,234,140,.38),0 0 46px rgba(0,234,140,.16)} } /* entrada escalonada de cada stat (solo con JS: .hc-anim oculta, .hc-stats-in revela) */ .hc-stat-strip.hc-anim .hc-stat{opacity:0;transform:translateY(14px)} .hc-stat-strip.hc-stats-in .hc-stat{ opacity:1;transform:none; transition:opacity .5s ease,transform .5s cubic-bezier(.2,.7,.3,1); } .hc-stat-strip.hc-stats-in .hc-stat:nth-child(2){transition-delay:.08s} .hc-stat-strip.hc-stats-in .hc-stat:nth-child(3){transition-delay:.16s} .hc-stat-strip.hc-stats-in .hc-stat:nth-child(4){transition-delay:.24s} @media(min-width:1024px){ .hc-stat-strip{grid-template-columns:repeat(4,1fr)} .hc-stat + .hc-stat{border-left:1px solid rgba(255,255,255,.13)} } @media(prefers-reduced-motion:reduce){ .hc-stat-strip.hc-anim .hc-stat{opacity:1;transform:none} .hc-n-pop,.hc-n-land{animation:none} } /* ---------- Proof card (chart) ---------- */ .hc-proof{padding:24px} .hc-proof .hc-row{display:flex;justify-content:space-between;align-items:baseline} .hc-proof .hc-big{font-family:var(--head);font-weight:800;font-size:34px;color:var(--ink);line-height:1} .hc-chart{width:100%;height:180px;display:block} /* ---------- Lists check/cross ---------- */ .hc-ck{display:flex;flex-direction:column;margin:0;padding:0} .hc-ck li{list-style:none;display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-top:1px solid var(--line-2);font-size:15.5px;line-height:1.45} .hc-ck li:first-child{border-top:none} .hc-ck .hc-ic{width:20px;height:20px;flex:none;margin-top:1px} .hc-ck.hc-on-ink li{border-color:rgba(255,255,255,.12);color:rgba(255,255,255,.9)} /* ---------- Steps ---------- */ .hc-step .hc-num{font-family:var(--head);font-weight:800;font-size:15px;color:var(--green-text)} .hc-step h3{font-size:18px;margin:10px 0 8px} /* ---------- Prices ---------- */ .hc-price-card{position:relative;display:flex;flex-direction:column;height:100%} .hc-price-card .hc-name{font-family:var(--head);font-weight:700;font-size:18px;color:var(--ink)} .hc-price-card .hc-amt{font-family:var(--head);font-weight:800;font-size:34px;color:var(--ink);margin:14px 0 2px;line-height:1} .hc-price-card .hc-unit{font-size:13px;color:var(--faint);margin-bottom:14px} .hc-price-card .hc-desc{font-size:14.5px;line-height:1.5;flex:1;margin-bottom:18px} .hc-price-card .hc-btn{margin-top:auto} .hc-price-card--hot{background:var(--ink);border:none;color:#fff} .hc-price-card--hot .hc-name,.hc-price-card--hot .hc-amt{color:#fff} .hc-price-card--hot .hc-amt{color:var(--green)} .hc-price-card--hot .hc-unit{color:rgba(255,255,255,.6)} .hc-price-card--hot .hc-desc{color:rgba(255,255,255,.82)} .hc-badge{position:absolute;top:18px;right:18px;font-family:var(--text);font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--coral)} /* ---------- Reviews ---------- */ .hc-review .hc-avatar{width:38px;height:38px;border-radius:999px;background:var(--line);flex:none;object-fit:cover} .hc-review .hc-who{display:flex;align-items:center;gap:11px;font-size:13.5px;color:var(--faint)} .hc-stars{display:inline-flex;gap:2px} .hc-stars svg{width:15px;height:15px;fill:var(--coral)} /* ---------- Quote band ---------- */ .hc-quote{font-family:var(--head);font-weight:600;font-size:clamp(22px,3.6vw,32px);line-height:1.25;color:var(--ink);letter-spacing:-.01em;text-wrap:balance} .hc-ink .hc-quote{color:#fff} /* ---------- FAQ ---------- */ .hc-faq details{border-top:1px solid var(--line);padding:6px 0} .hc-faq details:last-child{border-bottom:1px solid var(--line)} .hc-faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px; font-family:var(--head);font-weight:700;font-size:18px;color:var(--ink);padding:18px 0} .hc-faq summary::-webkit-details-marker{display:none} .hc-faq summary .hc-pm{width:26px;height:26px;flex:none;border-radius:50%;border:2px solid var(--ink);position:relative;transition:.2s} .hc-faq summary .hc-pm::before,.hc-faq summary .hc-pm::after{content:"";position:absolute;background:var(--ink);border-radius:2px;top:50%;left:50%;transform:translate(-50%,-50%)} .hc-faq summary .hc-pm::before{width:11px;height:2px} .hc-faq summary .hc-pm::after{width:2px;height:11px;transition:.2s} .hc-faq details[open] summary .hc-pm{background:var(--green);border-color:var(--green)} .hc-faq details[open] summary .hc-pm::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0} .hc-faq .hc-ans{padding:0 0 20px;font-size:15.5px;line-height:1.6;color:var(--body);max-width:70ch} /* ---------- Forms (referencia; el formulario real no se toca) ---------- */ .hc-form{display:grid;gap:16px} .hc-field{display:flex;flex-direction:column;gap:7px} .hc-field label{font-family:var(--head);font-weight:600;font-size:14px;color:var(--ink)} .hc-field input,.hc-field textarea,.hc-field select{font-family:var(--text);font-size:15px;color:var(--ink);background:#fff; border:1.5px solid var(--line);border-radius:12px;padding:13px 15px;width:100%;transition:border-color .15s,box-shadow .15s} .hc-field input:focus,.hc-field textarea:focus,.hc-field select:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 4px rgba(0,234,140,.18)} .hc-field textarea{min-height:130px;resize:vertical} .hc-field-note{font-size:12.5px;line-height:1.45;color:var(--faint);margin:-4px 0 0} /* ---------- Información por capas (RGPD) ---------- Primera capa: junto al botón de envío, SIEMPRE visible y nunca dentro de un desplegable cerrado. La genera hc_form_legal() (includes/legal.php). */ .hc-legal1{background:var(--soft);border:1px solid var(--line);border-radius:14px;padding:14px 16px} .hc-legal1__t{display:flex;align-items:center;gap:8px;font-family:var(--head);font-weight:700;font-size:13.5px;color:var(--ink);margin:0 0 10px} .hc-legal1__t .hc-ic{color:var(--green-text)} .hc-legal1__dl{margin:0;display:grid;gap:7px} .hc-legal1__row{display:grid;grid-template-columns:104px 1fr;gap:10px;font-size:12.5px;line-height:1.5} .hc-legal1__row dt{font-family:var(--head);font-weight:700;color:var(--ink)} .hc-legal1__row dd{margin:0;color:var(--body)} .hc-legal1 a{color:var(--ink);font-weight:700;text-decoration:underline} .hc-legal1--mini{background:rgba(255,255,255,.92);padding:12px 14px;margin-top:14px} .hc-legal1--mini p{font-size:12.5px;line-height:1.55;color:var(--body);margin:0} /* Sobre el hero de imagen (herramientas): panel translúcido oscuro, no un recuadro blanco que rompa la foto. Sigue siendo legible y siempre visible. */ .hc-hero--img .hc-legal1--mini{background:rgba(20,15,52,.46);border-color:rgba(255,255,255,.24);max-width:560px} .hc-hero--img .hc-legal1--mini p{color:rgba(255,255,255,.86)} .hc-hero--img .hc-legal1--mini a,.hc-hero--img .hc-legal1--mini strong{color:#fff} /* Casilla de marketing: separada, opcional y sin premarcar (art. 21 LSSI). */ .hc-legal-check{display:flex;gap:10px;align-items:flex-start;font-size:12.5px;line-height:1.5;color:var(--body)} .hc-legal-check input{margin-top:3px;flex:none} /* Dato del titular aún no facilitado: se ve, no se esconde. */ .hc-legal-todo{color:var(--coral-text);font-weight:700} .hc-legal-link{color:var(--ink);font-weight:700} /* Tabla de cookies de las páginas legales: scroll propio, nunca desborda la página. */ .hc-legal-table{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:14px 0 6px;border:1px solid var(--line);border-radius:14px} .hc-legal-table table{border-collapse:collapse;width:100%;min-width:640px;font-size:13.5px;line-height:1.5} .hc-legal-table th,.hc-legal-table td{text-align:left;vertical-align:top;padding:10px 12px;border-bottom:1px solid var(--line)} .hc-legal-table thead th{font-family:var(--head);font-weight:700;font-size:13px;color:var(--ink);background:var(--soft);white-space:nowrap} .hc-legal-table tbody tr:last-child td{border-bottom:0} .hc-legal-table code{font-family:var(--text);font-weight:700;color:var(--ink);background:var(--soft);border-radius:6px;padding:1px 5px} /* Nota fiscal junto a los precios (art. 10 LSSI): discreta, nunca protagonista. */ .hc-vat{font-family:var(--text);font-weight:400;font-size:13px;line-height:1;color:var(--faint);margin-left:5px;white-space:nowrap;vertical-align:middle} .hc-price-card--hot .hc-vat{color:rgba(255,255,255,.72)} .hc-hero--img .hc-vat,.hc-band-ink .hc-vat,.hc-ink .hc-vat{color:rgba(255,255,255,.72)} /* ---------- Bits ---------- */ .hc-pill{display:inline-flex;align-items:center;gap:8px;font-family:var(--text);font-size:13px;color:var(--ink); background:#fff;border:1px solid var(--line);border-radius:999px;padding:7px 14px} .hc-pill .hc-dot{width:7px;height:7px;border-radius:50%;background:var(--green)} .hc-divider{height:1px;background:var(--line);border:0;margin:0} .hc-tag{font-family:var(--text);font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--faint)} .hc-kicker-band{padding:16px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .hc-kicker-band .hc-container{display:flex;flex-wrap:wrap;gap:10px 26px;font-family:var(--head);font-weight:600;color:var(--ink);font-size:15px} .hc-kicker-band .hc-container span{display:inline-flex;align-items:center;gap:10px} .hc-kicker-band b{color:var(--coral)} /* ============================================================ RESPONSIVE — desktop up ============================================================ */ @media(min-width:720px){ .hc-g2{grid-template-columns:1fr 1fr} .hc-g3{grid-template-columns:repeat(3,1fr)} .hc-g4{grid-template-columns:repeat(2,1fr)} } @media(min-width:940px){ .hc-section{padding:88px 0} .hc-section--tight{padding:60px 0} .hc-hero{padding:70px 0 84px} .hc-hero-grid{grid-template-columns:1.2fr .8fr;gap:48px} .hc-hero-grid.hc-even{grid-template-columns:1fr 1fr} .hc-g4{grid-template-columns:repeat(4,1fr)} .hc-container{padding:0 32px} .hc-split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center} .hc-split--wide{grid-template-columns:1.1fr .9fr} } /* ============================================================ ACCESIBILIDAD (WCAG 2.1 AA) 1) Astra cambia el color de TODOS los enlaces en :hover al color global 0 (coral) -> rompe el contraste de botones y enlaces. Bloqueamos el hover dentro del sistema Heracode. 2) Indicador de foco visible para teclado (2.4.7). ============================================================ */ .hc a:not(.hc-btn):hover,.hc a:not(.hc-btn):focus{color:inherit} .hc-footer-col a:hover,.hc-footer-col a:focus{color:var(--green)} /* sobre indigo: 8.4:1 */ .hc a.hc-btn--ink:hover,.hc a.hc-btn--ink:focus{color:#fff} .hc a.hc-btn--green:hover,.hc a.hc-btn--green:focus{color:var(--ink)} .hc a.hc-btn--outline:hover,.hc a.hc-btn--outline:focus{color:var(--ink)} .hc a.hc-btn--outline-light:hover,.hc a.hc-btn--outline-light:focus{background:#fff;color:var(--ink);border-color:#fff} .hc-nav-links li>a:hover,.hc-nav-links li>a:focus{color:var(--ink)} .hc .hc-green:hover{color:var(--green-text)} /* EXCEPCIÓN (fix raíz "hover apagado"): --green-text (#00794f) es correcto para texto verde sobre fondos CLAROS del body, pero dentro de los heros oscuros (.hc-hero--img) oscurecía el tramo al pasar el ratón. En heros manda el brillo (el tramo del titular además ILUMINA — ver HERO KALAM HIGHLIGHT). */ .hc-hero--img .hc-green:hover{color:var(--green)} /* Foco visible (teclado) en todo el sistema */ .hc a:focus-visible,.hc button:focus-visible,.hc summary:focus-visible, .hc input:focus-visible,.hc select:focus-visible,.hc textarea:focus-visible{ outline:3px solid var(--green-text);outline-offset:2px;border-radius:6px} .hc-ink a:focus-visible,.hc-site-footer a:focus-visible,.hc-stat-strip a:focus-visible{ outline-color:var(--green)} /* Sólo para lectores de pantalla: da estructura semántica (p.ej. encabezado de sección) sin alterar el diseño visual. */ .hc-sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} /* Enlace "Saltar al contenido": oculto fuera de pantalla (inline left:-9999px) pero visible cuando recibe foco por teclado. */ .hc-skip:focus{left:12px!important;top:12px!important;outline:3px solid var(--green-text);outline-offset:2px} /* ============================================================ NAVEGACION (menu de WordPress dentro del header Heracode) ============================================================ */ .hc-nav-links ul.hc-menu{display:flex;align-items:center;gap:14px;list-style:none;margin:0;padding:0} .hc-nav-links li{position:relative;list-style:none} .hc-nav-links li>a{display:inline-flex;align-items:center;font-family:var(--head);font-weight:600;font-size:15px;color:var(--ink);padding:9px 12px;border-radius:9px;transition:background .15s} .hc-nav-links li>a:hover{background:var(--soft)} .hc-nav-links li.current-menu-item>a,.hc-nav-links li.current-menu-ancestor>a{background:rgba(0,234,140,.16)} .hc-nav-links .menu-item-has-children>a::after{content:"▾";font-size:10px;margin-left:6px;color:var(--faint)} .hc-nav-links .sub-menu{position:absolute;top:100%;left:0;min-width:240px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-lg);padding:8px;display:flex;flex-direction:column;gap:2px;z-index:110;margin:6px 0 0; opacity:0;visibility:hidden;transform:translateY(6px); transition:opacity .16s ease,transform .16s ease,visibility 0s linear .22s} /* Puente invisible que cubre el hueco de 6px entre el
  1. y el submenú: sin él, al bajar el ratón se sale del área :hover y el desplegable se cierra antes de llegar. El ::before es descendiente del
  2. , así que mantiene el hover. */ .hc-nav-links .sub-menu::before{content:"";position:absolute;left:0;right:0;top:-10px;height:12px} .hc-nav-links li:hover>.sub-menu,.hc-nav-links li:focus-within>.sub-menu{ opacity:1;visibility:visible;transform:none; transition:opacity .16s ease,transform .16s ease,visibility 0s} .hc-nav-links .sub-menu li{width:100%} .hc-nav-links .sub-menu a{display:block;font-weight:600;font-size:14px;padding:10px 12px;border-radius:9px;width:100%} /* Encabezado de familia dentro del desplegable (no clicable) */ .hc-nav-links .sub-menu .hc-menu-group{pointer-events:none;padding:9px 12px 3px} .hc-nav-links .sub-menu .hc-menu-group span{display:block;font-family:var(--head);font-weight:700;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)} .hc-nav-links .sub-menu .hc-menu-group:not(:first-child){margin-top:5px;border-top:1px solid var(--line);padding-top:11px} .hc-btn--nav{display:none} /* Hamburguesa */ .hc-hamburger{display:inline-flex;flex-direction:column;gap:4px;width:42px;height:42px;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:11px;background:#fff;cursor:pointer;padding:0} .hc-hamburger span{width:18px;height:2px;background:var(--ink);border-radius:2px;transition:.2s} .hc-hamburger.is-open span:nth-child(1){transform:translateY(6px) rotate(45deg)} .hc-hamburger.is-open span:nth-child(2){opacity:0} .hc-hamburger.is-open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)} /* Menu movil */ .hc-mobile-menu{display:none;border-top:1px solid var(--line-2);background:#fff;padding:14px 0 22px;max-height:calc(100vh - 72px);overflow:auto} .hc-mobile-menu.open{display:block} .hc-mobile-menu ul.hc-menu{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px} .hc-mobile-menu li{list-style:none} .hc-mobile-menu li>a{display:block;font-family:var(--head);font-weight:600;font-size:17px;color:var(--ink);padding:13px 6px;border-bottom:1px solid var(--line-2)} .hc-mobile-menu .sub-menu{list-style:none;margin:0;padding:0 0 0 18px;display:none} .hc-mobile-menu li.open>.sub-menu{display:block} .hc-mobile-menu .sub-menu a{font-size:15px;color:var(--body);border-bottom:none;padding:10px 6px} .hc-mobile-menu .sub-menu .hc-menu-group{padding:9px 6px 3px} .hc-mobile-menu .sub-menu .hc-menu-group span{display:block;font-family:var(--head);font-weight:700;font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--faint)} .hc-mobile-menu .sub-menu .hc-menu-group:not(:first-child){margin-top:4px;border-top:1px solid var(--line-2);padding-top:10px} @media(min-width:940px){ .hc-btn--nav{display:inline-flex} .hc-hamburger{display:none} .hc-mobile-menu{display:none!important} } /* ============================================================ HEADER / FOOTER del rediseno (chrome del mockup) ============================================================ */ .hc-site-header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--line-2)} .hc-nav{display:flex;align-items:center;justify-content:space-between;gap:18px;height:72px} .hc-logo{display:inline-flex;align-items:center;flex:none} .hc-logo img{height:34px;width:auto;display:block;flex:none} .hc-nav-links{display:none;align-items:center;gap:4px;font-family:var(--head);font-weight:400;font-size:15px} .hc-nav-links a{color:var(--ink);padding:9px 12px;border-radius:9px} .hc-nav-links a:hover{background:var(--soft)} .hc-nav-right{display:flex;align-items:center;gap:14px} .hc-nav-phone{display:none;font-family:var(--head);font-weight:700;color:var(--ink);font-size:15px;white-space:nowrap} .hc-site-footer{background:var(--ink-2);color:rgba(255,255,255,.62);padding:54px 0 26px;font-size:14px} .hc-footer-top{display:grid;gap:30px;grid-template-columns:1fr;padding-bottom:34px;border-bottom:1px solid rgba(255,255,255,.12)} .hc-footer-brand img{height:34px;margin-bottom:14px} .hc-footer-brand .hc-lead{color:rgba(255,255,255,.66);font-size:15px;max-width:42ch} .hc-footer-col h4,.hc-footer-col .hc-footer-col-title{color:#fff;font-size:14px;letter-spacing:.12em;text-transform:uppercase;font-family:var(--text);font-weight:700;margin-bottom:14px} .hc-footer-col a{display:block;padding:6px 0;color:rgba(255,255,255,.66)} .hc-footer-col a:hover{color:var(--green)} .hc-footer-bottom{display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:center;padding-top:22px;font-size:12.5px;color:rgba(255,255,255,.5)} .hc-footer-bottom .hc-links{display:flex;gap:18px;flex-wrap:wrap} /* ---------- Alta en la newsletter (pie) ---------- Sobre el índigo del pie. Nada premarcado, nada oculto tras un desplegable: la primera capa de información va a la vista, en pequeño pero legible (rgba(255,255,255,.62) sobre #1f1850 ≈ 6,3:1, por encima de AA). */ .hc-nl{display:grid;gap:22px;padding:30px 0 6px;border-bottom:1px solid rgba(255,255,255,.12)} .hc-nl__t{color:#fff;font-family:var(--head);font-weight:700;font-size:20px;line-height:1.25;margin:0} .hc-nl__d{color:rgba(255,255,255,.66);font-size:14.5px;margin:8px 0 0;max-width:46ch} .hc-nl__form{display:grid;gap:14px;max-width:640px} .hc-nl__lab{display:block;color:#fff;font-family:var(--head);font-weight:600;font-size:14px;margin-bottom:8px} .hc-nl__send{display:flex;gap:10px;flex-wrap:wrap} .hc-nl__input{ flex:1 1 240px;min-width:0;font-family:var(--text);font-size:15px;color:var(--ink); background:#fff;border:1px solid transparent;border-radius:12px;padding:13px 15px; } .hc-nl__input::placeholder{color:#8a86a3} .hc-nl__input:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 4px rgba(0,234,140,.28)} .hc-nl__send .hc-btn{flex:0 0 auto} .hc-nl__lists{border:0;margin:0;padding:0;display:grid;gap:8px} .hc-nl__lists legend{padding:0;color:rgba(255,255,255,.72);font-size:13.5px;margin-bottom:4px} .hc-nl__check{display:flex;gap:10px;align-items:flex-start;color:rgba(255,255,255,.72);font-size:13.5px;line-height:1.5;cursor:pointer} .hc-nl__check input{margin:2px 0 0;flex:none;width:17px;height:17px;accent-color:#00ea8c;cursor:pointer} .hc-nl__consent{ color:rgba(255,255,255,.82);background:rgba(255,255,255,.06); border-radius:12px;padding:12px 14px;font-size:13.5px; } .hc-nl__legal{color:rgba(255,255,255,.62);font-size:11.5px;line-height:1.6;margin:0} .hc-nl__legal strong{color:rgba(255,255,255,.8);font-weight:700} .hc-nl__legal a{color:var(--green);text-decoration:underline} /* Aviso de resultado: vacío no ocupa sitio (no hay hueco reservado en blanco) */ .hc-nl__msg{margin:0;font-size:14px;line-height:1.5;color:#fff} .hc-nl__msg:empty{display:none} .hc-nl__msg.is-ok{color:#8ef7c8} .hc-nl__msg.is-err{color:#ffb3bb} /* Honeypot: fuera de la vista y del foco, pero presente para los bots */ .hc-nl__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} @media(min-width:720px){ .hc-footer-top{grid-template-columns:1.5fr 1fr 1fr 1fr} .hc-nl{grid-template-columns:1fr 1.2fr;gap:34px;align-items:start;padding:34px 0 10px} } @media(min-width:940px){ .hc-nav-links{display:flex} .hc-nav-phone{display:inline-block} } /* utilidades del rediseño (sin dependencias WordPress) */ .hc-stroke{color:var(--green);-webkit-text-stroke:1px var(--ink)} .hc-eyebrow+h1{margin-top:18px} .hc-g2>.hc-card{padding:34px} .hc-icon-sq img{width:24px;height:24px} .hc-ink .hc-section-title,.hc-ink h2{color:#fff} /* Color de texto de botones-enlace (gana a .hc a{color:inherit}) */ .hc a.hc-btn--green,.hc a.hc-btn--outline{color:var(--ink)} .hc a.hc-btn--ink,.hc a.hc-btn--outline-light{color:#fff} /* ---------- Imágenes (rediseño limpio) ---------- */ .hc-media{border-radius:var(--r);overflow:hidden;display:block;width:100%;box-shadow:var(--shadow-lg)} .hc-media img{width:100%;height:auto;display:block} .hc-shot{border-radius:14px;border:1px solid var(--line);box-shadow:var(--shadow-lg);width:100%;height:auto;display:block} .hc-figure{margin:0;display:flex;flex-direction:column;gap:10px} .hc-figure figcaption{font-size:13px;color:var(--faint);text-align:center} .hc-figure--tag figcaption{font-family:var(--text);font-weight:700;letter-spacing:.16em;text-transform:uppercase;font-size:12px} .hc-avatar-img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;border-radius:var(--r);display:block} .hc-hero-media{border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-lg);width:100%} .hc-hero-media img{width:100%;height:auto;display:block} /* ---------- WhatsApp flotante + aviso de cookies ---------- */ .hc-wa-region{position:fixed;left:18px;bottom:18px;z-index:1200;display:flex;align-items:center;gap:10px} .hc-wa{width:54px;height:54px;border-radius:50%;background:#25D366;color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px rgba(37,211,102,.45);transition:transform .15s} .hc-wa:hover{transform:scale(1.07)} /* ---------- Aviso de cookies conforme (AEPD) ---------- REGLA DE DISEÑO INNEGOCIABLE: los tres botones (Rechazar · Configurar · Aceptar) comparten EXACTAMENTE la misma regla .hc-cc__btn — mismo relleno, mismo borde, mismo color, mismo tamaño, mismo peso. Ninguno lleva el verde de marca ni ningún realce: destacar «Aceptar» invalidaría el consentimiento. Si alguien añade aquí un modificador para uno solo de ellos, está rompiendo el cumplimiento, no el diseño. `position:fixed` + `[hidden]` desde el servidor ⇒ CLS cero. */ .hc-cc{position:fixed;right:18px;bottom:18px;z-index:1300;width:min(420px,calc(100vw - 36px));background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 18px 50px rgba(31,24,80,.22);padding:18px 18px 16px} .hc-cc[hidden]{display:none} .hc-cc__t{font-family:var(--head);font-weight:700;font-size:16px;color:var(--ink);margin:0 0 8px} .hc-cc__body p{font-size:13px;line-height:1.5;color:var(--body);margin:0 0 8px} .hc-cc__body p:last-child{margin-bottom:0} .hc-cc__body a{color:var(--ink);font-weight:700;text-decoration:underline} .hc-cc__btns{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px} .hc-cc__btn{display:block;width:100%;padding:10px 6px;font-family:var(--head);font-weight:600;font-size:13.5px;line-height:1.2;text-align:center;color:var(--ink);background:#fff;border:1.5px solid var(--ink);border-radius:999px;cursor:pointer;transition:background .15s,color .15s} .hc-cc__btn:hover{background:var(--ink);color:#fff} .hc-cc__btn:focus-visible{outline:3px solid var(--green);outline-offset:2px} /* Panel granular «Configurar» (lo inyecta assets/js/cookies.js) */ .hc-ccp[hidden]{display:none} .hc-ccp__back{position:fixed;inset:0;z-index:1400;background:rgba(20,15,52,.5)} .hc-ccp__box{position:fixed;z-index:1401;left:50%;top:50%;transform:translate(-50%,-50%);width:min(620px,calc(100vw - 28px));max-height:min(86vh,760px);display:flex;flex-direction:column;background:#fff;border-radius:18px;box-shadow:0 30px 80px rgba(31,24,80,.35);overflow:hidden} .hc-ccp__head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:20px 22px 12px;border-bottom:1px solid var(--line)} .hc-ccp__head h2{font-family:var(--head);font-weight:800;font-size:20px;color:var(--ink);margin:0} .hc-ccp__x{background:none;border:0;font-size:26px;line-height:1;color:var(--faint);cursor:pointer;padding:0 4px} .hc-ccp__x:focus-visible{outline:3px solid var(--green);outline-offset:2px} .hc-ccp__scroll{overflow-y:auto;padding:16px 22px 4px} .hc-ccp__intro{font-size:13.5px;line-height:1.55;color:var(--body);margin:0 0 16px} .hc-ccp__blk{border-top:1px solid var(--line);padding:14px 0} .hc-ccp__blk:first-of-type{border-top:0;padding-top:0} .hc-ccp__blk p{font-size:13px;line-height:1.55;color:var(--body);margin:8px 0 0} .hc-ccp__blk a{color:var(--ink);font-weight:700;text-decoration:underline} .hc-ccp__blkhead{display:flex;align-items:center;justify-content:space-between;gap:14px} .hc-ccp__blkhead h3{font-family:var(--head);font-weight:700;font-size:15px;color:var(--ink);margin:0} .hc-ccp__tag{flex:none;font-size:11.5px;font-weight:700;color:var(--faint);background:var(--soft);border:1px solid var(--line);border-radius:999px;padding:4px 10px} /* Interruptor: checkbox real (accesible) con pista dibujada. Nace APAGADO. */ .hc-ccp__sw{cursor:pointer} .hc-ccp__sw input{position:absolute;opacity:0;width:1px;height:1px} .hc-ccp__track{flex:none;position:relative;width:46px;height:26px;border-radius:999px;background:#d8d4e8;transition:background .18s} .hc-ccp__track::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(31,24,80,.35);transition:transform .18s} .hc-ccp__sw input:checked ~ .hc-ccp__track{background:var(--green-text)} .hc-ccp__sw input:checked ~ .hc-ccp__track::after{transform:translateX(20px)} .hc-ccp__sw input:focus-visible ~ .hc-ccp__track{outline:3px solid var(--green);outline-offset:2px} .hc-ccp__btns{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:14px 22px 18px;border-top:1px solid var(--line);background:#fff} html.hc-ccp-open{overflow:hidden} @media(prefers-reduced-motion:reduce){.hc-cc__btn,.hc-ccp__track,.hc-ccp__track::after{transition:none}} @media(max-width:560px){ /* En móvil el aviso no puede comerse la pantalla: el cuerpo tiene su propio scroll y los tres botones siguen EN LA MISMA FILA. Repartirlos en tres filas apiladas daría posición privilegiada al último y eso es justo lo que la guía prohíbe. */ .hc-cc{left:12px;right:12px;width:auto;padding:14px 14px 12px;max-height:66vh;display:flex;flex-direction:column} .hc-cc__body{overflow-y:auto;-webkit-overflow-scrolling:touch;min-height:0} .hc-cc__body p{font-size:12.5px} .hc-cc__btns{margin-top:12px;gap:6px} .hc-cc__btn{padding:10px 2px;font-size:12.5px} .hc-ccp__btns{grid-template-columns:1fr} .hc-ccp__box{width:calc(100vw - 20px);max-height:88vh} } /* Imagen de hero: bloque consistente y prominente (evita que se vea pequeña) */ .hc-hero-media img{aspect-ratio:4/3;object-fit:cover} @media(min-width:940px){.hc-hero-media img{aspect-ratio:5/4}} /* ============================================================ HERO ESPECTACULAR — imagen full-bleed de fondo + overlay WCAG (.hc-hero--img). La imagen es el LCP: real con object-fit:cover (fetchpriority=high, sin lazy) para SEO de imagen y buen LCP. El overlay índigo (rgb 20,15,52) garantiza contraste >=4.5:1 sobre texto blanco en la zona del copy — VERIFICADO por muestreo GD (php tools/verify-hero-contrast.php): mín 4.98:1 desktop, 8.80:1 móvil. Los valores de alpha del overlay de abajo son EXACTAMENTE los verificados; no tocar sin re-verificar. ============================================================ */ /* Altura: llena la pantalla dejando asomar el borde de la siguiente sección. svh = altura visible real en móvil (barra de URL); el min() con (100svh - 72px de header sticky) evita que el hero + header desborden una pantalla. Unificado para todas las páginas de hero-imagen (home incluida). */ .hc-hero--img{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center; background:var(--ink);color:#fff;padding:92px 0 100px; min-height:82vh;min-height:min(92svh, calc(100svh - 72px))} .hc-hero-bg{position:absolute;inset:0;z-index:0} .hc-hero-bg img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;border-radius:0;box-shadow:none} /* Overlay doble del MISMO color: horizontal (denso sobre la banda de texto, izquierda) + vertical (oscurece cabecera y pie -> legibilidad + profundidad). */ .hc-hero-bg::after{content:"";position:absolute;inset:0;z-index:1;background: linear-gradient(90deg, rgba(20,15,52,.95) 0%, rgba(20,15,52,.92) 30%, rgba(20,15,52,.88) 50%, rgba(20,15,52,.82) 65%, rgba(20,15,52,.58) 82%, rgba(20,15,52,.40) 100%), linear-gradient(180deg, rgba(20,15,52,.34) 0%, rgba(20,15,52,0) 22%, rgba(20,15,52,0) 66%, rgba(20,15,52,.58) 100%)} /* Variante centrada (presupuesto): overlay vertical simétrico. */ .hc-hero--img.hc-hero--center .hc-hero-bg::after{background: linear-gradient(180deg, rgba(20,15,52,.93) 0%, rgba(20,15,52,.88) 48%, rgba(20,15,52,.66) 78%, rgba(20,15,52,.70) 100%)} .hc-hero--img .hc-container{position:relative;z-index:2} .hc-hero--img .hc-hero-copy{max-width:640px} .hc-hero--img.hc-hero--center .hc-hero-copy{max-width:none} /* Texto sobre el overlay oscuro */ .hc-hero--img h1,.hc-hero--img h2,.hc-hero--img h3{color:#fff} .hc-hero--img .hc-eyebrow{color:var(--green)} /* verde de marca 8.4:1 sobre índigo */ .hc-hero--img .hc-eyebrow--coral{color:var(--coral)} .hc-hero--img .hc-green{color:var(--green)} .hc-hero--img .hc-lead{color:rgba(255,255,255,.86)} .hc-hero--img .hc-lead b,.hc-hero--img .hc-lead strong{color:#fff} .hc-hero--img .hc-muted{color:rgba(255,255,255,.72)} .hc-hero--img .hc-ck{color:rgba(255,255,255,.92)} .hc-hero--img .hc-ck li{border-color:rgba(255,255,255,.14)} /* excepcion: checklists DENTRO de tarjetas blancas del hero vuelven a texto oscuro (bug texto invisible) */ .hc-hero--img .hc-card .hc-ck{color:var(--body)} .hc-hero--img .hc-card .hc-ck li{border-color:var(--line)} .hc-hero--img .hc-ck .hc-ic path{stroke:var(--green)} /* checks visibles sobre oscuro (gana al attr inline) */ /* excepcion: tarjetas de servicio (vias de contacto) DENTRO del hero-img vuelven a texto oscuro (mismo bug de herencia blanca) */ .hc-hero--img .hc-service-card{color:var(--body)} .hc-hero--img .hc-service-card h3{color:var(--ink)} /* Vías de contacto DENTRO del hero (presupuesto): paneles glass oscuros que encajan con el hero, texto claro y el enlace con aspecto de botón. Sustituye el look de tarjeta blanca (que además causaba texto blanco-sobre-blanco al hacer hover). */ .hc-hero-vias .hc-service-card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 24px 50px -30px rgba(0,0,0,.55);color:rgba(255,255,255,.78);transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease} .hc-hero-vias .hc-service-card:hover{border-color:rgba(0,234,140,.5);transform:translateY(-3px);box-shadow:0 26px 54px -24px rgba(0,0,0,.65),0 0 26px rgba(0,234,140,.14)} .hc-hero-vias .hc-service-card h3{color:#fff} .hc-hero-vias .hc-service-card p{color:rgba(255,255,255,.72)} .hc-hero-vias .hc-card-link{align-self:flex-start;padding:9px 15px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.24);color:#fff;transition:background-color .18s ease,border-color .18s ease,color .18s ease} .hc-hero-vias .hc-service-card:hover .hc-card-link{background:var(--green);border-color:var(--green);color:var(--ink)} /* CTA secundario: outline claro sobre oscuro (el primario verde se mantiene dominante) */ .hc-hero--img a.hc-btn--outline,.hc-hero--img .hc-btn--outline{color:#fff;border-color:rgba(255,255,255,.8);background:rgba(255,255,255,.14)} .hc-hero--img a.hc-btn--outline:hover,.hc-hero--img a.hc-btn--outline:focus{color:var(--ink);background:#fff;border-color:#fff} /* Indicador de scroll (TODAS las páginas con hero de imagen; inyectado por render.php). Clicable (ancla a la sección siguiente), decorativo y fuera del tab order (no roba foco), se congela con prefers-reduced-motion. */ .hc-scrollcue{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);z-index:3; display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:50%; color:rgba(255,255,255,.72);background:rgba(20,15,52,.28);text-decoration:none;cursor:pointer; animation:hc-bob 1.9s ease-in-out infinite;-webkit-tap-highlight-color:transparent} .hc-scrollcue svg{width:22px;height:22px;display:block} .hc-scrollcue:hover,.hc-scrollcue:focus-visible{color:#fff;background:rgba(20,15,52,.5)} @keyframes hc-bob{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(6px)}} @media(prefers-reduced-motion:reduce){.hc-scrollcue{animation:none}} /* Ancla de destino del cue: zero-height, con offset del header sticky (72px). */ .hc-scroll-anchor{display:block;height:0;visibility:hidden;scroll-margin-top:72px} html{scroll-behavior:smooth} @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}} /* Móvil: alturas menores + overlay uniforme (texto a ancho completo, imagen 960w) */ @media(max-width:939px){ .hc-hero--img{min-height:74vh;min-height:min(90svh, calc(100svh - 72px));padding:54px 0 62px} .hc-hero--img .hc-hero-grid{grid-template-columns:1fr} .hc-hero--img .hc-hero-copy{max-width:none} .hc-hero-bg::after,.hc-hero--img.hc-hero--center .hc-hero-bg::after{background: linear-gradient(180deg, rgba(20,15,52,.82) 0%, rgba(20,15,52,.74) 45%, rgba(20,15,52,.82) 100%)} } /* ============================================================ HERO KALAM HIGHLIGHT — tramo destacado del titular de los heros. Decisión del usuario (opción 7 de /muestra-fuentes-hero/, 2026-07): el tramo verde (o coral) del .hc-hero-big pasa a Kalam 700 manuscrita con "pasada de marcador" translúcida detrás y hover que ILUMINA. Baseline: font-size en em sobre el span => comparte baseline con la Saira base de la frase; el line-height unitless (1.05) escala solo las líneas del tramo. inline-block: permite el pseudo-highlight y envuelve su texto internamente (max-width evita desbordes en móvil). El punto final va DENTRO del span (convención) y hereda el tratamiento. El pseudo va a z-index:-1 -> jamás tapa el texto. ============================================================ */ .hc-hero--img .hc-hero-big .hc-green, .hc-hero--img .hc-hero-big .hc-coral{ font-family:'Kalam',var(--head); font-weight:700; font-size:1.3em; letter-spacing:normal; display:inline-block;max-width:100%; position:relative;z-index:0; padding:0 .16em;margin:0 -.16em; transition:color .2s ease,text-shadow .2s ease; } .hc-hero--img .hc-hero-big .hc-green::before, .hc-hero--img .hc-hero-big .hc-coral::before{ content:"";position:absolute;z-index:-1; inset:.14em -.1em .04em -.1em; transform:rotate(-1.2deg) skewX(-8deg); border-radius:.35em .55em .4em .6em; transition:background-color .2s ease; } .hc-hero--img .hc-hero-big .hc-green::before{background:rgba(0,234,140,.19)} .hc-hero--img .hc-hero-big .hc-coral::before{background:rgba(254,100,114,.19)} /* Hover: ilumina (verde/coral más luminosos + marcador más intenso + glow) */ .hc-hero--img .hc-hero-big .hc-green:hover{color:#33ffa8;text-shadow:0 2px 16px rgba(0,234,140,.45)} .hc-hero--img .hc-hero-big .hc-coral:hover{color:#ff8b96;text-shadow:0 2px 16px rgba(254,100,114,.45)} @media(prefers-reduced-motion:reduce){ .hc-hero--img .hc-hero-big .hc-green, .hc-hero--img .hc-hero-big .hc-coral, .hc-hero--img .hc-hero-big .hc-green::before, .hc-hero--img .hc-hero-big .hc-coral::before{transition:none} } /* Móvil: tamaño algo más contenido (frases de 2-3 líneas a 390px) */ @media(max-width:600px){ .hc-hero--img .hc-hero-big .hc-green, .hc-hero--img .hc-hero-big .hc-coral{font-size:1.2em} } /* ------------------------------------------------------------ HERO KALAM NEON — encendido tipo neón del tramo del titular. menu.js añade .hc-neon-on ~2 s tras la carga completa (load). Secuencia (2 s, una vez): apagón breve -> intento solitario (100 ms) -> pausa apagada (~460 ms) -> 3 parpadeos IRREGULARES (80/60/160 ms, el 2º a medio brillo) -> encendido definitivo. El estado final vive en reglas ESTÁTICAS idénticas al 100% del keyframe (sin fill-mode): al acabar la animación mandan ellas y el hover puede seguir intensificando. Glow en 3 capas = tubo: núcleo corto intenso + halo medio + halo amplio suave. Solo se animan color/text-shadow/background-color (cero layout). Antes del disparo el tramo se ve en su verde normal (sin JS la página queda exactamente como estaba). ------------------------------------------------------------ */ .hc-hero--img .hc-hero-big .hc-green.hc-neon-on{ color:#33ffa8; text-shadow:0 0 4px rgba(51,255,168,.9),0 0 18px rgba(0,234,140,.55),0 2px 34px rgba(0,234,140,.35); animation:hc-neon-g 2s linear 1; } .hc-hero--img .hc-hero-big .hc-green.hc-neon-on::before{ background:rgba(0,234,140,.19); animation:hc-neon-g-hl 2s linear 1; } .hc-hero--img .hc-hero-big .hc-coral.hc-neon-on{ color:#ff8b96; text-shadow:0 0 4px rgba(255,139,150,.9),0 0 18px rgba(254,100,114,.55),0 2px 34px rgba(254,100,114,.35); animation:hc-neon-c 2s linear 1; } .hc-hero--img .hc-hero-big .hc-coral.hc-neon-on::before{ background:rgba(254,100,114,.19); animation:hc-neon-c-hl 2s linear 1; } /* Hover tras el encendido: un punto más de brillo todavía */ .hc-hero--img .hc-hero-big .hc-green.hc-neon-on:hover{ color:#66ffc2; text-shadow:0 0 6px rgba(102,255,194,.95),0 0 24px rgba(0,234,140,.7),0 2px 44px rgba(0,234,140,.5); } .hc-hero--img .hc-hero-big .hc-coral.hc-neon-on:hover{ color:#ffb3ba; text-shadow:0 0 6px rgba(255,179,186,.95),0 0 24px rgba(254,100,114,.7),0 2px 44px rgba(254,100,114,.5); } /* Timeline (% de 2 s): 0-7 apagón · 7-12 intento solitario · 12-35 pausa · 35-39 p1 · 45-48 p2 medio brillo · 57-65 p3 · 69-72 rampa · 72-100 estable */ @keyframes hc-neon-g{ 0%,7%{color:#008c54;text-shadow:none} 7.1%,12%{color:#33ffa8;text-shadow:0 0 4px rgba(51,255,168,.9),0 0 18px rgba(0,234,140,.55)} 12.1%,35%{color:#008c54;text-shadow:none} 35.1%,39%{color:#33ffa8;text-shadow:0 0 4px rgba(51,255,168,.9),0 0 18px rgba(0,234,140,.55)} 39.1%,45%{color:#008c54;text-shadow:none} 45.1%,48%{color:#00ea8c;text-shadow:0 0 10px rgba(0,234,140,.35)} 48.1%,57%{color:#008c54;text-shadow:none} 57.1%,65%{color:#33ffa8;text-shadow:0 0 4px rgba(51,255,168,.9),0 0 18px rgba(0,234,140,.55)} 65.1%,69%{color:#008c54;text-shadow:none} 72%,100%{color:#33ffa8;text-shadow:0 0 4px rgba(51,255,168,.9),0 0 18px rgba(0,234,140,.55),0 2px 34px rgba(0,234,140,.35)} } @keyframes hc-neon-g-hl{ } @keyframes hc-neon-c{ 0%,7%{color:#983c44;text-shadow:none} 7.1%,12%{color:#ff8b96;text-shadow:0 0 4px rgba(255,139,150,.9),0 0 18px rgba(254,100,114,.55)} 12.1%,35%{color:#983c44;text-shadow:none} 35.1%,39%{color:#ff8b96;text-shadow:0 0 4px rgba(255,139,150,.9),0 0 18px rgba(254,100,114,.55)} 39.1%,45%{color:#983c44;text-shadow:none} 45.1%,48%{color:#fe6472;text-shadow:0 0 10px rgba(254,100,114,.35)} 48.1%,57%{color:#983c44;text-shadow:none} 57.1%,65%{color:#ff8b96;text-shadow:0 0 4px rgba(255,139,150,.9),0 0 18px rgba(254,100,114,.55)} 65.1%,69%{color:#983c44;text-shadow:none} 72%,100%{color:#ff8b96;text-shadow:0 0 4px rgba(255,139,150,.9),0 0 18px rgba(254,100,114,.55),0 2px 34px rgba(254,100,114,.35)} } @keyframes hc-neon-c-hl{ } /* Reduced motion: SIN parpadeos — la clase aplica el estado encendido directamente (las transiciones ya están desactivadas más arriba). */ @media(prefers-reduced-motion:reduce){ .hc-hero--img .hc-hero-big .hc-green.hc-neon-on, .hc-hero--img .hc-hero-big .hc-coral.hc-neon-on, .hc-hero--img .hc-hero-big .hc-green.hc-neon-on::before, .hc-hero--img .hc-hero-big .hc-coral.hc-neon-on::before{animation:none} } /* ============================================================ PORTFOLIO — tarjetas (grid del hub + slides del carrusel) ============================================================ */ .hc-pf-grid{margin-top:36px} /* BASE: card clara clásica (fondo blanco + tipografía oscura) — la usan las cards de sector, las fichas de portfolio y páginas con markup estático. El VOLTEO 3D es el caso especial (.hc-pf-card--flip, markup del include): la card se vuelve transparente y cada cara lleva su fondo, porque el card no puede llevar overflow:hidden (aplana el preserve-3d). Sin lift vertical (el marquee lo recortaba por arriba). */ .hc-pf-card{display:flex;flex-direction:column;background:#fff;box-shadow:var(--shadow);border-radius:var(--r);overflow:hidden;height:100%;perspective:1400px;transition:box-shadow .16s ease} .hc-pf-card--flip{background:transparent;box-shadow:none;overflow:visible} .hc a.hc-pf-card{color:var(--body)} .hc-pf-card:hover,.hc-pf-card:focus-visible{box-shadow:var(--shadow-lg);border-radius:var(--r)} .hc-pf-flip{position:relative;display:flex;flex-direction:column;flex:1;transform-style:preserve-3d;transition:transform .6s cubic-bezier(.35,.1,.25,1)} .hc-pf-card:hover .hc-pf-flip,.hc-pf-card:focus-visible .hc-pf-flip{transform:rotateY(180deg)} .hc-pf-face{border-radius:var(--r);overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden} .hc-pf-front{display:flex;flex-direction:column;flex:1;background:var(--ink,#2d2270);box-shadow:var(--shadow)} /* overrides del flip: tipografía clara sobre el fondo ink de la cara frontal */ .hc-pf-front .hc-pf-sector{color:var(--green)} .hc-pf-front .hc-pf-name{color:#fff} .hc-pf-front .hc-pf-desc{color:rgba(255,255,255,.82)} .hc-pf-front .hc-pf-more{color:var(--green)} /* captura ENMARCADA en la cara ink: margen interior + radio propio → la web se ve entera (las esquinas redondeadas de la cara ya no la recortan) */ .hc-pf-front .hc-pf-shot{margin:12px 12px 0;width:auto;border-radius:8px} .hc-pf-front .hc-pf-shot::after{display:none} .hc-pf-back{position:absolute;inset:0;transform:rotateY(180deg);display:flex;flex-direction:column;gap:10px;padding:22px;background:var(--ink);color:#fff} .hc-pf-back-eyebrow{font-family:var(--text);font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--green)} .hc-pf-back-name{font-family:var(--head);font-weight:700;font-size:20px;color:#fff;line-height:1.12} .hc-pf-back-list{display:flex;flex-direction:column;gap:8px;margin-top:2px} .hc-pf-back-item{position:relative;padding-left:16px;font-size:13.5px;line-height:1.45;color:rgba(255,255,255,.86)} .hc-pf-back-item::before{content:"";position:absolute;left:0;top:.52em;width:7px;height:7px;border-radius:50%;background:var(--green)} .hc-pf-back .hc-pf-more{color:var(--green)} /* (0,2,0): gana al color ink del .hc-pf-more de más abajo */ @media (prefers-reduced-motion:reduce){ .hc-pf-flip{transition:none} .hc-pf-card:hover .hc-pf-flip,.hc-pf-card:focus-visible .hc-pf-flip{transform:none} } .hc-pf-shot{display:block;position:relative;width:100%;aspect-ratio:1200/578;overflow:hidden;background:var(--soft)} /* cinta de marca bajo la captura: delimita la imagen del cuerpo aunque la web retratada sea muy blanca */ .hc-pf-shot::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--ink)} .hc-pf-shot picture{display:block;width:100%;height:100%} .hc-pf-shot img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block} .hc-pf-body{display:flex;flex-direction:column;gap:7px;padding:20px 22px;flex:1} .hc-pf-sector{font-family:var(--text);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--green-text)} .hc-pf-name{font-family:var(--head);font-weight:700;font-size:20px;color:var(--ink);line-height:1.12} .hc-pf-desc{font-size:14.5px;line-height:1.5;color:var(--body)} .hc-pf-more{margin-top:auto;padding-top:8px;font-family:var(--head);font-weight:700;font-size:14px;color:var(--ink);display:inline-flex;align-items:center;gap:6px} .hc-pf-more .hc-ar{width:15px;height:15px;transition:transform .15s} .hc-pf-card:hover .hc-pf-more .hc-ar{transform:translateX(3px)} /* ============================================================ SECTORES — cards por vertical (reutiliza la estética del portfolio) Grid: 1 col móvil / 2 col tablet / 3 col desktop. ============================================================ */ .hc-sectors-section{background:#f1eefb} /* mismo lavanda que la sección de reseñas (gana al hc-soft del markup) */ /* alternancia automática: cuando sectores va JUSTO después de reseñas (landings locales), pasa a blanco para no encadenar dos lavandas consecutivas */ .hc-reviews + .hc-sectors-section{background:var(--bg)} .hc-sectors-grid{margin-top:36px} /* zoom "de acercamiento" anclado a la derecha (las escenas de sector tienen el objeto a la derecha y la izquierda vacía): el hover entra en la imagen */ .hc-sector-card .hc-pf-shot img{transform-origin:100% 50%;transition:transform .8s cubic-bezier(.22,1,.36,1)} .hc-sector-card:hover .hc-pf-shot img,.hc-sector-card:focus-visible .hc-pf-shot img{transform:scale(1.6)} @media (prefers-reduced-motion:reduce){ .hc-sector-card .hc-pf-shot img{transition:none} .hc-sector-card:hover .hc-pf-shot img{transform:none} } @media(min-width:560px){.hc-sectors-grid{grid-template-columns:1fr 1fr}} @media(min-width:940px){.hc-sectors-grid{grid-template-columns:repeat(3,1fr)}} /* Los heros son 16:9; el recorte de la card los respeta mejor que el 1200/578 del portfolio. */ .hc-sector-card .hc-pf-shot{aspect-ratio:16/9} /* Card sin publicar (fail-safe): informativa, sin gesto de clic ni elevación. */ .hc-sector-card--soon{cursor:default} .hc-sector-card--soon:hover,.hc-sector-card--soon:focus-visible{transform:none;box-shadow:var(--shadow)} /* "Ver todos los sectores": cuando el hub existe · degradado si no (fail-safe). */ .hc-sectors-more{margin-top:30px} .hc-sectors-more a{font-family:var(--head);font-weight:700;font-size:14px;color:var(--ink);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px;text-decoration-color:var(--green)} .hc-sectors-more a:hover,.hc-sectors-more a:focus-visible{text-decoration-color:var(--ink)} .hc-sectors-more .hc-link-pending{font-family:var(--head);font-weight:700;font-size:14px;color:var(--body)} /* ============================================================ ÍNDICE DE ZONAS (includes/zones.php · token ) Cada hub lista lo que cuelga de él. Columnas fluidas: una lista de 27 poblaciones cabe igual que una de 2 sin romper el ritmo de la página. Las entradas no publicadas llegan como (fail-safe de smartlink): mismo sitio, sin subrayado y sin gesto de clic. ============================================================ */ /* Columnas fluidas, NO rejilla: los nombres largos ("Diseño web en Sant Esteve Sesrovires") ocupan dos líneas, y en un grid eso estira toda la fila y abre huecos. Con columnas cada entrada fluye pegada a la anterior. */ .hc-zonas-list{list-style:none;margin:24px 0 0;padding:0;columns:5 168px;column-gap:26px} .hc-zonas-list li{font-size:15px;line-height:1.45;margin:0 0 9px;break-inside:avoid} .hc-zonas-list a{color:var(--ink);font-weight:600;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px;text-decoration-color:var(--green)} .hc-zonas-list a:hover,.hc-zonas-list a:focus-visible{text-decoration-color:var(--ink)} /* Pendiente de publicar: se lee, no se clica. Sin subrayado para que la diferencia con un enlace real sea evidente sin depender solo del color. */ .hc-zonas-list .hc-link-pending{color:var(--body);font-weight:400;cursor:default} /* Segundo grupo en adelante dentro del mismo índice (comarcas + poblaciones). */ .hc-zonas-list + .hc-section-title{margin-top:44px} /* Marquee de portada: banda full-bleed, loop CSS infinito, sin JS. La banda es hija directa de la sección (sin padding lateral) -> ocupa todo el ancho del viewport sin 100vw ni scroll horizontal en el body. Track = secuencia duplicada; translateX(-50%) empalma sin salto porque cada tarjeta lleva margin-right (la copia queda a distancia exacta). */ .hc-marquee{width:100%;overflow:hidden;margin-top:34px;touch-action:pan-y; -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent); mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)} .hc-marquee-track{display:flex;width:max-content;animation:hc-marquee 55s linear infinite;will-change:transform; cursor:grab;-webkit-user-select:none;user-select:none} .hc-marquee-track.is-dragging{cursor:grabbing} .hc-marquee:hover .hc-marquee-track, .hc-marquee:focus-within .hc-marquee-track{animation-play-state:paused} .hc-marquee-card{flex:0 0 300px;width:300px;margin-right:18px;height:auto} @keyframes hc-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}} @media(max-width:520px){.hc-marquee-card{flex-basis:250px;width:250px}} @media(prefers-reduced-motion:reduce){ .hc-marquee{overflow-x:auto;-webkit-overflow-scrolling:touch; -webkit-mask-image:none;mask-image:none} .hc-marquee-track{animation:none} } /* ============================================================ REVIEWS — reseñas reales de clientes (Google Business Profile). Banda full-bleed (fondo índigo suave, distinto del lavanda .hc-soft para diferenciarse de las secciones vecinas). Heading + resumen de valoración en contenedor; tarjetas en fila centrada que envuelve en móvil (sin overflow horizontal). Estrellas VISUALES (ámbar, convención de rating). SIN schema. ============================================================ */ .hc-reviews{background:#f1eefb;border-block:1px solid var(--line)} .hc-reviews .hc-container{text-align:center} .hc-reviews-summary{display:inline-flex;align-items:center;gap:12px;margin-top:20px;flex-wrap:wrap;justify-content:center} .hc-reviews-g{width:28px;height:28px;flex:none} /* G de Google junto a la nota: la fuente de las reseñas, visible de un vistazo */ .hc-reviews-rating{font-family:var(--head);font-weight:800;font-size:26px;color:var(--ink);line-height:1} .hc-rv-stars{display:inline-flex;align-items:center;gap:3px;line-height:0} .hc-rv-stars svg{width:20px;height:20px;display:block} .hc-rv-star{fill:#f6a609} /* estrella llena: ámbar (rating) */ .hc-rv-star.hc-rv-star--empty{fill:#d9d4ec} /* estrella vacía: lila apagado */ .hc-reviews-count{font-size:14.5px;color:var(--faint)} .hc-reviews-track{display:flex;gap:24px;justify-content:center;flex-wrap:wrap; align-items:stretch;margin-top:36px;padding:0 22px} /* Contenedor/marco (frame, sombra, radios) — se conserva; solo cambia el INTERIOR. */ .hc-review-card{flex:0 1 420px;max-width:440px;background:#fff;border:1px solid var(--line); border-radius:var(--r);box-shadow:var(--shadow-lg);padding:24px 26px 22px; display:flex;flex-direction:column;gap:12px;text-align:left} /* Interior estilo "reseña de Google": cabecera (avatar-inicial + nombre/subtítulo + logo "G" a la derecha), fila de estrellas y texto. */ .hc-review-head{display:flex;align-items:center;gap:12px} /* Avatar: soporta LOGO (imagen circular del cliente) o INICIAL (círculo de color plano de la paleta de Google). El color de fondo lo fija PHP inline por autor. */ .hc-review-avatar{position:relative;flex:none;width:44px;height:44px;border-radius:50%;overflow:hidden; background:var(--ink);color:#fff;display:grid;place-items:center} .hc-review-ini{font-family:var(--head);font-weight:700;font-size:18px;line-height:1} .hc-review-avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit} /* Aro sutil por encima del logo: delimita los círculos de fondo blanco sobre la tarjeta blanca (imita el borde de las fotos de perfil de Google). */ .hc-review-avatar::after{content:"";position:absolute;inset:0;border-radius:50%; box-shadow:inset 0 0 0 1px rgba(20,16,50,.10);pointer-events:none} .hc-review-who{display:flex;flex-direction:column;gap:1px;min-width:0} .hc-review-name{font-family:var(--head);font-weight:700;font-size:15.5px;color:var(--ink);line-height:1.2} .hc-review-sub{font-size:12.5px;color:var(--faint);line-height:1.3} .hc-review-glogo{flex:none;width:18px;height:18px;margin-left:auto;align-self:flex-start;margin-top:2px} /* Estrellas compactas dentro de la card (el resumen conserva 20px). */ .hc-review-card .hc-rv-stars svg{width:17px;height:17px} .hc-review-text{margin:0;font-size:15.5px;line-height:1.6;color:var(--body)} /* En el carrusel, acota el texto a 8 líneas con elipsis: reseñas largas (p. ej. las detalladas) no descuadran la altura de la fila. Texto íntegro a un clic en "Ver todas en Google". Sin recortar palabras: solo clamp visual (como Google). */ .hc-marquee--reviews .hc-review-text{display:-webkit-box;-webkit-line-clamp:8;-webkit-box-orient:vertical;overflow:hidden} .hc-reviews-cta{margin-top:34px} @media(max-width:560px){ .hc-reviews-track{padding:0 16px;gap:18px} .hc-review-card{flex:1 1 100%;max-width:100%;padding:24px 22px 20px} } /* Reseñas en marquee infinito: reutiliza el motor del portfolio (.hc-marquee / .hc-marquee-track: translateX(-50%) lineal, pausa al hover/focus, degrada a scroll con prefers-reduced-motion). Aquí solo fijamos el ancho de cada tarjeta como ítem del track. Mayor especificidad que la regla móvil de .hc-review-card. */ .hc-marquee--reviews{margin-top:36px;padding:8px 0} .hc-marquee--reviews .hc-marquee-track{animation-duration:52s} .hc-marquee--reviews .hc-review-card{flex:0 0 400px;width:400px;max-width:400px;margin-right:24px; box-shadow:0 18px 42px -22px rgba(45,34,112,.32)} @media(max-width:520px){ .hc-marquee--reviews .hc-review-card{flex-basis:300px;width:300px;max-width:300px} } /* Marquee de blog (home): últimos artículos en loop, estilo reseñas. Card a ancho fijo como ítem del track; duración larga (hasta 15 ítems). */ .hc-marquee--blog{margin-top:36px;padding:8px 0} .hc-marquee--blog .hc-marquee-track{animation-duration:110s} .hc-marquee--blog .hc-blog-card{flex:0 0 340px;width:340px;max-width:340px;margin-right:22px} @media(max-width:520px){ .hc-marquee--blog .hc-blog-card{flex-basis:280px;width:280px;max-width:280px} } /* ============================================================ BLOG — cuerpo de artículo (prose legible), figuras, fuentes y CTAs ============================================================ */ .hc-prose{max-width:768px;margin:0 auto;padding:0 22px} .hc-prose>h2{font-size:clamp(24px,3.6vw,32px);margin:40px 0 14px;line-height:1.14} .hc-prose>h2:first-child{margin-top:0} .hc-prose>h3{font-size:clamp(19px,2.6vw,23px);margin:28px 0 10px;color:var(--ink)} .hc-prose>p{font-size:17px;line-height:1.7;color:var(--body);margin:0 0 18px} .hc-prose>p>strong,.hc-prose li>strong{color:var(--ink)} .hc-prose a{color:var(--ink);font-weight:700;text-decoration:underline; text-decoration-color:rgba(0,234,140,.55);text-underline-offset:3px} .hc-prose a:hover{text-decoration-color:var(--green-text)} .hc-prose .hc-btn,.hc-prose .hc-wa-cta a{text-decoration:none} .hc-prose .hc-wa-cta a{color:var(--ink)} .hc-prose>ul,.hc-prose>ol{margin:0 0 20px;padding-left:22px} .hc-prose>ul>li,.hc-prose>ol>li{font-size:17px;line-height:1.65;color:var(--body);margin-bottom:9px} .hc-blog-byline{font-size:14.5px;color:var(--faint);margin-top:22px} .hc-blog-byline strong{color:var(--ink)} /* Figura de artículo (infografías, cabeceras) */ .hc-blog-fig{margin:26px 0;border-radius:var(--r);overflow:hidden;border:1px solid var(--line); box-shadow:var(--shadow-lg);background:var(--soft)} .hc-blog-fig img{width:100%;height:auto;display:block} .hc-blog-fig figcaption{font-size:13.5px;color:var(--faint);padding:12px 16px;background:#fff;border-top:1px solid var(--line)} .hc-blog-fig figcaption a{font-weight:700} /* Callout / nota con CTA dentro del artículo */ .hc-note{background:var(--soft);border:1px solid var(--line);border-left:4px solid var(--green); border-radius:14px;padding:22px 24px;margin:28px 0} .hc-note>p{font-size:16.5px;line-height:1.6;color:var(--body);margin:0 0 14px} .hc-note>p:last-child{margin-bottom:0} .hc-note strong{color:var(--ink)} /* Caja de fuentes citadas (honestidad de datos: cada cifra con su fuente) */ .hc-sources{list-style:none;margin:14px 0 0;padding:0} .hc-sources li{font-size:14px;line-height:1.55;color:var(--faint);padding:8px 0;border-top:1px solid var(--line-2)} .hc-sources li a{color:var(--ink);font-weight:600;word-break:break-word} /* CTA de WhatsApp contextual (Marta, consultora) dentro del artículo */ .hc-wa-cta{display:flex;align-items:center;gap:16px;flex-wrap:wrap;background:var(--ink);color:#fff; border-radius:var(--r);padding:22px 24px;margin:30px 0} .hc-wa-cta .hc-wa-ico{flex:none;width:52px;height:52px;border-radius:50%;background:#25D366;display:grid;place-items:center} .hc-wa-cta .hc-wa-ico svg{width:30px;height:30px;fill:#fff} .hc-wa-cta .hc-wa-txt{flex:1 1 240px;min-width:0} .hc-wa-cta h3{color:#fff;font-size:20px;margin:0 0 5px} .hc-wa-cta p{color:rgba(255,255,255,.82);font-size:15px;margin:0;line-height:1.5} .hc-wa-cta .hc-btn{flex:none} /* Captura grande en la ficha de proyecto (contenedor alineado al ratio del asset) */ .hc-pf-hero-shot{border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-lg);border:1px solid var(--line);display:block;aspect-ratio:1200/578} .hc-pf-hero-shot img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block} .hc-pf-meta{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px} .hc-pf-meta .hc-pill{background:#fff} /* Botón redondo de teléfono en el header (coral) */ .hc-nav-phone-btn{display:inline-grid;place-items:center;width:50px;height:50px;border-radius:50%;background:var(--ink);color:#fff;border:2px solid var(--ink);flex:none;transition:background .18s,color .18s,transform .18s,box-shadow .18s} .hc-nav-phone-btn svg{width:22px;height:22px;display:block} .hc a.hc-nav-phone-btn{color:#fff} .hc a.hc-nav-phone-btn:hover,.hc a.hc-nav-phone-btn:focus{background:#fff;color:var(--ink);border-color:var(--ink);box-shadow:0 4px 14px rgba(45,34,112,.28);transform:translateY(-1px)} /* ══ Botones de WhatsApp con la foto de Marta (consultora) — conversión ══ */ /* Avatar redondo reutilizable (widget flotante, botones y bloques CTA) */ .hc-wa-avatar{position:relative;flex:none;width:56px;height:56px} .hc-wa-avatar img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block;border:3px solid #25D366;background:#fff} .hc-wa-badge{position:absolute;right:-4px;bottom:-4px;width:24px;height:24px;border-radius:50%;background:#25D366;display:grid;place-items:center;border:2px solid #fff;pointer-events:none} .hc-wa-badge svg{width:13px;height:13px;fill:#fff;display:block} /* Widget flotante: pasa de icono plano a foto de Marta + burbuja */ .hc-wa{width:auto;height:auto;background:transparent;box-shadow:none;gap:10px} .hc-wa:hover{transform:translateY(-3px)} .hc-wa .hc-wa-avatar{width:58px;height:58px} .hc-wa .hc-wa-avatar img{box-shadow:0 8px 24px rgba(37,211,102,.45)} /* Bocadillo (solo escritorio): oculto de serie; menu.js añade .hc-wa--talk a la región a los ~12 s, lo retira si nadie interactúa y permite cerrarlo. */ .hc-wa-bubble{position:relative;display:none;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 10px 30px rgba(31,24,80,.18);max-width:210px;opacity:0;transform:translateY(8px);pointer-events:none;transition:opacity .35s ease,transform .35s ease} @media(min-width:940px){.hc-wa-bubble{display:block}} .hc-wa-region.hc-wa--talk .hc-wa-bubble{opacity:1;transform:none;pointer-events:auto} .hc-wa-bubble__link{display:block;color:var(--ink);text-decoration:none;font-family:var(--head);font-weight:700;font-size:13.5px;line-height:1.25;padding:10px 26px 10px 14px} .hc-wa-bubble__x{position:absolute;top:3px;right:3px;width:22px;height:22px;padding:0;border:0;background:transparent;color:var(--body);font:inherit;font-size:16px;line-height:20px;text-align:center;cursor:pointer;border-radius:50%} .hc-wa-bubble__x:hover{color:var(--ink);background:rgba(31,24,80,.08)} @media(prefers-reduced-motion:reduce){.hc-wa-bubble{transition:none}} /* Foto pequeña dentro de botones wa.me — el flex-item real es el , no el : sin flex:none en el picture, en botones estrechos (p. ej. la CTA de la tira Vigía) el picture se encoge y, con img{max-width:100%}, la foto queda deformada (ancho aplastado, alto intacto). Pinamos el picture y dejamos que el texto salte de línea antes que deformar el avatar. */ .hc-btn--wa{white-space:normal;padding-top:9px;padding-bottom:9px;padding-left:9px} /* left=top/bottom → avatar concéntrico con la curva del extremo del pill */ .hc-btn--wa picture{flex:none;display:block;line-height:0} .hc-btn--wa img{width:50px;height:50px;border-radius:50%;object-fit:cover;flex:none;border:2px solid #25D366;background:#fff;display:block} /* Bloque CTA de artículo: foto en lugar de icono plano */ .hc-wa-cta .hc-wa-avatar{width:56px;height:56px} /* ══ Barra fija de contacto (SOLO móvil ≤700px) — foto de Marta + 2 CTAs ══ Sustituye a la burbuja flotante en móvil: mejor conversión con acciones explícitas (WhatsApp primario + Llamar). Fondo índigo de marca, hairline verde neón, respeta el safe-area de iPhone. */ .hc-wabar{position:fixed;left:0;right:0;bottom:0;z-index:1200;display:none;align-items:center;gap:8px; padding:8px 12px;padding-bottom:calc(8px + env(safe-area-inset-bottom)); background:#140f34;border-top:2px solid var(--green);box-shadow:0 -6px 22px rgba(20,15,52,.4)} .hc-wabar__intro{display:flex;align-items:center;gap:9px;flex:1 1 auto;min-width:0} .hc-wabar__avatar{flex:none;line-height:0} .hc-wabar__avatar img{width:40px;height:40px;border-radius:50%;object-fit:cover;display:block;border:2px solid #25D366;background:#fff} .hc-wabar__text{min-width:0;display:flex;flex-direction:column;justify-content:center;line-height:1.2;overflow:hidden} .hc-wabar__text strong{font-family:var(--head);font-weight:700;font-size:14px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .hc-wabar__text span{font-size:11px;color:rgba(255,255,255,.72);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .hc-wabar__actions{display:flex;gap:6px;flex:none} .hc-wabar__btn{display:inline-flex;align-items:center;justify-content:center;gap:5px;min-height:44px;padding:0 9px; border-radius:12px;font-family:var(--head);font-weight:700;font-size:13px;line-height:1;white-space:nowrap;text-decoration:none;transition:filter .15s,background .15s} .hc-wabar__btn svg{width:17px;height:17px;flex:none;display:block} .hc-wabar__btn--wa{background:#25D366;color:#fff} .hc-wabar__btn--wa:active{filter:brightness(.94)} .hc-wabar__btn--call{background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.32)} .hc-wabar__btn--call:active{background:rgba(255,255,255,.2)} /* Blindaje: fuente e icono SIEMPRE blancos en los dos botones de la barra (una regla de enlaces heredada los apagaba a var(--body) en runtime). */ .hc .hc-wabar .hc-wabar__btn{color:#fff} .hc .hc-wabar .hc-wabar__btn--wa svg{fill:#fff;stroke:none} .hc .hc-wabar .hc-wabar__btn--call svg{fill:none;stroke:#fff} @media(max-width:700px){ .hc-wa-region{display:none} .hc-wabar{display:flex} body{padding-bottom:calc(74px + env(safe-area-inset-bottom))} .hc-cc{bottom:calc(78px + env(safe-area-inset-bottom))} /* La barra fija ocupa el pie del viewport: el cue de scroll del hero (abs. al fondo del hero, con animación de rebote) quedaría tras la barra y asomaría un sliver animado. Se oculta en móvil (mismo criterio que ya aplica .page-comprobar-posicion-en-google). */ .hc-scrollcue{display:none} } /* Móviles estrechos: conserva el gancho "¿Hablamos?", oculta solo el subtítulo */ @media(max-width:360px){.hc-wabar__text span{display:none}.hc-wabar__text strong{font-size:13px}} /* Muy estrechos (iPhone SE 320): prioriza avatar + los dos botones */ @media(max-width:330px){.hc-wabar__text{display:none}} /* ══ Eyebrow invertido: titular grande legible sobre hero de imagen ══ */ .hc-hero--img .hc-hero-big{color:#fff} /* ============================================================ BLOG EDITORIAL — presentación de artículos a nivel publicación. Patrón EDITORIAL: H1 GRANDE protagonista (NO eyebrow invertido; ese queda para páginas comerciales — ver .claude/decisions.md 2026-07-05). Piezas: cabecera (breadcrumb + H1 + entradilla + meta autor), columna de lectura, TOC colapsable, tablas responsive, callouts con icono, tarjeta de autor/consulta y tarjetas del hub. Todo scopeado a .hc-article / .hc-prose / .hc-blog-* — inerte fuera del blog. ============================================================ */ /* ---- Cabecera editorial del artículo ---- */ .hc-article-head{background:linear-gradient(180deg,var(--soft),#fff);padding:32px 0 6px} @media(min-width:940px){.hc-article-head{padding:52px 0 10px}} /* ---- ToC LATERAL del artículo (.hc-tocbar, la inyecta blog-toc.js; 4+ H2 con id). OJO: .hc-toc (sin sufijo) es la ToC INLINE preexistente de los estudios — details numerado dentro de la prosa — y no se toca aquí. Desktop ≥1320px: nav fijo en el margen izquierdo de la prosa (768px centrada → hueco garantizado); la inline se oculta para no duplicar (body.has-tocbar). Móvil/tablet: manda la inline (existente o inyectada .hc-toc-inline en los artículos que no traían). */ .hc-article .hc-prose h2[id]{scroll-margin-top:96px} .hc-tocbar{display:none} @media(min-width:1320px){ .hc-tocbar{display:block;position:fixed;top:120px;left:max(20px,calc(50vw - 384px - 258px));width:232px; max-height:calc(100vh - 160px);overflow-y:auto;overscroll-behavior:contain} .hc-tocbar-title{margin:0 0 10px;font-family:var(--text);font-size:11px;font-weight:700; letter-spacing:.22em;text-transform:uppercase;color:var(--green-text)} .hc-tocbar ol{list-style:none;margin:0;padding:0;border-left:2px solid var(--line)} .hc-tocbar li{margin:0} .hc-tocbar a{display:block;padding:7px 0 7px 14px;margin-left:-2px;border-left:2px solid transparent; font-size:13.5px;line-height:1.35;color:var(--faint);text-decoration:none;transition:color .15s ease,border-color .15s ease} .hc-tocbar a:hover{color:var(--ink)} .hc-tocbar a.is-active{color:var(--ink);font-weight:700;border-left-color:var(--green)} body.has-tocbar .hc-prose .hc-toc{display:none} /* la inline no duplica a la lateral */ body.has-tocbar .hc-toc-inline{display:none} } /* índice plegable inyectado (solo artículos SIN details.hc-toc propio) */ .hc-toc-inline{margin:18px 0 4px;background:#fff;border:1px solid var(--line);border-radius:12px; box-shadow:var(--shadow);padding:4px 16px} .hc-toc-inline summary{cursor:pointer;padding:10px 0;font-family:var(--head);font-weight:700; font-size:15px;color:var(--ink);list-style-position:inside} .hc-toc-inline ol{list-style:none;margin:2px 0 12px;padding:0 0 0 2px} .hc-toc-inline ol a{display:block;padding:7px 0;font-size:14.5px;color:var(--body); text-decoration:none;border-bottom:1px solid var(--line)} .hc-toc-inline ol li:last-child a{border-bottom:none} .hc-toc-inline ol a:hover{color:var(--ink)} .hc-breadcrumb{margin:0 0 20px} .hc-breadcrumb ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:7px; font-family:var(--head);font-size:13px;font-weight:600} .hc-breadcrumb li{display:inline-flex;align-items:center;gap:7px;color:var(--faint)} .hc-breadcrumb li+li::before{content:"›";color:#b6b0d2;font-weight:700} .hc-breadcrumb a{color:var(--faint);border-radius:4px} .hc-breadcrumb a:hover,.hc-breadcrumb a:focus-visible{color:var(--green-text);text-decoration:underline;text-underline-offset:3px} .hc-breadcrumb [aria-current]{color:var(--ink)} .hc-article-title{font-family:var(--head);font-weight:800;letter-spacing:-.025em;line-height:1.05; color:var(--ink);font-size:clamp(33px,5.4vw,52px);text-wrap:balance;margin:0} .hc-article-standfirst{font-family:var(--head);font-weight:500;letter-spacing:-.01em; font-size:clamp(19px,2.7vw,26px);line-height:1.3;color:var(--ink);margin:18px 0 0;text-wrap:balance} .hc-article-intro{font-size:clamp(16px,2.2vw,18px);line-height:1.66;color:var(--body);margin:20px 0 0} .hc-article-intro strong{color:var(--ink)} /* Fila de meta: autor (avatar Marta) + fecha + tiempo de lectura */ .hc-article-meta{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin:26px 0 4px; padding-top:22px;border-top:1px solid var(--line)} .hc-article-author{display:inline-flex;align-items:center;gap:12px} .hc-article-avatar{flex:none;width:46px;height:46px;border-radius:50%;overflow:hidden; border:2px solid var(--green);background:#fff} .hc-article-avatar img{width:100%;height:100%;object-fit:cover;display:block} .hc-article-author-txt{display:flex;flex-direction:column;line-height:1.22} .hc-article-author-txt strong{font-family:var(--head);font-weight:700;font-size:15.5px;color:var(--ink)} .hc-article-author-txt span{font-size:12.5px;color:var(--faint)} .hc-article-meta-item{display:inline-flex;align-items:center;gap:7px;font-size:14px;color:var(--faint);font-family:var(--text)} .hc-article-meta-item .hc-ic{width:16px;height:16px;color:var(--green-text)} /* Imagen destacada: más ancha que la columna de lectura, borde redondeado */ .hc-article-hero{width:100%;max-width:768px;margin:30px auto 0;padding:0 22px} /* ancho de prosa: no invade el margen del ToC lateral */ .hc-article-hero .hc-blog-fig{margin:0} @media(min-width:940px){.hc-article-hero{margin-top:38px}} /* ---- Columna de lectura (refinada) ---- */ .hc-prose{max-width:768px;margin:0 auto;padding:0 22px} .hc-prose>h2{position:relative;font-size:clamp(25px,3.8vw,34px);margin:54px 0 16px;line-height:1.16; padding-top:24px;scroll-margin-top:88px} .hc-prose>h2::before{content:"";position:absolute;top:0;left:0;width:46px;height:4px;border-radius:3px;background:var(--green)} .hc-prose>h2:first-child{margin-top:0} .hc-prose>h3{font-size:clamp(19px,2.6vw,23px);margin:34px 0 10px;color:var(--ink);font-weight:700;letter-spacing:-.015em} .hc-prose>p{font-size:17.5px;line-height:1.72;color:var(--body);margin:0 0 20px} .hc-prose>p>strong,.hc-prose li>strong{color:var(--ink)} .hc-prose a{color:var(--ink);font-weight:700;text-decoration:underline; text-decoration-color:rgba(0,234,140,.6);text-decoration-thickness:2px;text-underline-offset:3px} .hc-prose a:hover{text-decoration-color:var(--green-text)} .hc-prose .hc-btn,.hc-prose .hc-wa-cta a,.hc-prose .hc-toc a{text-decoration:none} .hc-prose .hc-wa-cta a{color:var(--ink)} .hc-prose>ul,.hc-prose>ol{margin:0 0 22px;padding-left:24px} .hc-prose>ul>li,.hc-prose>ol>li{font-size:17.5px;line-height:1.66;color:var(--body);margin-bottom:11px} .hc-prose>ul>li::marker{color:var(--green-text)} .hc-prose figure{margin:28px 0} .hc-prose figure img{border-radius:14px} /* ---- TOC (tabla de contenidos) — card colapsable ---- */ .hc-toc{margin:6px 0 40px;border:1px solid var(--line);border-radius:16px;background:var(--soft);overflow:hidden} .hc-toc>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px; font-family:var(--head);font-weight:700;font-size:15px;color:var(--ink);padding:16px 20px} .hc-toc>summary::-webkit-details-marker{display:none} .hc-toc>summary .hc-ic{width:18px;height:18px;color:var(--green-text)} .hc-toc>summary .hc-toc-caret{margin-left:auto;width:20px;height:20px;color:var(--faint);transition:transform .2s ease} .hc-toc[open]>summary .hc-toc-caret{transform:rotate(180deg)} .hc-toc>summary .hc-toc-hint{font-family:var(--text);font-weight:400;font-size:13px;color:var(--faint)} .hc-toc ol{list-style:none;margin:0;padding:4px 20px 18px;counter-reset:toc; columns:2;column-gap:34px} .hc-toc li{counter-increment:toc;break-inside:avoid;margin:0 0 3px} .hc-toc a{display:flex;gap:9px;align-items:baseline;padding:7px 6px;border-radius:8px; font-size:14.5px;line-height:1.35;color:var(--body)} .hc-toc a::before{content:counter(toc,decimal-leading-zero);font-family:var(--head);font-weight:700; font-size:12px;color:var(--green-text);flex:none} .hc-toc a:hover,.hc-toc a:focus-visible{background:#fff;color:var(--ink)} @media(max-width:680px){.hc-toc ol{columns:1;padding-top:0}} /* ---- Tablas editoriales responsive ---- */ .hc-table-wrap{margin:30px 0;border:1px solid var(--line);border-radius:14px;overflow:hidden} .hc-table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch} .hc-table{width:100%;border-collapse:collapse;font-family:var(--text);font-size:15px;min-width:560px} .hc-table thead th{background:var(--ink);color:#fff;text-align:left;font-family:var(--head);font-weight:700; font-size:13.5px;letter-spacing:.01em;padding:13px 16px;white-space:nowrap} .hc-table td{padding:12px 16px;border-top:1px solid var(--line);color:var(--body);line-height:1.5;vertical-align:top} .hc-table td strong{color:var(--ink)} .hc-table tbody tr:nth-child(even){background:var(--soft)} .hc-table tbody tr:first-child td{border-top:none} @media(max-width:680px){.hc-table{font-size:14px}.hc-table thead th,.hc-table td{padding:10px 12px}} /* ---- Callouts con icono (dato clave / consejo / aviso) ---- */ .hc-note{display:flex;gap:15px;align-items:flex-start;background:var(--soft);border:1px solid var(--line); border-left:4px solid var(--green);border-radius:14px;padding:20px 22px;margin:30px 0} .hc-note-ic{flex:none;width:38px;height:38px;border-radius:10px;background:rgba(0,234,140,.16); display:grid;place-items:center;margin-top:1px} .hc-note-ic .hc-ic{width:21px;height:21px;color:var(--green-text)} .hc-note-body{min-width:0;flex:1} .hc-note-body>p{font-size:16.5px;line-height:1.6;color:var(--body);margin:0 0 12px} .hc-note-body>p:last-child{margin-bottom:0} .hc-note strong{color:var(--ink)} .hc-note--warn{border-left-color:var(--coral)} .hc-note--warn .hc-note-ic{background:rgba(254,100,114,.16)} .hc-note--warn .hc-note-ic .hc-ic{color:var(--coral-text)} /* Compatibilidad: notas antiguas sin estructura de icono siguen legibles */ .hc-note:not(:has(.hc-note-ic)){display:block} /* ---- Tarjeta de autor / consulta (WhatsApp de Marta) — no banner ---- */ .hc-wa-cta{display:flex;align-items:center;gap:18px;flex-wrap:wrap;background:#fff;color:var(--body); border:1px solid var(--line);border-left:4px solid var(--green);border-radius:var(--r); box-shadow:var(--shadow-lg);padding:22px 24px;margin:34px 0} .hc-wa-cta .hc-wa-txt{flex:1 1 260px;min-width:0} .hc-wa-cta h3{color:var(--ink);font-size:19px;margin:0 0 5px} .hc-wa-cta p{color:var(--body);font-size:15px;margin:0;line-height:1.5} .hc-wa-cta .hc-btn{flex:none} .hc-wa-cta .hc-wa-avatar{width:60px;height:60px} /* ---- Tarjetas del hub /blog/ y "últimas del blog" (home) ---- */ .hc-blog-grid{margin-top:36px;display:grid;gap:24px;grid-template-columns:1fr} @media(min-width:640px){.hc-blog-grid{grid-template-columns:repeat(2,1fr)}} @media(min-width:940px){.hc-blog-grid{grid-template-columns:repeat(3,1fr)}} .hc-blog-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line); border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);height:100%; transition:transform .16s ease,box-shadow .16s ease} .hc a.hc-blog-card{color:var(--body)} .hc-blog-card:hover,.hc-blog-card:focus-visible{transform:translateY(-4px);box-shadow:var(--shadow-lg)} .hc-blog-card-shot{position:relative;display:block;width:100%;aspect-ratio:16/9;overflow:hidden;background:var(--soft)} .hc-blog-card-shot picture{display:block;width:100%;height:100%} .hc-blog-card-shot img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s ease} .hc-blog-card:hover .hc-blog-card-shot img{transform:scale(1.04)} /* Etiquetas en fila propia dentro del cuerpo (petición del usuario: los covers de los estudios llevan rótulos y el overlay los tapaba — la miniatura queda siempre despejada). */ .hc-blog-card-tags{display:flex;flex-wrap:wrap;align-items:center;gap:6px} .hc-blog-card-pill{font-family:var(--text);font-size:11.5px;font-weight:700; letter-spacing:.12em;text-transform:uppercase;color:var(--ink);background:var(--soft); border:1px solid var(--line);border-radius:999px;padding:4px 12px} .hc-blog-card-body{display:flex;flex-direction:column;gap:9px;padding:18px 22px 20px;flex:1} .hc-blog-card-title{font-family:var(--head);font-weight:700;font-size:19.5px;color:var(--ink);line-height:1.16} .hc-blog-card-desc{font-size:14.5px;line-height:1.5;color:var(--body); display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .hc-blog-card-meta{margin-top:auto;padding-top:6px;display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px; font-size:12.5px;color:var(--faint)} .hc-blog-card-meta span{display:inline-flex;align-items:center;gap:6px} .hc-blog-card-meta .hc-ic{width:14px;height:14px;color:var(--green-text)} .hc-blog-card-more{margin-top:8px;font-family:var(--head);font-weight:700;font-size:14px;color:var(--ink); display:inline-flex;align-items:center;gap:6px} .hc-blog-card-more .hc-ar{width:15px;height:15px;transition:transform .15s} .hc-blog-card:hover .hc-blog-card-more .hc-ar{transform:translateX(3px)} /* Chip de borrador/programada + aviso — SÓLO se pintan en la vista previa local. Vive en la fila de etiquetas del cuerpo, nunca sobre la miniatura. */ .hc-blog-card-flag{font-family:var(--text); font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#fff; background:var(--coral);border-radius:999px;padding:4px 11px} .hc-blog-preview-note{margin-top:20px;padding:12px 18px;border-radius:12px;font-size:13.5px; line-height:1.5;color:var(--ink);background:rgba(254,100,114,.10);border:1px solid rgba(254,100,114,.4)} .hc-blog-preview-note strong{color:var(--coral-text)} @media(prefers-reduced-motion:reduce){ .hc-toc>summary .hc-toc-caret,.hc-blog-card,.hc-blog-card-shot img{transition:none} } /* ============================================================ ENHANCEMENT — imágenes de contenido (2026-07-05) Capa visual de las imágenes conceptuales regeneradas: definición sutil + micro-interacción. Aditivo y reversible. NO afecta a los heroes (hc-hero-media) ni al portfolio. ============================================================ */ .hc-media{position:relative;transition:transform .25s ease, box-shadow .25s ease} .hc-media::after{content:"";position:absolute;inset:0;border-radius:var(--r); box-shadow:inset 0 0 0 1px rgba(45,34,112,.08);pointer-events:none} .hc-figure--tag .hc-shot{transition:transform .25s ease, box-shadow .25s ease} @media (min-width:940px){ .hc-media:hover{transform:translateY(-4px);box-shadow:0 40px 80px -28px rgba(45,34,112,.42)} .hc-figure--tag:hover .hc-shot{transform:translateY(-3px);box-shadow:0 36px 72px -30px rgba(45,34,112,.40)} } @media (prefers-reduced-motion:reduce){ .hc-media,.hc-figure--tag .hc-shot{transition:none} .hc-media:hover,.hc-figure--tag:hover .hc-shot{transform:none} } /* ============================================================ HERO HERRAMIENTAS — heros con imagen de fondo + acción usable sin scroll. (a) las 4 páginas de herramientas gratuitas usan el mismo hero con imagen que el resto del sitio (.hc-hero--img); (b) el usuario EMPIEZA A USAR la herramienta sin hacer scroll. Los overrides van scopeados bajo .hc-hero--img (2 clases) para ganar al CSS por-herramienta (seocheck/speedtool/sslcheck/ serptool.css, 1 clase), que se carga DESPUÉS de hera.css. ============================================================ */ /* Hero compacto (velocidad / SEO / SSL): deja el
    sobre el pliegue. */ .hc-hero--img.hc-hero--tool{ min-height:min(70svh,560px); padding:clamp(72px,10vh,96px) 0 clamp(48px,7vh,64px); } /* Posiciones: aún más comprimido arriba; hueco abajo para el solape de la tarjeta. */ .hc-hero--img.hc-hero--posiciones{ min-height:auto; padding:clamp(58px,8vh,84px) 0 clamp(84px,12vh,116px); } /* Formulario embebido en el hero (3 herramientas simples). */ .hc-hero--img .hc-hero-form{margin-top:26px;max-width:560px} .hc-hero--img .sv-label,.hc-hero--img .sc-label,.hc-hero--img .sl-label{color:#fff} .hc-hero--img .sv-hint,.hc-hero--img .sc-hint,.hc-hero--img .sl-hint{color:rgba(255,255,255,.84)} .hc-hero--img .sv-hint strong,.hc-hero--img .sc-hint strong,.hc-hero--img .sl-hint strong{color:#fff} /* Input grande sobre blanco: resalta sobre el índigo del hero. */ .hc-hero--img .sv-input,.hc-hero--img .sc-input,.hc-hero--img .sl-input{ background:#fff;border-color:#fff;font-size:17px;padding:16px 17px; box-shadow:0 16px 36px -18px rgba(0,0,0,.55) } .hc-hero--img .sv-input:focus,.hc-hero--img .sc-input:focus,.hc-hero--img .sl-input:focus{ border-color:var(--green);box-shadow:0 0 0 4px rgba(0,234,140,.4) } /* El JS hace scrollIntoView al spinner al enviar: que el header sticky no lo tape. */ .sv-loading,.sc-loading,.sl-loading{scroll-margin-top:88px} /* Posiciones: la tarjeta (#st-tool) solapa el borde inferior del hero para que el Paso 1 · "Tu búsqueda" sea usable sin scroll en 1366×768. */ .hc-tool-overlap{padding-top:0} .hc-tool-overlap #st-tool{margin-top:-84px;position:relative;z-index:5} /* En posiciones el indicador de scroll estorba (la tarjeta ya ocupa ese borde). */ .page-comprobar-posicion-en-google .hc-scrollcue{display:none} @media(max-width:600px){ .hc-hero--img .hc-hero-form{max-width:none} .hc-tool-overlap #st-tool{margin-top:-54px} } /* ============================================================ PLANES MANTENIMIENTO — Vigía (tira ancha) + 3 planes (grid) Tira Vigía fina y ancha (vigilancia sola, visualmente distinta) sobre un grid de 3 tarjetas (Esencial / Total --hot / Guardián). Listas de features + caja de horas incluidas. Coherente con el sistema hc-price-card; funciona sobre tarjeta clara y sobre --hot. ============================================================ */ /* --- Tira Vigía --- */ .hc-vigia{display:flex;flex-wrap:wrap;align-items:center;gap:20px 30px; background:var(--soft);border:1px solid var(--line);border-left:5px solid var(--ink); border-radius:var(--r);padding:22px 26px;margin-bottom:24px} .hc-vigia-head{flex:1 1 250px;min-width:0} .hc-vigia-eyebrow{display:flex;align-items:center;gap:7px;font-family:var(--text);font-size:11.5px; font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--green-text);margin:0 0 8px} .hc-vigia-eyebrow .hc-ic{width:15px;height:15px} .hc-vigia-name{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:0} .hc-vigia-name b{font-family:var(--head);font-weight:800;font-size:23px;color:var(--ink);line-height:1} .hc-vigia-price{font-family:var(--head);font-weight:700;font-size:14.5px;color:var(--faint)} .hc-vigia-price strong{color:var(--ink);font-size:17px} .hc-vigia-tag{font-size:14px;line-height:1.5;color:var(--body);margin:10px 0 0;max-width:36ch} .hc-vigia-feats{flex:2 1 380px;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:9px} .hc-vigia-feats li{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.42;color:var(--body)} .hc-vigia-feats .hc-ic{width:18px;height:18px;flex:none;margin-top:1px;color:var(--green-text)} .hc-vigia-feats small{display:block;color:var(--faint);font-size:12.5px;margin-top:3px;line-height:1.4} .hc-vigia-cta{flex:1 1 200px;display:flex;flex-direction:column;gap:8px} .hc-vigia-cta .hc-btn{width:100%} @media(min-width:720px){ .hc-vigia-feats{grid-template-columns:1fr 1fr;gap:10px 26px} .hc-vigia-cta{flex:0 0 250px} } /* --- Grid de 3 planes --- Las tarjetas son densas (listas largas + botón WhatsApp con avatar y white-space:nowrap). El hc-g3 genérico salta a 3 columnas en 720px y ahí no caben: el min-content de los botones deforma las columnas (anchos dispares) y desborda en horizontal. Este override las apila a 1 columna hasta 1000px y usa minmax(0,1fr) para que nunca se deformen por min-content. */ .hc-plans-grid{grid-template-columns:1fr} @media(min-width:1000px){ .hc-plans-grid{grid-template-columns:repeat(3,minmax(0,1fr))} } /* --- Listas de features de los 3 planes --- */ .hc-plan-feats{list-style:none;margin:8px 0 16px;padding:0;display:flex;flex-direction:column;flex:1} .hc-plan-feats li{display:flex;gap:10px;align-items:flex-start;padding:9px 0; border-top:1px solid var(--line-2);font-size:14px;line-height:1.42;color:var(--body)} .hc-plan-feats li:first-child{border-top:none} .hc-plan-feats .hc-ic{width:18px;height:18px;flex:none;margin-top:1px;color:var(--green-text)} .hc-plan-feats small{display:block;color:var(--faint);font-size:12.5px;margin-top:3px;line-height:1.4} .hc-plan-feats .hc-plan-more{font-family:var(--head);font-weight:700;color:var(--ink)} .hc-price-card--hot .hc-plan-feats li{border-color:rgba(255,255,255,.16);color:rgba(255,255,255,.9)} .hc-price-card--hot .hc-plan-feats .hc-ic{color:var(--green)} .hc-price-card--hot .hc-plan-feats small{color:rgba(255,255,255,.62)} /* --- Caja de horas incluidas (destacada, encima del botón) --- */ .hc-plan-hours{display:flex;gap:10px;align-items:center;min-height:60px;background:rgba(0,234,140,.1); border:1px solid rgba(0,234,140,.3);border-radius:12px;padding:11px 14px;margin:0 0 16px; font-family:var(--head);font-weight:700;font-size:15px;color:var(--ink);line-height:1.2} .hc-plan-hours .hc-ic{width:19px;height:19px;flex:none;color:var(--green-text)} .hc-price-card--hot .hc-plan-hours{background:rgba(0,234,140,.16);border-color:rgba(0,234,140,.45);color:#fff} .hc-price-card--hot .hc-plan-hours .hc-ic{color:var(--green)} /* --- Tagline de plan (argumento estrella Guardián) --- */ .hc-plan-tag{font-size:13.5px;line-height:1.5;color:var(--faint);font-style:italic;margin:0 0 14px} /* El reset global .hc p{margin:0} (0,0,1,1) pisa por especificidad los márgenes de estos

    (0,0,1,0): sin esto la caja de horas queda PEGADA al botón, el tagline pegado a las horas y la tira Vigía sin aire. Restauramos con selector de 2 clases (0,0,2,0), que gana al reset. */ .hc-price-card .hc-plan-hours{margin-bottom:18px} .hc-price-card .hc-plan-tag{margin-bottom:14px} .hc-vigia .hc-vigia-eyebrow{margin-bottom:8px} .hc-vigia .hc-vigia-tag{margin-top:10px} /* --- Chip "sin permanencia" universal --- */ .hc-plans-note{display:inline-flex;align-items:center;gap:9px;background:var(--ink);color:#fff; border-radius:999px;padding:9px 18px;font-family:var(--head);font-weight:600;font-size:14px} .hc-plans-note .hc-ic{width:17px;height:17px;flex:none;color:var(--green)} /* ============================================================ ENLACES DE CONTENIDO (2026-07) — fix "enlaces invisibles" Los dentro de bloques de texto (FAQ .hc-ans, entradillas .hc-lead, listas .hc-ck, pasos .hc-step, párrafos de tarjeta .hc-card p) heredaban `color:inherit` + `text-decoration:none` de `.hc a` (línea ~69), por lo que se veían IGUAL que el texto y sin hover (el reset .hc a:not(.hc-btn):hover de Accesibilidad forzaba color:inherit). Aquí un estilo BASE de enlace: verde de texto accesible + subrayado suave; hover más oscuro/intenso con subrayado pleno. El `:is()` eleva la especificidad del hover a (0,3,2), por encima de ese reset (0,3,1), para que el hover FUNCIONE. NO afecta a componentes-enlace (botones .hc-btn*, .hc-card-link, nav, breadcrumb, footer, toc, sources, tarjetas de blog/portfolio, logo): no están en la lista de contenedores. .hc-prose (blog) queda re-afirmado abajo para no cambiar de aspecto. Contraste AA verificado: base #00794f 5.46:1 (blanco) / 5.25:1 (--soft) / 4.77:1 (lavanda reviews); hover #005c3c 8.09:1; dark #00ea8c 8.35:1 (índigo). :focus-visible: outline global ya definido en la sección ACCESIBILIDAD. ============================================================ */ .hc :is(.hc-ans,.hc-lead,.hc-ck,.hc-step,.hc-card p) a{ color:var(--green-text); text-decoration:underline; text-decoration-color:rgba(0,121,79,.5); text-decoration-thickness:1.5px; text-underline-offset:2px; transition:color .14s ease,text-decoration-color .14s ease; } .hc :is(.hc-ans,.hc-lead,.hc-ck,.hc-step,.hc-card p) a:hover, .hc :is(.hc-ans,.hc-lead,.hc-ck,.hc-step,.hc-card p) a:focus-visible{ color:#005c3c; /* más oscuro/intenso */ text-decoration-color:currentColor; /* subrayado pleno al hover */ } /* Sobre fondos oscuros (heros de imagen + bandas índigo): verde de marca claro con subrayado; hover más brillante. (Las tarjetas BLANCAS dentro de un hero/ ink se re-afirman al verde oscuro más abajo.) */ .hc-ink :is(.hc-ans,.hc-lead,.hc-ck,.hc-step) a, .hc-hero--img :is(.hc-ans,.hc-lead,.hc-ck,.hc-step) a{ color:var(--green); text-decoration-color:rgba(0,234,140,.55); } .hc-ink :is(.hc-ans,.hc-lead,.hc-ck,.hc-step) a:hover, .hc-ink :is(.hc-ans,.hc-lead,.hc-ck,.hc-step) a:focus-visible, .hc-hero--img :is(.hc-ans,.hc-lead,.hc-ck,.hc-step) a:hover, .hc-hero--img :is(.hc-ans,.hc-lead,.hc-ck,.hc-step) a:focus-visible{ color:#5cffb9; text-decoration-color:currentColor; } /* Tarjetas blancas dentro de heros/bandas oscuras: enlace verde oscuro (no el verde neón, que sobre blanco sería ilegible). Mismo criterio que .hc-hero--img .hc-card .hc-ck (texto oscuro sobre tarjeta clara). */ .hc-hero--img .hc-card :is(.hc-ans,.hc-lead,.hc-ck,.hc-step) a, .hc-ink .hc-card :is(.hc-ans,.hc-lead,.hc-ck,.hc-step) a{ color:var(--green-text); text-decoration-color:rgba(0,121,79,.5); } .hc-hero--img .hc-card :is(.hc-ans,.hc-lead,.hc-ck,.hc-step) a:hover, .hc-hero--img .hc-card :is(.hc-ans,.hc-lead,.hc-ck,.hc-step) a:focus-visible, .hc-ink .hc-card :is(.hc-ans,.hc-lead,.hc-ck,.hc-step) a:hover, .hc-ink .hc-card :is(.hc-ans,.hc-lead,.hc-ck,.hc-step) a:focus-visible{ color:#005c3c; text-decoration-color:currentColor; } /* En el cuerpo del blog manda el estilo editorial (.hc-prose): si uno de estos contenedores aparece dentro del artículo (p. ej. una FAQ), el enlace conserva el aspecto prose (índigo + subrayado verde) y NO cambia. */ .hc-prose :is(.hc-ans,.hc-lead,.hc-ck,.hc-step,.hc-card p) a{ color:var(--ink); text-decoration-color:rgba(0,234,140,.6); } .hc-prose :is(.hc-ans,.hc-lead,.hc-ck,.hc-step,.hc-card p) a:hover, .hc-prose :is(.hc-ans,.hc-lead,.hc-ck,.hc-step,.hc-card p) a:focus-visible{ color:var(--ink); text-decoration-color:var(--green-text); }