/* ========================================================================== Holographic Certus Perú SAC · Home, propuesta Claude Sistema "Registro de seguridad". Todo el CSS está acotado a body.hc-claude, clase que solo recibe la página de esta propuesta. ========================================================================== */ body.hc-claude { /* Color corporativo y neutros */ --hc-navy: #1b2341; /* Manual: color corporativo */ --hc-navy-hover: #26305a; /* Verde de WhatsApp. #1f8f4e daba 4,12 contra el blanco, por debajo del 4,5 que exige AA. #1a7f45 da 4,98 y se sigue leyendo como el verde de la marca. */ --hc-wa: #1a7f45; /* verde oscurecido: para cuando el verde es TINTA sobre blanco */ --hc-wa-hover: #15683a; --hc-wa-marca: #25D366; /* el verde de WhatsApp: solo como SUPERFICIE, con texto oscuro */ --hc-wa-marca-hover: #1EBE5D; --hc-ink: #141a30; --hc-text: #3b4461; --hc-muted: #566079; --hc-line: #dde2ea; --hc-line-strong: #c3cad6; --hc-alt: #f4f6f9; --hc-white: #ffffff; --hc-on-navy: #ffffff; --hc-on-navy-2: #c9d0e3; --hc-on-navy-line: rgba(255, 255, 255, .16); --hc-focus: #144e9c; /* Colores por línea de producto (Manual, "Paleta cromática por línea de producto") */ --c-personalizados: #144e9c; --c-premium: #011b45; --c-generico: #4c6eaf; --c-credenciales: #144e9c; --c-etiquetas: #d42f2f; --c-trazabilidad: #1b2341; --c-void: #d42f2f; /* tono intermedio de VOID, a confirmar */ --c-cintas: #42a048; /* tono intermedio de Cintas, a confirmar */ --c-activos: #e76215; /* Platinum = tono Premium (decisión del cliente, 18-09-2026). Código de barras y QR: el acta del 18-09 decía "tono de Activos fijos", pero el 28-09 Hernando confirmó que se quedan en el azul de Personalizados. Manda esto. */ --c-platinum: #011b45; --c-barras: #144e9c; --c-qr: #144e9c; /* Espectro de la "i" del isotipo (Manual, posiciones del degradado) */ --hc-spectrum: linear-gradient(90deg, #089ed5 0%, #232c81 18.2%, #e00078 38%, #e01b26 56.9%, #fde709 75.6%, #008f36 90%, #008f36 100%); /* Tipografía */ --hc-font: "Geist", "Segoe UI", system-ui, -apple-system, sans-serif; --hc-fs-body: 1.0625rem; /* 17 px */ --hc-fs-small: .9375rem; /* 15 px */ --hc-fs-h1: clamp(2.25rem, 1.5rem + 2.4vw, 3.5rem); --hc-fs-h2: clamp(1.75rem, 1.25rem + 1.7vw, 2.625rem); --hc-fs-h3: 1.25rem; /* Espaciado y retícula */ --hc-max: 1240px; --hc-gutter: clamp(20px, 4vw, 48px); --hc-sec: clamp(56px, 6.5vw, 96px); --hc-radius: 8px; /* botones y controles */ --hc-r-card: 16px; /* tarjetas */ --hc-r-img: 10px; /* imágenes dentro de tarjetas */ --hc-shadow: 0 1px 2px rgba(20, 26, 48, .05), 0 10px 28px -18px rgba(20, 26, 48, .28); --hc-shadow-hover: 0 2px 4px rgba(20, 26, 48, .06), 0 18px 36px -18px rgba(20, 26, 48, .36); --hc-top: 0px; /* alto de la barra de administración, si existe (JS) */ --hc-header-h: 76px; /* Sangrado hasta el borde derecho de la ventana desde dentro de .hc-wrap */ --hc-bleed-r: calc(var(--hc-gutter) + max(0px, (100vw - (var(--hc-max) + 2 * var(--hc-gutter))) / 2)); /* Máscaras de fusión de la fotografía de presentación con el fondo */ --hc-fade-x: linear-gradient(to right, transparent 0%, rgba(0,0,0,.14) 20%, rgba(0,0,0,.5) 40%, rgba(0,0,0,.88) 60%, #000 74%); --hc-fade-y: linear-gradient(to top, transparent 0%, rgba(0,0,0,.35) 10%, rgba(0,0,0,.8) 22%, #000 34%); --hc-fade-t: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.35) 8%, rgba(0,0,0,.8) 18%, #000 28%); /* Movimiento (Emil Kowalski) */ --hc-ease: cubic-bezier(.23, 1, .32, 1); --hc-dur: 180ms; margin: 0; background: var(--hc-white); color: var(--hc-text); font-family: var(--hc-font); font-size: var(--hc-fs-body); line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-variant-numeric: tabular-nums; } html:has(body.hc-claude) { scroll-behavior: smooth; scroll-padding-top: calc(var(--hc-header-h) + 16px); } body.hc-claude ::selection { background: #144e9c; color: #fff; } /* ---------- Neutralizar espaciados por defecto de Elementor y del tema ---------- */ body.hc-claude .e-con { --padding-top: 0; --padding-right: 0; --padding-bottom: 0; --padding-left: 0; --gap: 0; --row-gap: 0; --column-gap: 0; --margin-top: 0; --margin-bottom: 0; } body.hc-claude .elementor-widget, /* Esta regla quitaba el margen de separación entre widgets, y usaba el atajo `margin`, que también pone a cero los laterales. Con (0,3,1) le ganaba a `.hc-measure { margin-inline: auto }`, que es (0,2,1), así que CUALQUIER nota que no fuera la última de su contenedor perdía el centrado y se iba a la izquierda, mientras la última sí se centraba. Encontrado el 30 de septiembre midiendo por qué dos notas idénticas de la misma sección caían en sitios distintos. Es muy probable que sea el origen del "todo se ve a la izquierda" del 26. Con `margin-block` se conserva la intención y se dejan en paz los márgenes laterales, que son los que centran. */ body.hc-claude .elementor-widget:not(:last-child) { margin-block: 0; } body.hc-claude .elementor-widget-container { margin: 0; padding: 0; } body.hc-claude .elementor-widget-text-editor p:last-child { margin-bottom: 0; } body.hc-claude a { color: inherit; } body.hc-claude img { display: block; max-width: 100%; height: auto; } /* ---------- Tipografía ---------- */ body.hc-claude h1, body.hc-claude h2, body.hc-claude h3, body.hc-claude .elementor-heading-title { font-family: var(--hc-font); color: var(--hc-ink); font-weight: 600; letter-spacing: -.022em; margin: 0; text-wrap: balance; } body.hc-claude .hc-h1 .elementor-heading-title { font-size: var(--hc-fs-h1); line-height: 1.04; letter-spacing: -.035em; } body.hc-claude .hc-h2 .elementor-heading-title { font-size: var(--hc-fs-h2); line-height: 1.1; letter-spacing: -.03em; } body.hc-claude .hc-h3 .elementor-heading-title { font-size: var(--hc-fs-h3); line-height: 1.3; } body.hc-claude p { margin: 0 0 1em; text-wrap: pretty; } body.hc-claude .hc-lead { font-size: 1.1875rem; line-height: 1.6; max-width: 60ch; } body.hc-claude .hc-small { font-size: var(--hc-fs-small); color: var(--hc-muted); } body.hc-claude .hc-measure { max-width: 64ch; } /* ---------- Estructura de secciones ---------- */ body.hc-claude .hc-sec { padding-block: var(--hc-sec); position: relative; } body.hc-claude .hc-sec--alt { background: var(--hc-alt); } body.hc-claude .hc-sec--navy { background: var(--hc-navy); color: var(--hc-on-navy-2); } /* ---------- Costura entre secciones ---------- Dos secciones seguidas con el mismo fondo no necesitan el aire de las dos: la de abajo entra con el 60 por ciento. Si cambia el fondo, o si la de abajo es la presentación azul o el contacto, el aire se queda entero. */ body.hc-claude .hc-sec + .hc-sec:not(.hc-sec--alt):not(.hc-sec--navy):not(.hc-contact), body.hc-claude .hc-sec--alt + .hc-sec--alt:not(.hc-contact) { padding-top: calc(var(--hc-sec) * .6); } body.hc-claude .hc-sec--alt + .hc-sec:not(.hc-sec--alt):not(.hc-sec--navy), body.hc-claude .hc-sec:not(.hc-sec--alt):not(.hc-sec--navy) + .hc-sec--alt { padding-top: var(--hc-sec); } body.hc-claude .hc-sec--navy .elementor-heading-title { color: var(--hc-on-navy); } body.hc-claude .hc-wrap { width: 100%; max-width: calc(var(--hc-max) + 2 * var(--hc-gutter)); margin-inline: auto; padding-inline: var(--hc-gutter); box-sizing: border-box; } body.hc-claude .hc-head { display: flex; flex-direction: column; gap: 18px; margin-bottom: clamp(28px, 3.4vw, 44px); max-width: 760px; } /* ---------- Botones ---------- */ body.hc-claude .hc-btn .elementor-button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 0 24px; font-family: var(--hc-font); font-size: 1rem; font-weight: 600; line-height: 1; letter-spacing: 0; border-radius: var(--hc-radius); border: 1px solid transparent; text-decoration: none; white-space: nowrap; transition: background-color var(--hc-dur) ease, color var(--hc-dur) ease, border-color var(--hc-dur) ease, transform 140ms var(--hc-ease); } body.hc-claude .hc-btn .elementor-button:active { transform: scale(.97); } /* 3 de octubre: el botón sólido tampoco lleva el color quemado. Sobre azul marino, un relleno azul marino es un botón invisible: pasaba en los tres banners de cintas. El contenedor oscuro redefine estas dos variables. */ body.hc-claude .hc-btn--primary .elementor-button { background: var(--btn-solid, var(--hc-navy)); color: var(--btn-solid-ink, #fff); } /* El botón de contorno no lleva la tinta quemada: la toma del contenedor, que la redefine cuando el fondo es oscuro (ver --ink-ghost en producto.css). */ body.hc-claude .hc-btn--ghost .elementor-button { background: transparent; color: var(--ink-ghost, var(--hc-navy)); border-color: var(--ink-ghost-line, var(--hc-line-strong)); } body.hc-claude .hc-btn--light .elementor-button { background: #fff; color: var(--hc-navy); } body.hc-claude .hc-btn--ghost-light .elementor-button { background: transparent; color: #fff; border-color: rgba(255,255,255,.42); } /* ---------- Llamado de ficha: botón del color de su línea ---------- El color vive en el contenedor, no en el enlace: así los modificadores de línea ganan siempre, sin pelear por especificidad con las reglas de enlace. */ body.hc-claude .hc-cta { --cta: var(--line, var(--hc-navy)); --cta-ink: #fff; margin-top: auto; padding-top: 14px; } body.hc-claude .hc-cta p { margin: 0; } /* Color por línea de destino, no por la página donde está la ficha */ body.hc-claude .hc-cta--generico { --cta: var(--c-generico); } /* Cada botón lee la variable de SU línea. Antes cuatro de ellos apuntaban a --c-personalizados y dos a --c-premium: cambiar el color de una línea no llegaba al botón. Hoy los valores coinciden, pero la conexión ya es la correcta. */ body.hc-claude .hc-cta--personalizados { --cta: var(--c-personalizados); } body.hc-claude .hc-cta--credenciales { --cta: var(--c-credenciales); } body.hc-claude .hc-cta--qr { --cta: var(--c-qr); } body.hc-claude .hc-cta--barras { --cta: var(--c-barras); } body.hc-claude .hc-cta--premium { --cta: var(--c-premium); } body.hc-claude .hc-cta--platinum { --cta: var(--c-platinum); } body.hc-claude .hc-cta--void { --cta: var(--c-void); } body.hc-claude .hc-cta--etiquetas { --cta: var(--c-etiquetas); } /* El verde y el naranja no aguantan texto blanco (3,31 y 3,45), y la tinta azul sobre ellos se quedaba en 4,66 y 4,52: pasaba el mínimo por los pelos y, sobre todo, rompía la lectura, porque los otros seis botones van en blanco. Se oscurece el fondo un 30 % hacia el azul corporativo, que mantiene el tono de la línea y devuelve el texto blanco a todos los botones por igual. */ body.hc-claude .hc-cta--cintas { --cta: color-mix(in srgb, var(--c-cintas) 70%, var(--hc-navy)); } body.hc-claude .hc-cta--activos { --cta: color-mix(in srgb, var(--c-activos) 70%, var(--hc-navy)); } body.hc-claude .hc-cta--trazabilidad { --cta: var(--c-trazabilidad); } body.hc-claude .hc-cta.elementor-widget-text-editor a, body.hc-claude .hc-cta a { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 46px; padding: 0 16px; box-sizing: border-box; background: var(--cta); color: var(--cta-ink); border: 1px solid transparent; border-radius: 10px; font-family: var(--hc-font); font-size: .875rem; font-weight: 600; line-height: 1.25; text-align: left; text-decoration: none; transition: box-shadow 180ms ease, border-color 180ms ease, transform 140ms var(--hc-ease); } body.hc-claude .hc-cta a::after { content: "\2192"; flex: 0 0 auto; font-size: 1rem; transition: transform 180ms var(--hc-ease); } body.hc-claude .hc-cta a:active { transform: scale(.985); } body.hc-claude .hc-cta a:focus-visible { outline: 2px solid var(--cta); outline-offset: 3px; } @media (hover: hover) and (pointer: fine) { body.hc-claude .hc-cta a:hover { box-shadow: inset 0 0 0 999px rgba(0, 0, 0, .14); } body.hc-claude .hc-cta a:hover::after { transform: translateX(4px); } body.hc-claude .hc-cta--cintas a:hover, body.hc-claude .hc-cta--activos a:hover { box-shadow: inset 0 0 0 999px rgba(0, 0, 0, .10); } } /* Página aún no publicada: contorno, nunca sólido */ body.hc-claude .hc-cta--pending.elementor-widget-text-editor a, body.hc-claude .hc-cta--pending a { background: transparent; color: var(--hc-muted); border-color: var(--hc-line-strong); } body.hc-claude .hc-cta--pending a:focus-visible { outline-color: var(--hc-muted); } @media (hover: hover) and (pointer: fine) { body.hc-claude .hc-cta--pending a:hover { box-shadow: none; border-color: var(--hc-navy); color: var(--hc-navy); } } @media (max-width: 640px) { body.hc-claude .hc-cta a { min-height: 48px; } } /* 1 de octubre, tarde: aquí había una llave de cierre suelta, sin nada que cerrar. El navegador la ignora, pero descuadraba el recuento y escondía errores reales. */ @media (hover: hover) and (pointer: fine) { body.hc-claude .hc-btn--primary .elementor-button:hover { background: var(--btn-solid-hover, var(--hc-navy-hover)); } body.hc-claude .hc-btn--ghost .elementor-button:hover { border-color: var(--hc-navy); } body.hc-claude .hc-btn--light .elementor-button:hover { background: #e9edf5; } body.hc-claude .hc-btn--ghost-light .elementor-button:hover { border-color: #fff; background: rgba(255,255,255,.06); } } body.hc-claude .hc-actions { display: flex; flex-wrap: wrap; gap: 12px; } /* Enlace de acción con flecha */ body.hc-claude .hc-link a, body.hc-claude a.hc-link { display: inline; font-weight: 600; font-size: var(--hc-fs-small); color: var(--hc-navy); text-decoration: underline; text-decoration-color: var(--hc-line-strong); text-underline-offset: 5px; text-decoration-thickness: 1px; transition: text-decoration-color var(--hc-dur) ease; } body.hc-claude .hc-link a::after, body.hc-claude a.hc-link::after { content: "→"; display: inline-block; margin-left: 8px; transition: transform var(--hc-dur) var(--hc-ease); } @media (hover: hover) and (pointer: fine) { body.hc-claude .hc-link a:hover, body.hc-claude a.hc-link:hover { text-decoration-color: currentColor; } body.hc-claude .hc-link a:hover::after, body.hc-claude a.hc-link:hover::after { transform: translateX(3px); } } /* Foco visible */ body.hc-claude a:focus-visible, body.hc-claude button:focus-visible, body.hc-claude summary:focus-visible, body.hc-claude .elementor-button:focus-visible { outline: 2px solid var(--hc-focus); outline-offset: 3px; border-radius: 2px; } body.hc-claude .hc-sec--navy a:focus-visible, body.hc-claude .hc-sec--navy .elementor-button:focus-visible, body.hc-claude .hc-footer a:focus-visible { outline-color: #fff; } /* ---------- Cabecera fija ---------- */ body.hc-claude .hc-header { position: sticky; top: var(--hc-top); z-index: 50; transition: transform 200ms var(--hc-ease), box-shadow 200ms ease; background: rgba(255,255,255,.96); -webkit-backdrop-filter: saturate(1.4) blur(8px); backdrop-filter: saturate(1.4) blur(8px); border-bottom: 1px solid var(--hc-line); } body.hc-claude .hc-header::before { content: ""; display: block; height: 3px; background: var(--hc-spectrum); } body.hc-claude .hc-header__bar { display: flex; align-items: center; gap: 28px; min-height: var(--hc-header-h); } body.hc-claude .hc-header__logo { flex: 0 0 auto; } body.hc-claude .hc-header__logo img { width: 190px; height: auto; } body.hc-claude .hc-header__nav { flex: 1 1 auto; min-width: 0; } body.hc-claude .hc-nav__list { flex-wrap: nowrap; } body.hc-claude .hc-nav { display: flex; align-items: center; gap: 4px; justify-content: center; } body.hc-claude .hc-nav__list { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; } body.hc-claude .hc-nav__list a { white-space: nowrap; } body.hc-claude .hc-nav__list a { display: block; padding: 10px 12px; border-radius: var(--hc-radius); font-size: .9375rem; font-weight: 500; color: var(--hc-ink); text-decoration: none; transition: background-color var(--hc-dur) ease; } /* Tinte del menú. Cada entrada lleva data-linea, que pone header() a partir de CTA_LINE; el color sale de las variables --c-* de este mismo archivo. Las entradas que no son producto no llevan el atributo y se quedan con el gris. Una sola regla de hover para todo el menú, y una línea por color. */ /* 18 %, no 10 %: al 10 % un azul marino da croma 6 y se lee como sombra gris, no como el color de la línea. Decisión de Hernando, 28-09. */ body.hc-claude .hc-nav [data-linea] { --nav-tinte: color-mix(in srgb, var(--nav-c) 18%, #fff); } body.hc-claude .hc-nav [data-linea="generico"] { --nav-c: var(--c-generico); } body.hc-claude .hc-nav [data-linea="personalizados"] { --nav-c: var(--c-personalizados); } body.hc-claude .hc-nav [data-linea="premium"] { --nav-c: var(--c-premium); } body.hc-claude .hc-nav [data-linea="platinum"] { --nav-c: var(--c-platinum); } body.hc-claude .hc-nav [data-linea="credenciales"] { --nav-c: var(--c-credenciales); } body.hc-claude .hc-nav [data-linea="qr"] { --nav-c: var(--c-qr); } body.hc-claude .hc-nav [data-linea="barras"] { --nav-c: var(--c-barras); } body.hc-claude .hc-nav [data-linea="etiquetas"] { --nav-c: var(--c-etiquetas); } body.hc-claude .hc-nav [data-linea="void"] { --nav-c: var(--c-void); } body.hc-claude .hc-nav [data-linea="activos"] { --nav-c: var(--c-activos); } body.hc-claude .hc-nav [data-linea="trazabilidad"] { --nav-c: var(--c-trazabilidad); } body.hc-claude .hc-nav [data-linea="cintas"] { --nav-c: var(--c-cintas); } @media (hover: hover) and (pointer: fine) { body.hc-claude .hc-nav a:hover { background: var(--nav-tinte, var(--hc-alt)); } } body.hc-claude .hc-nav__toggle { display: none; } /* ---------- Desplegable de Hologramas ---------- El panel cuelga de la entrada padre, que sigue siendo un enlace a la madre. El disparador del panel es un botón aparte, alcanzable con teclado. */ body.hc-claude .hc-nav__item { position: relative; } body.hc-claude .hc-nav__item--sub { display: flex; align-items: center; } body.hc-claude .hc-nav__sub-toggle { display: inline-grid; place-items: center; width: 26px; height: 32px; margin-left: -6px; padding: 0; border: 0; background: transparent; color: var(--hc-muted); cursor: pointer; border-radius: 6px; transition: color var(--hc-dur) ease, background-color var(--hc-dur) ease; } body.hc-claude .hc-nav__sub-toggle svg { width: 16px; height: 16px; transition: transform 200ms var(--hc-ease); } body.hc-claude .hc-nav__item--sub[data-sub="true"] .hc-nav__sub-toggle { color: var(--hc-ink); } body.hc-claude .hc-nav__item--sub[data-sub="true"] .hc-nav__sub-toggle svg { transform: rotate(180deg); } body.hc-claude .hc-nav__sub-toggle:focus-visible { outline: 2px solid var(--hc-focus); outline-offset: 2px; } body.hc-claude .hc-nav__sub { position: absolute; top: calc(100% + 10px); left: -12px; z-index: 40; width: 660px; max-width: calc(100vw - 32px); padding: 10px; background: #fff; border: 1px solid var(--hc-line); border-radius: var(--hc-r-card); box-shadow: 0 24px 48px -28px rgba(20, 26, 48, .42); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity 160ms ease, transform 180ms var(--hc-ease), visibility 0s linear 180ms; } body.hc-claude .hc-nav__item--sub[data-sub="true"] .hc-nav__sub { opacity: 1; visibility: visible; transform: none; transition: opacity 160ms ease, transform 180ms var(--hc-ease), visibility 0s; } /* Cintas tiene dos entradas: con los 660 px de los otros dos paneles quedaria medio vacio y descolgado de su propia entrada. Se estrecha a 520, que es lo justo para que las dos descripciones entren en un renglon. Sigue anclado a la izquierda, como los demas. Solo en escritorio: a 1024 el menu ya es acordeon. */ @media (min-width: 1025px) { body.hc-claude .hc-nav__sub--ct { width: 520px; } } body.hc-claude .hc-nav__sub ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; list-style: none; margin: 0; padding: 0; } body.hc-claude .hc-nav__sub a { display: block; padding: 11px 12px; border-radius: 10px; text-decoration: none; white-space: normal; } body.hc-claude .hc-nav__sub a b { display: block; font-size: .9375rem; font-weight: 600; color: var(--hc-ink); line-height: 1.3; } body.hc-claude .hc-nav__sub a span { display: block; margin-top: 2px; font-size: .8125rem; font-weight: 400; color: var(--hc-muted); line-height: 1.4; } @media (hover: hover) and (pointer: fine) { /* el tinte de la entrada lo resuelve la regla única de .hc-nav a:hover */ body.hc-claude .hc-nav__sub-toggle:hover { color: var(--hc-ink); background: var(--hc-alt); } } body.hc-claude .hc-nav__sub a:focus-visible { outline: 2px solid var(--hc-focus); outline-offset: -2px; } /* La página en la que estamos, y su madre. Esto estaba fijado al azul de personalizados, así que en una página de cintas la entrada activa salía azul, y en la barra no se sombreaba: era el mismo error de siempre, el color escrito en la etiqueta en vez de heredado del contenedor. Ahora sale de --nav-c, que ya lleva cada entrada por su data-linea. El texto va al 40 % sobre azul corporativo, que es el tinte más claro que pasa 4,5 en todas las líneas, incluidos los amarillos. Las que no son producto no tienen --nav-c y se quedan con la tinta de siempre. */ /* El FONDO se reserva para el cursor. La página en la que estamos se marca solo con color y grosor de letra: un fondo fijo se confunde con el del hover y parece que el menú se quedó encendido. Probado el 28 y retirado el mismo día. */ body.hc-claude .hc-nav__list li.is-active > a, body.hc-claude .hc-nav__item--sub.is-active-parent > a { color: color-mix(in srgb, var(--nav-c, var(--hc-ink)) 40%, var(--hc-navy)); font-weight: 600; } /* Aquí había un fondo para la entrada activa. Se retiró entero, no puesto en transparente: esa regla pesa más que la del cursor y le ganaba también a él. */ body.hc-claude .hc-nav__sub li.is-active a b { color: color-mix(in srgb, var(--nav-c, var(--hc-ink)) 40%, var(--hc-navy)); } body.hc-claude .hc-header__wa .elementor-button { background: transparent; color: var(--hc-ink); padding: 0 6px; min-height: 44px; font-weight: 500; font-size: .9375rem; } body.hc-claude .hc-header__wa .elementor-button-icon svg, body.hc-claude .hc-header__wa .elementor-button-icon i { width: 18px; height: 18px; font-size: 18px; fill: var(--hc-wa); color: var(--hc-wa); } body.hc-claude .hc-header__cta .elementor-button { min-height: 44px; padding: 0 18px; font-size: .9375rem; } /* Panel del menú móvil */ body.hc-claude .hc-nav__panel { display: contents; } /* ---------- Presentación principal ---------- La fotografía sale hasta el borde derecho de la ventana y se funde con el fondo mediante una máscara de transparencia. No lleva velo ni opacidad: la zona visible conserva su color y su brillo originales. */ body.hc-claude .hc-hero { padding-block: clamp(48px, 6vw, 88px) clamp(56px, 7vw, 104px); overflow: hidden; } body.hc-claude .hc-hero__grid { display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr); gap: clamp(24px, 3vw, 48px); align-items: center; } body.hc-claude .hc-hero__copy { display: flex; flex-direction: column; gap: 24px; position: relative; z-index: 1; } body.hc-claude .hc-hero .hc-h1 .elementor-heading-title { color: #fff; } body.hc-claude .hc-hero .hc-lead { color: #e4e8f2; } body.hc-claude .hc-hero .hc-support { color: var(--hc-on-navy-2); font-size: 1rem; max-width: 56ch; } body.hc-claude .hc-hero__media { position: relative; --width: calc(100% + var(--hc-bleed-r)); width: calc(100% + var(--hc-bleed-r)); max-width: none; } body.hc-claude .hc-hero__media img { width: 100%; height: clamp(420px, 41vw, 620px); object-fit: cover; object-position: 50% 50%; border-radius: 0; -webkit-mask-image: var(--hc-fade-x), var(--hc-fade-y), var(--hc-fade-t); mask-image: var(--hc-fade-x), var(--hc-fade-y), var(--hc-fade-t); -webkit-mask-composite: source-in, source-in, source-over; mask-composite: intersect, intersect, add; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; } /* ---------- Registro de confianza ---------- */ body.hc-claude .hc-ledger { border-bottom: 1px solid var(--hc-line); } body.hc-claude .hc-ledger__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); } body.hc-claude .hc-ledger__item { padding: 32px 28px 34px; border-left: 1px solid var(--hc-line); } body.hc-claude .hc-ledger__item:first-child { border-left: 0; padding-left: 0; } body.hc-claude .hc-ledger__item .hc-ledger__value { display: block; font-size: 1.375rem; font-weight: 600; color: var(--hc-ink); letter-spacing: -.02em; line-height: 1.25; margin-bottom: 6px; } body.hc-claude .hc-ledger__item p { font-size: var(--hc-fs-small); color: var(--hc-muted); margin: 0; } /* ---------- Productos ---------- */ body.hc-claude .hc-products__group + .hc-products__group { margin-top: clamp(36px, 4.5vw, 54px); } body.hc-claude .hc-group-title { display: flex; align-items: baseline; gap: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--hc-line-strong); margin-bottom: 28px; } body.hc-claude .hc-group-title .elementor-heading-title { font-size: 1rem; font-weight: 600; letter-spacing: 0; color: var(--hc-muted); } /* ---------- Fabricación en Perú ---------- */ body.hc-claude .hc-made { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 88px); align-items: center; } body.hc-claude .hc-made img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 2px; } body.hc-claude .hc-made__copy { display: flex; flex-direction: column; gap: 20px; } body.hc-claude .hc-made__copy p { color: var(--hc-on-navy-2); } body.hc-claude .hc-made__copy strong { color: #fff; font-weight: 600; } body.hc-claude .hc-made__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; margin-top: 4px; } body.hc-claude .hc-made__facts div { padding: 16px 0; border-top: 1px solid var(--hc-on-navy-line); font-size: var(--hc-fs-small); color: var(--hc-on-navy-2); } body.hc-claude .hc-made__facts b { display: block; color: #fff; font-weight: 600; font-size: 1rem; } /* ---------- Preguntas frecuentes ---------- */ body.hc-claude .hc-faq { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(32px, 6vw, 96px); align-items: start; } body.hc-claude .hc-faq .hc-faq__intro { display: flex; flex-direction: column; gap: 18px; } body.hc-claude .hc-faq .e-n-accordion { border-top: 1px solid var(--hc-line-strong); } body.hc-claude .hc-faq .e-n-accordion-item { border-bottom: 1px solid var(--hc-line); } body.hc-claude .hc-faq .e-n-accordion-item-title { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px 0; cursor: pointer; list-style: none; border: 0; background: transparent; } body.hc-claude .hc-faq .e-n-accordion-item-title::-webkit-details-marker { display: none; } body.hc-claude .hc-faq .e-n-accordion-item-title-text { font-family: var(--hc-font); font-size: 1.125rem; font-weight: 600; color: var(--hc-ink); letter-spacing: -.012em; line-height: 1.4; margin: 0; } body.hc-claude .hc-faq .e-n-accordion-item-title::after { content: ""; flex: 0 0 auto; width: 12px; height: 12px; border-right: 2px solid var(--hc-navy); border-bottom: 2px solid var(--hc-navy); transform: translateY(-3px) rotate(45deg); transition: transform 200ms var(--hc-ease); } body.hc-claude .hc-faq .e-n-accordion-item[open] > .e-n-accordion-item-title::after { transform: translateY(3px) rotate(-135deg); } body.hc-claude .hc-faq .e-n-accordion-item-title-icon { display: none; } body.hc-claude .hc-faq .e-n-accordion-item > .e-con { padding: 0 48px 24px 0; } body.hc-claude .hc-faq .e-n-accordion-item > .e-con p { font-size: 1rem; max-width: 68ch; } @media (hover: hover) and (pointer: fine) { body.hc-claude .hc-faq .e-n-accordion-item-title:hover .e-n-accordion-item-title-text { color: var(--c-personalizados); } } /* ---------- Ubicación ---------- */ body.hc-claude .hc-place { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 72px); align-items: stretch; } body.hc-claude .hc-place__info { display: flex; flex-direction: column; gap: 22px; } body.hc-claude .hc-place__rating { display: flex; flex-direction: column; gap: 4px; padding: 20px 0; border-block: 1px solid var(--hc-line-strong); } body.hc-claude .hc-place__rating b { font-size: 2rem; font-weight: 600; color: var(--hc-ink); letter-spacing: -.02em; line-height: 1.1; } body.hc-claude .hc-place__rating span { font-size: var(--hc-fs-small); color: var(--hc-muted); } body.hc-claude .hc-place address { font-style: normal; } body.hc-claude .hc-place__links { display: flex; flex-wrap: wrap; gap: 12px 28px; } body.hc-claude .hc-place__map, body.hc-claude .hc-place__map .elementor-custom-embed, body.hc-claude .hc-place__map iframe { width: 100%; height: 100%; min-height: 380px; border: 0; border-radius: 2px; display: block; } /* ---------- Contacto y cotización ---------- */ body.hc-claude .hc-contact { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 0; border: 1px solid var(--hc-line); border-radius: var(--hc-radius); overflow: hidden; } body.hc-claude .hc-contact__info { background: var(--hc-navy); color: var(--hc-on-navy-2); padding: clamp(32px, 4vw, 52px); display: flex; flex-direction: column; gap: 22px; } body.hc-claude .hc-contact__info .elementor-heading-title { color: #fff; } body.hc-claude .hc-contact__info .hc-lead { color: #e4e8f2; font-size: 1.0625rem; } body.hc-claude .hc-contact__list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 0; } body.hc-claude .hc-contact__list li { padding: 16px 0; border-top: 1px solid var(--hc-on-navy-line); font-size: var(--hc-fs-small); } body.hc-claude .hc-contact__list span { display: block; font-size: .8125rem; color: var(--hc-on-navy-2); margin-bottom: 2px; } body.hc-claude .hc-contact__list a, body.hc-claude .hc-contact__list b { color: #fff; font-weight: 600; font-size: 1rem; text-decoration: none; } body.hc-claude .hc-contact__list a { text-decoration: underline; text-decoration-color: rgba(255,255,255,.35); text-underline-offset: 4px; } body.hc-claude .hc-contact__form { background: #fff; padding: clamp(24px, 3.5vw, 44px); min-width: 0; } body.hc-claude .hc-contact__form iframe { width: 100% !important; max-width: 100%; border: 0; } /* ---------- Pie de página ---------- */ body.hc-claude .hc-footer { background: var(--hc-navy); color: var(--hc-on-navy-2); padding-block: clamp(56px, 7vw, 88px) 28px; font-size: var(--hc-fs-small); } body.hc-claude .hc-footer::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--hc-spectrum); } body.hc-claude .hc-footer__grid { display: grid; grid-template-columns: minmax(0, 5fr) repeat(2, minmax(0, 3fr)); gap: 40px 56px; } body.hc-claude .hc-footer__brand { display: flex; flex-direction: column; gap: 20px; } body.hc-claude .hc-footer__brand img { width: 220px; height: auto; } body.hc-claude .hc-footer p { margin: 0 0 .6em; } body.hc-claude .hc-footer .hc-footer__title { color: #fff; font-weight: 600; margin-bottom: 12px; font-size: 1rem; } body.hc-claude .hc-footer a { color: #fff; text-decoration: underline; text-decoration-color: rgba(255,255,255,.35); text-underline-offset: 4px; } body.hc-claude .hc-footer__law { flex: 0 0 100%; padding-top: 14px; border-top: 1px solid var(--hc-on-navy-line); } body.hc-claude .hc-footer__law a { color: inherit; text-decoration: underline; text-underline-offset: 3px; } body.hc-claude .hc-footer__legal { margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--hc-on-navy-line); font-size: .8125rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; } /* ---------- WhatsApp flotante ---------- */ body.hc-claude .hc-wa-float { position: fixed; right: 20px; bottom: 20px; z-index: 60; } body.hc-claude .hc-wa-float .elementor-button { width: 56px; height: 56px; min-height: 56px; padding: 0; border-radius: 50%; background: var(--hc-wa); color: #fff; box-shadow: 0 8px 24px -8px rgba(20, 26, 48, .45); transition: transform 140ms var(--hc-ease), background-color var(--hc-dur) ease; } body.hc-claude .hc-wa-float .elementor-button:active { transform: scale(.95); } body.hc-claude .hc-wa-float .elementor-button-icon svg, body.hc-claude .hc-wa-float .elementor-button-icon i { width: 26px; height: 26px; font-size: 26px; fill: #fff; color: #fff; } body.hc-claude .hc-wa-float .elementor-button-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } @media (hover: hover) and (pointer: fine) { body.hc-claude .hc-wa-float .elementor-button:hover { background: var(--hc-wa-hover); } } /* ========================================================================== Responsive ========================================================================== */ /* El teléfono del encabezado repetía lo que ya dicen el botón de cotización y el WhatsApp flotante, y con cinco entradas de menú empujaba la lista sobre el logo. Se retira del encabezado: el número sigue en el menú móvil, en contacto y en el pie. */ body.hc-claude .hc-header__wa { display: none; } @media (max-width: 1400px) { body.hc-claude .hc-header__bar { gap: 18px; } body.hc-claude .hc-nav__list a { padding: 10px 8px; font-size: .9375rem; } } @media (max-width: 1200px) { body.hc-claude .hc-header__bar { gap: 10px; } body.hc-claude .hc-nav__list a { padding: 10px 6px; font-size: .875rem; } body.hc-claude .hc-header__logo img { width: 168px; } } /* El gutter en vw deja décimas de píxel: se recortan para que no aparezca una barra lateral por un píxel. El panel del menú es fijo y no se ve afectado. */ body.hc-claude .hc-header { overflow-x: clip; } /* Entre 1025 y 1100 px el menú sigue horizontal y la barra va justa: se estrechan los botones para que quepa sin provocar scroll lateral. */ @media (max-width: 1100px) { body.hc-claude .hc-header__bar { gap: 10px; } body.hc-claude .hc-nav__list a { padding: 10px 6px; } body.hc-claude .hc-header__cta .elementor-button { padding: 0 14px; } body.hc-claude .hc-header__wa .elementor-button { padding: 0 6px; } } @media (max-width: 1024px) { body.hc-claude { --hc-header-h: 68px; } body.hc-claude .hc-header__bar { gap: 16px; } body.hc-claude .hc-header__logo img { width: 168px; } /* A este ancho el menú ya es móvil: el botón de cotizar no debe empujar la barra */ body.hc-claude .hc-header__cta .elementor-button { padding: 0 14px; font-size: .9375rem; } body.hc-claude .hc-header__bar { flex-wrap: nowrap; min-width: 0; } body.hc-claude .hc-header__wa .elementor-button { padding: 0 8px; } body.hc-claude .hc-hero__grid { grid-template-columns: 1fr; gap: clamp(28px, 5vw, 40px); } /* En una columna la foto se sangra a los dos lados y se disuelve por arriba */ body.hc-claude .hc-hero__media { --width: calc(100% + var(--hc-gutter) * 2); width: calc(100% + var(--hc-gutter) * 2); margin-left: calc(var(--hc-gutter) * -1); } body.hc-claude .hc-hero__media img { height: clamp(300px, 52vw, 460px); -webkit-mask-image: var(--hc-fade-t), var(--hc-fade-y); mask-image: var(--hc-fade-t), var(--hc-fade-y); } body.hc-claude .hc-ledger__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } body.hc-claude .hc-ledger__item:nth-child(3) { border-left: 0; padding-left: 0; } body.hc-claude .hc-ledger__item:nth-child(n+3) { border-top: 1px solid var(--hc-line); } body.hc-claude .hc-made { grid-template-columns: 1fr; } body.hc-claude .hc-faq { grid-template-columns: 1fr; } body.hc-claude .hc-place { grid-template-columns: 1fr; } body.hc-claude .hc-contact { grid-template-columns: 1fr; } body.hc-claude .hc-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } body.hc-claude .hc-footer__brand { grid-column: 1 / -1; } /* Menú móvil */ body.hc-claude .hc-header__nav { order: 3; flex: 0 0 auto; margin-left: 4px; } body.hc-claude .hc-header__bar .elementor-widget.hc-header__cta { margin-left: auto; } body.hc-claude .hc-nav__toggle { display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--hc-line-strong); border-radius: var(--hc-radius); background: #fff; color: var(--hc-ink); cursor: pointer; } body.hc-claude .hc-nav__toggle svg { width: 20px; height: 20px; } body.hc-claude .hc-nav__panel { display: block; position: fixed; left: 0; right: 0; top: var(--hc-panel-top, 71px); background: #fff; border-bottom: 1px solid var(--hc-line); box-shadow: 0 18px 32px -24px rgba(20,26,48,.35); padding: 8px var(--hc-gutter) 20px; opacity: 0; transform: translateY(-6px); visibility: hidden; transition: opacity 180ms ease, transform 200ms var(--hc-ease), visibility 0s linear 200ms; } body.hc-claude .hc-nav[data-open="true"] .hc-nav__panel { opacity: 1; transform: none; visibility: visible; transition: opacity 180ms ease, transform 200ms var(--hc-ease), visibility 0s; } body.hc-claude .hc-nav__list { flex-direction: column; gap: 0; } body.hc-claude .hc-nav__list a { padding: 14px 4px; font-size: 1.0625rem; border-bottom: 1px solid var(--hc-line); border-radius: 0; } /* En móvil no hay panel flotante: la entrada se despliega dentro del menú */ body.hc-claude .hc-nav__item--sub { display: grid; grid-template-columns: 1fr auto; align-items: center; } body.hc-claude .hc-nav__item--sub > a { grid-column: 1; } /* 15-10: el botón ocupa todo el alto de la fila, así su línea inferior coincide con la del enlace */ body.hc-claude .hc-nav__sub-toggle { grid-column: 2; width: 52px; height: auto; min-height: 44px; align-self: stretch; margin: 0; border-bottom: 1px solid var(--hc-line); border-radius: 0; } body.hc-claude .hc-nav__sub { grid-column: 1 / -1; position: static; width: auto; max-width: none; padding: 0; border: 0; border-radius: 0; box-shadow: none; background: transparent; transform: none; visibility: visible; opacity: 1; display: grid; grid-template-rows: 0fr; transition: grid-template-rows 200ms var(--hc-ease); } body.hc-claude .hc-nav__item--sub[data-sub="true"] .hc-nav__sub { grid-template-rows: 1fr; } body.hc-claude .hc-nav__sub > ul { overflow: hidden; grid-template-columns: 1fr; gap: 0; } body.hc-claude .hc-nav__sub a { padding: 12px 4px 12px 18px; border-bottom: 1px solid var(--hc-line); border-radius: 0; } body.hc-claude .hc-nav__sub a b { font-size: 1rem; } body.hc-claude .hc-nav__wa { display: block; padding: 16px 4px 4px; font-weight: 600; color: var(--hc-ink); text-decoration: none; } } @media (min-width: 1025px) { body.hc-claude .hc-nav__wa { display: none; } } @media (max-width: 767px) { body.hc-claude { --hc-fs-body: 1rem; } body.hc-claude .hc-header__logo img { width: 148px; } body.hc-claude .hc-header__cta .elementor-button { padding: 0 14px; font-size: .875rem; } body.hc-claude .hc-lead { font-size: 1.0625rem; } body.hc-claude .hc-actions .elementor-widget-button, body.hc-claude .hc-actions .elementor-button { width: 100%; } body.hc-claude .hc-ledger__grid { grid-template-columns: 1fr; } body.hc-claude .hc-ledger__item, body.hc-claude .hc-ledger__item:nth-child(n) { border-left: 0; padding: 22px 0; border-top: 1px solid var(--hc-line); } body.hc-claude .hc-ledger__item:first-child { border-top: 0; } body.hc-claude .hc-made__facts { grid-template-columns: 1fr; } body.hc-claude .hc-faq .e-n-accordion-item > .e-con { padding-right: 0; } body.hc-claude .hc-place__map, body.hc-claude .hc-place__map iframe { min-height: 300px; } body.hc-claude .hc-footer__grid { grid-template-columns: 1fr; } body.hc-claude .hc-wa-float { right: 14px; bottom: 14px; } } @media (prefers-reduced-motion: reduce) { html:has(body.hc-claude) { scroll-behavior: auto; } body.hc-claude *, body.hc-claude *::before, body.hc-claude *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; } } /* Utilidades complementarias */ body.hc-claude .hc-footer { position: relative; } body.hc-claude .hc-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } body.hc-claude .hc-header__bar, body.hc-claude .hc-actions, body.hc-claude .hc-group-title { flex-direction: row; } /* Ajustes tras la revisión responsive */ body.hc-claude .hc-header__bar { flex-wrap: nowrap; } @media (max-width: 767px) { body.hc-claude .hc-contact { border: 0; border-radius: 0; margin-inline: calc(-1 * var(--hc-gutter)); } body.hc-claude .hc-contact__info { padding: 36px var(--hc-gutter); } body.hc-claude .hc-contact__form { padding: 20px 8px 8px; } } @media (max-width: 480px) { body.hc-claude .hc-header__cta { display: none; } body.hc-claude .hc-header__bar .elementor-widget.hc-header__nav { margin-left: auto; } } /* Acordeón: neutralizar bordes y espaciados por defecto de Elementor */ body.hc-claude .hc-accordion { --n-accordion-border-width: 0px; --n-accordion-padding: 0px; --n-accordion-item-title-space-between: 0px; --n-accordion-item-title-distance-from-content: 0px; } body.hc-claude .hc-faq .e-n-accordion-item-title, body.hc-claude .hc-faq .e-n-accordion-item > .e-con { border: 0 !important; border-radius: 0 !important; background: transparent !important; } body.hc-claude .hc-faq .e-n-accordion-item-title:focus { outline: none; } body.hc-claude .hc-faq .e-n-accordion-item-title:focus-visible { outline: 2px solid var(--hc-focus); outline-offset: 4px; border-radius: 2px !important; } @media (min-width: 1025px) and (max-width: 1120px) { body.hc-claude .hc-header__logo img { width: 160px; } body.hc-claude .hc-nav__list a { font-size: .875rem; padding: 10px 6px; } body.hc-claude .hc-header__cta .elementor-button { padding: 0 14px; } } @media (max-width: 600px) { body.hc-claude .hc-header__wa { display: none; } } /* El editor de Elementor añade colores globales por elemento con mayor especificidad: se fijan los valores de los botones del sistema para que editor y web coincidan. */ body.hc-claude .hc-btn .elementor-button { font-family: var(--hc-font) !important; font-weight: 600 !important; border-radius: var(--hc-radius) !important; } body.hc-claude .hc-btn--primary .elementor-button { background-color: var(--btn-solid, var(--hc-navy)) !important; color: var(--btn-solid-ink, #fff) !important; } body.hc-claude .hc-btn--light .elementor-button { background-color: #fff !important; color: var(--hc-navy) !important; } body.hc-claude .hc-btn--ghost .elementor-button { background-color: transparent !important; color: var(--ink-ghost, var(--hc-navy)) !important; } body.hc-claude .hc-btn--ghost-light .elementor-button { background-color: transparent !important; color: #fff !important; } /* Los contenedores oscuros del sistema. La lista es la misma que la de los anillos de foco: donde el anillo tiene que ser claro, el botón sólido también. Si se añade un bloque oscuro nuevo, se añade aquí y en aquella. */ body.hc-claude .hc-sec--navy, body.hc-claude .hc-hero, body.hc-claude .hc-phero, body.hc-claude .hc-premium, body.hc-claude .hc-footer, body.hc-claude .hc-contact__info, body.hc-claude .hc-cmp__card--premium { --btn-solid: #fff; --btn-solid-ink: var(--hc-navy); --btn-solid-hover: #e9edf5; --tldr-fondo: rgba(255, 255, 255, .07); --tldr-borde: var(--hc-on-navy-line); --tldr-tinta: rgba(255, 255, 255, .88); --tldr-fuerte: #fff; --tldr-marca: rgba(255, 255, 255, .5); } body.hc-claude .hc-header__wa .elementor-button { background-color: transparent !important; color: var(--hc-ink) !important; font-weight: 500 !important; } body.hc-claude .hc-wa-float .elementor-button { background-color: var(--hc-wa) !important; color: #fff !important; border-radius: 50% !important; } @media (hover: hover) and (pointer: fine) { body.hc-claude .hc-btn--primary .elementor-button:hover { background-color: var(--btn-solid-hover, var(--hc-navy-hover)) !important; } body.hc-claude .hc-btn--light .elementor-button:hover { background-color: #e9edf5 !important; } body.hc-claude .hc-btn--ghost .elementor-button:hover { background-color: transparent !important; color: var(--ink-ghost, var(--hc-navy)) !important; } body.hc-claude .hc-btn--ghost-light .elementor-button:hover { background-color: rgba(255,255,255,.06) !important; color: #fff !important; } body.hc-claude .hc-wa-float .elementor-button:hover { background-color: var(--hc-wa-hover) !important; } } /* Foco visible en las cinco variantes. Va en dos capas para que se vea tanto sobre fondo claro como sobre fondo oscuro, sin depender del color de línea. */ body.hc-claude .hc-btn .elementor-button:focus-visible, body.hc-claude .hc-wa-float .elementor-button:focus-visible, body.hc-claude .hc-cta a:focus-visible { /* el anillo de foco lleva el color de la línea, como pide el manual */ outline: 3px solid var(--hc-focus); outline-offset: 2px; box-shadow: 0 0 0 5px rgba(255, 255, 255, .85); } /* 1 de octubre: el arreglo del 30 cubría los BOTONES sobre azul marino pero no los ENLACES de texto. Los dos de la madre de hologramas, dentro del bloque Premium, tenían el anillo del color de línea sobre #011b45: 1,10. */ body.hc-claude .hc-sec--navy .hc-btn .elementor-button:focus-visible, body.hc-claude .hc-phero .hc-btn .elementor-button:focus-visible, body.hc-claude .hc-premium .hc-btn .elementor-button:focus-visible, body.hc-claude .hc-footer .hc-btn .elementor-button:focus-visible, body.hc-claude .hc-contact__info .hc-btn .elementor-button:focus-visible, body.hc-claude .hc-sec--navy .hc-link a:focus-visible, body.hc-claude .hc-phero .hc-link a:focus-visible, body.hc-claude .hc-premium .hc-link a:focus-visible, body.hc-claude .hc-premium a:focus-visible, body.hc-claude .hc-contact__info .hc-link a:focus-visible { outline-color: #ffffff; box-shadow: 0 0 0 5px rgba(1, 27, 69, .85); } /* ========================================================================== Revisión 2 (18-09-2026): cabecera que se oculta, tarjetas y secciones renovadas ========================================================================== */ /* ---------- Cabecera: se oculta al bajar y reaparece al subir ---------- */ body.hc-claude .hc-header.is-hidden { transform: translateY(calc(-100% - var(--hc-top) - 2px)); } body.hc-claude .hc-header.is-scrolled { box-shadow: 0 8px 24px -20px rgba(20, 26, 48, .45); } /* ---------- Tarjetas de producto ---------- */ body.hc-claude .hc-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } body.hc-claude .hc-grid-5 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; } body.hc-claude .hc-product { --line: var(--hc-navy); position: relative; display: flex; flex-direction: column; gap: 12px; background: #fff; border: 1px solid var(--hc-line); border-radius: var(--hc-r-card); box-shadow: var(--hc-shadow); overflow: hidden; padding-bottom: 22px; transition: transform 200ms var(--hc-ease), box-shadow 200ms ease, border-color 200ms ease; } body.hc-claude .hc-product::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--line); z-index: 2; } body.hc-claude .hc-product > .elementor-element:not(.hc-product__img) { padding-inline: 22px; } body.hc-claude .hc-product__img { position: relative; overflow: hidden; margin-bottom: 6px; } body.hc-claude .hc-product__img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 320ms var(--hc-ease); } body.hc-claude .hc-product .hc-h3 .elementor-heading-title { font-size: 1.1875rem; } body.hc-claude .hc-grid-5 .hc-product .hc-h3 .elementor-heading-title { font-size: 1.0625rem; } body.hc-claude .hc-grid-5 .hc-product > .elementor-element:not(.hc-product__img) { padding-inline: 18px; } body.hc-claude .hc-product .hc-product__desc { font-size: var(--hc-fs-small); flex: 1 1 auto; } body.hc-claude .hc-product .hc-product__desc p { margin: 0; } body.hc-claude .hc-product .hc-product__meta { font-size: .8125rem; font-weight: 600; color: var(--hc-muted); } body.hc-claude .hc-product .hc-cta { padding-inline: 0; } @media (hover: hover) and (pointer: fine) { body.hc-claude .hc-product:hover { transform: translateY(-3px); box-shadow: var(--hc-shadow-hover); border-color: var(--hc-line-strong); } body.hc-claude .hc-product:hover .hc-product__img img { transform: scale(1.03); } } body.hc-claude .hc-product--personalizados { --line: var(--c-personalizados); } body.hc-claude .hc-product--premium { --line: var(--c-premium); } body.hc-claude .hc-product--platinum { --line: var(--c-platinum); } body.hc-claude .hc-product--void { --line: var(--c-void); } body.hc-claude .hc-product--cintas { --line: var(--c-cintas); } body.hc-claude .hc-product--barras { --line: var(--c-barras); } body.hc-claude .hc-product--qr { --line: var(--c-qr); } body.hc-claude .hc-product--activos { --line: var(--c-activos); } /* Etiqueta pequeña (solo donde el cliente la pidió: comparación) */ body.hc-claude .hc-label { font-size: .75rem !important; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; line-height: 1.3; } body.hc-claude .hc-label, body.hc-claude .hc-label .elementor-heading-title { color: var(--c-personalizados); } /* ---------- Dos caminos: tarjetas comparativas ---------- */ body.hc-claude .hc-cmp-head { display: flex; flex-direction: column; gap: 10px; margin-bottom: clamp(32px, 4vw, 48px); } body.hc-claude .hc-cmp-head .hc-label .elementor-heading-title { font-size: .75rem; letter-spacing: .14em; } body.hc-claude .hc-cmp { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: stretch; } /* box-sizing: el relleno de 28 px se sumaba al ancho de la columna, la pista 1fr crecía hasta 413 px dentro de un contenedor de 350 y la tarjeta se salía de la pantalla a 390 px. Mismo origen que el de .hc-origin__t: el sitio no tiene border-box general. Aquí se pone donde hace falta; lo general merece su propio encargo y su propia medición. */ body.hc-claude .hc-cmp__card { display: flex; flex-direction: column; gap: 18px; padding: 28px; box-sizing: border-box; min-width: 0; border-radius: var(--hc-r-card); border: 1px solid var(--hc-line); background: #fff; box-shadow: var(--hc-shadow); } body.hc-claude .hc-cmp__card--personalizados { border-top: 4px solid var(--c-personalizados); } body.hc-claude .hc-cmp__card--premium { background: var(--hc-navy); border-color: var(--hc-navy); color: var(--hc-on-navy-2); } body.hc-claude .hc-cmp__card--premium .elementor-heading-title { color: #fff; } body.hc-claude .hc-cmp__card--premium .hc-label .elementor-heading-title { color: #a9c4f0; } body.hc-claude .hc-cmp__card img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--hc-r-img); } body.hc-claude .hc-cmp__card .hc-h3 .elementor-heading-title { font-size: clamp(1.375rem, 1.1rem + .8vw, 1.75rem); line-height: 1.2; letter-spacing: -.025em; } body.hc-claude .hc-cmp__card .hc-cmp__text { font-size: var(--hc-fs-small); flex: 1 1 auto; } body.hc-claude .hc-cmp__time { border-top: 1px solid var(--hc-line); padding-top: 18px; font-size: var(--hc-fs-small); } body.hc-claude .hc-cmp__time strong { font-size: 1.1875rem; font-weight: 600; color: var(--hc-ink); } body.hc-claude .hc-cmp__card--premium .hc-cmp__time { border-top-color: var(--hc-on-navy-line); } body.hc-claude .hc-cmp__card--premium .hc-cmp__time strong { color: #fff; } body.hc-claude .hc-btn--blue .elementor-button { background-color: var(--c-personalizados) !important; color: #fff !important; } @media (hover: hover) and (pointer: fine) { body.hc-claude .hc-btn--blue .elementor-button:hover { background-color: #0f3f80 !important; } } body.hc-claude .hc-cmp-note { margin-top: 20px; font-size: .875rem; color: var(--hc-muted); } /* ---------- Una respuesta para cada necesidad: bento ---------- */ /* Con los encabezados centrados, este ya no puede emparejarse con su botón a la derecha: quedaba el título centrado dentro de su columna, o sea a la izquierda de la página. Una sola columna, el botón centrado debajo. */ body.hc-claude .hc-needs-head { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 24px; margin-bottom: clamp(32px, 4vw, 48px); } body.hc-claude .hc-needs-head > .hc-head { margin-bottom: 0; } body.hc-claude .hc-bento { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto; gap: 20px; } body.hc-claude .hc-tile { --accent: var(--hc-navy); position: relative; display: flex; flex-direction: column; gap: 12px; padding: 26px; border-radius: var(--hc-r-card); border: 1px solid var(--hc-line); background: #fff; box-shadow: var(--hc-shadow); } body.hc-claude .hc-tile .hc-h3 .elementor-heading-title { font-size: 1.1875rem; } body.hc-claude .hc-tile p { margin: 0; font-size: var(--hc-fs-small); } body.hc-claude .hc-tile--feature { grid-row: span 2; background: var(--hc-navy); border-color: var(--hc-navy); color: var(--hc-on-navy-2); padding: 34px; justify-content: flex-end; overflow: hidden; } body.hc-claude .hc-tile--feature::after { content: ""; position: absolute; left: 34px; right: 34px; top: 34px; height: 3px; border-radius: 2px; background: var(--hc-spectrum); opacity: .9; } body.hc-claude .hc-tile--feature .elementor-heading-title { color: #fff; } body.hc-claude .hc-tile--feature .hc-h3 .elementor-heading-title { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); letter-spacing: -.03em; } body.hc-claude .hc-tile--feature p { font-size: 1rem; } body.hc-claude .hc-tile--wide { grid-column: span 2; } body.hc-claude .hc-ico .elementor-icon-wrapper { line-height: 0; } body.hc-claude .hc-ico .elementor-icon { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; font-size: 19px; color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, #fff); } body.hc-claude .hc-ico .elementor-icon svg { width: 19px; height: 19px; fill: var(--accent); } body.hc-claude .hc-tile--feature .hc-ico .elementor-icon { color: #fff; background: rgba(255,255,255,.1); } body.hc-claude .hc-tile--feature .hc-ico .elementor-icon svg { fill: #fff; } body.hc-claude .hc-tile--void { --accent: var(--c-void); } body.hc-claude .hc-tile--cintas { --accent: var(--c-cintas); } body.hc-claude .hc-tile--activos { --accent: var(--c-activos); } body.hc-claude .hc-tile__row { display: flex; flex-direction: row; gap: 18px; align-items: flex-start; } body.hc-claude .hc-tile__row > .hc-tile__body { display: flex; flex-direction: column; gap: 8px; } /* ---------- Cada superficie: tarjetas de imagen con texto superpuesto ---------- */ body.hc-claude .hc-apps { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); grid-template-rows: repeat(2, minmax(250px, 1fr)); gap: 20px; } body.hc-claude .hc-app { position: relative; overflow: hidden; border-radius: var(--hc-r-card); min-height: 250px; isolation: isolate; box-shadow: var(--hc-shadow); background: var(--hc-navy); } body.hc-claude .hc-app--lead { grid-row: span 2; min-height: 520px; } body.hc-claude .hc-app > .elementor-widget-image { position: absolute; inset: 0; z-index: -2; } body.hc-claude .hc-app > .elementor-widget-image .elementor-widget-container, body.hc-claude .hc-app > .elementor-widget-image img { width: 100%; height: 100%; } body.hc-claude .hc-app img { object-fit: cover; transition: transform 400ms var(--hc-ease); } body.hc-claude .hc-app::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(14, 19, 40, 0) 30%, rgba(14, 19, 40, .82) 78%, rgba(14, 19, 40, .92) 100%); } /* 3 de octubre. La misma tarjeta, con vídeo en lugar de fotografía. El vídeo va en la capa de abajo igual que la imagen, así el degradado y el texto de hc-app__text siguen funcionando sin tocar nada más. */ body.hc-claude .hc-app > .hc-app__media { position: absolute; inset: 0; z-index: -2; } body.hc-claude .hc-app > .hc-app__media .elementor-widget-container { height: 100%; } body.hc-claude .hc-app .hc-vid { display: block; width: 100%; height: 100%; object-fit: cover; } body.hc-claude .hc-app--video { min-height: 320px; } body.hc-claude .hc-app--conmandos .hc-app__text { padding-bottom: 58px; } body.hc-claude .hc-app__text { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 28px; display: flex; flex-direction: column; gap: 6px; color: #e3e8f3; } body.hc-claude .hc-app__text .elementor-heading-title { color: #fff; } body.hc-claude .hc-app .hc-h3 .elementor-heading-title { font-size: 1.5rem; letter-spacing: -.025em; } body.hc-claude .hc-app--lead .hc-h3 .elementor-heading-title { font-size: clamp(1.625rem, 1.3rem + 1vw, 2.125rem); } /* ========================================================================== Centrado del contenido -------------------------------------------------------------------------- Criterio, en una frase: SE CENTRA EL BLOQUE, el texto sigue empezando por la izquierda. La única excepción son los encabezados de sección, que son cortos (rótulo, H2 y una entradilla) y van centrados del todo. Solo se centra lo que está SOLO ocupando el ancho de su contenedor. Lo que vive dentro de una columna, una ficha o una rejilla mantiene su alineación: la presentación a dos columnas, las migas, el pie, las fichas, los pasos, los chips, las celdas y los acordeones no se tocan. Nunca `text-align: justify`: el navegador no parte palabras y deja ríos de espacio entre ellas. La pauta WCAG 1.4.8 lo desaconseja. Un `max-width` sin `margin-inline: auto` deja el bloque pegado a la izquierda. Al añadir un `max-width` nuevo, decide aquí a cuál de los dos grupos pertenece. ========================================================================== */ /* --- Encabezado de sección: centrado del todo --- */ body.hc-claude .hc-head { margin-inline: auto; text-align: center; align-items: center; } /* el rótulo es un flex con su filete delante: el conjunto se centra como unidad */ body.hc-claude .hc-head .hc-label { justify-content: center; } /* centrar el padre y olvidar al hijo es el error fácil: el H2 y la entradilla llevan su propio max-width y se quedarían a la izquierda dentro del padre */ body.hc-claude .hc-head .hc-h2 .elementor-heading-title, body.hc-claude .hc-head .hc-lead { margin-inline: auto; } /* --- Párrafos y notas: el bloque al centro, el texto a la izquierda --- */ body.hc-claude .hc-measure { margin-inline: auto; } /* excepción: dentro de un bloque a dos columnas cada mitad mantiene su sitio */ body.hc-claude .hc-pp-split > .hc-measure, body.hc-claude .hc-duo > .hc-measure, body.hc-claude .hc-premium > .hc-measure { margin-inline: 0; } body.hc-claude .hc-apps__foot p { margin-inline: auto; } /* --- Párrafos sueltos cortos: el texto también va al centro --- */ /* Decisión de Hernando del 28 de septiembre, tras ver las páginas renderizadas. Centrar el bloque y dejar el texto en bandera se seguía leyendo como "esto está a la izquierda" en las notas de una o dos líneas: el bloque estaba centrado, pero su primera letra arrancaba a 240 px del borde y la línea corta dejaba un hueco irregular a la derecha. Con más de dos renglones no se centra, porque cada línea empezaría en un sitio distinto y cuesta encontrar la siguiente. La marca hc-centrado la pone txt() en hc_lib.py contando los caracteres del propio párrafo. Aquí solo se pinta. */ body.hc-claude .hc-measure.hc-centrado, body.hc-claude .hc-measure.hc-centrado p { text-align: center; } /* La excepción de siempre: dentro de una columna o de una ficha manda la columna, así que ahí no se centra ni el bloque ni el texto. */ body.hc-claude .hc-pp-split > .hc-measure.hc-centrado, body.hc-claude .hc-pp-split > .hc-measure.hc-centrado p, body.hc-claude .hc-duo > .hc-measure.hc-centrado, body.hc-claude .hc-duo > .hc-measure.hc-centrado p, body.hc-claude .hc-premium > .hc-measure.hc-centrado, body.hc-claude .hc-premium > .hc-measure.hc-centrado p { text-align: left; } /* Los subencabezados de bloque se quedan a la izquierda: Hernando lo decidió así el 28, para que se note que son un escalón por debajo del encabezado grande. */ body.hc-claude .hc-app__text p { margin: 0; font-size: var(--hc-fs-small); max-width: 46ch; } @media (hover: hover) and (pointer: fine) { body.hc-claude .hc-app:hover img { transform: scale(1.035); } } body.hc-claude .hc-apps__foot { margin-top: 20px; display: flex; flex-direction: row; flex-wrap: wrap; gap: 12px 32px; align-items: center; justify-content: space-between; padding: 20px 24px; border-radius: var(--hc-r-card); background: #fff; border: 1px solid var(--hc-line); } body.hc-claude .hc-apps__foot p { margin: 0; font-size: var(--hc-fs-small); color: var(--hc-text); max-width: 72ch; } /* ---------- Proceso: tarjetas conectadas y plazos ---------- */ body.hc-claude .hc-process { background: var(--hc-alt); } body.hc-claude .hc-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; position: relative; background-image: linear-gradient(90deg, var(--c-personalizados), var(--hc-navy)); background-repeat: no-repeat; background-size: 80% 2px; background-position: 50% 51px; } body.hc-claude .hc-step { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 10px; padding: 26px 24px 28px; background: #fff; border: 1px solid var(--hc-line); border-radius: var(--hc-r-card); box-shadow: var(--hc-shadow); } body.hc-claude .hc-step__top { display: flex; flex-direction: row; align-items: center; justify-content: space-between; margin-bottom: 8px; } body.hc-claude .hc-step__num { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--hc-navy); color: #fff; font-weight: 600; font-size: 1.125rem; line-height: 1; box-shadow: 0 0 0 6px #fff, 0 0 0 7px var(--hc-line); } body.hc-claude .hc-step__n p { margin: 0; } body.hc-claude .hc-step__top .hc-ico .elementor-icon { --accent: var(--c-personalizados); } body.hc-claude .hc-step .hc-h3 .elementor-heading-title { font-size: 1.1875rem; } body.hc-claude .hc-step p { margin: 0; font-size: var(--hc-fs-small); } body.hc-claude .hc-steps + .hc-times-head, body.hc-claude .hc-times-head { padding-top: clamp(48px, 6vw, 72px); padding-bottom: 20px; } body.hc-claude .hc-times-head .elementor-heading-title { font-size: 1.375rem; } body.hc-claude .hc-times { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.2fr); gap: 20px; align-items: stretch; } body.hc-claude .hc-time { --accent: var(--hc-navy); display: flex; flex-direction: column; gap: 4px; padding: 24px; border-radius: var(--hc-r-card); background: #fff; border: 1px solid var(--hc-line); border-top: 4px solid var(--accent); box-shadow: var(--hc-shadow); } body.hc-claude .hc-time--premium, body.hc-claude .hc-time--platinum { --accent: var(--c-premium); } body.hc-claude .hc-time p { margin: 0; } body.hc-claude .hc-time .hc-time__value { font-size: 2.5rem; font-weight: 600; letter-spacing: -.04em; line-height: 1; color: var(--hc-ink); } body.hc-claude .hc-time .hc-time__unit { font-size: .9375rem; font-weight: 600; color: var(--hc-ink); margin-top: 4px; } body.hc-claude .hc-time .hc-time__what { font-size: .875rem; color: var(--hc-muted); margin-top: 10px; } body.hc-claude .hc-time-note { padding: 24px; border-radius: var(--hc-r-card); background: var(--hc-navy); color: var(--hc-on-navy-2); font-size: var(--hc-fs-small); } body.hc-claude .hc-time-note p { margin: 0 0 .7em; } body.hc-claude .hc-time-note strong { color: #fff; } /* ---------- Responsive de la revisión 2 ---------- */ @media (max-width: 1200px) { body.hc-claude .hc-grid-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } body.hc-claude .hc-times { grid-template-columns: repeat(3, minmax(0, 1fr)); } body.hc-claude .hc-time-note { grid-column: 1 / -1; } } @media (max-width: 1024px) { body.hc-claude .hc-grid-3 { gap: 24px; } body.hc-claude .hc-product > .elementor-element:not(.hc-product__img) { padding-inline: 18px; } body.hc-claude .hc-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } body.hc-claude .hc-tile--feature { grid-row: auto; grid-column: 1 / -1; min-height: 260px; } body.hc-claude .hc-tile--wide { grid-column: 1 / -1; } body.hc-claude .hc-needs-head { grid-template-columns: 1fr; } body.hc-claude .hc-apps { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto; } body.hc-claude .hc-app--lead { grid-row: auto; grid-column: 1 / -1; min-height: 380px; } body.hc-claude .hc-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } body.hc-claude .hc-steps { background-image: none; } } @media (max-width: 767px) { body.hc-claude .hc-grid-3, body.hc-claude .hc-grid-5 { grid-template-columns: 1fr; gap: 16px; } body.hc-claude .hc-grid-3 .hc-product__img img { aspect-ratio: 16 / 10; } body.hc-claude .hc-grid-5 .hc-product { display: grid; grid-template-columns: 112px 1fr; gap: 6px 14px; padding: 16px 16px 16px 0; align-items: start; } body.hc-claude .hc-grid-5 .hc-product > .hc-product__img { grid-row: 1 / span 4; margin: -16px 0 -16px 0; align-self: stretch; } body.hc-claude .hc-grid-5 .hc-product > .hc-product__img img { aspect-ratio: auto; height: 100%; min-height: 150px; } body.hc-claude .hc-grid-5 .hc-product > .elementor-element:not(.hc-product__img) { padding-inline: 0; } body.hc-claude .hc-cmp { grid-template-columns: 1fr; } body.hc-claude .hc-cmp__card { padding: 22px; } body.hc-claude .hc-bento { grid-template-columns: 1fr; } body.hc-claude .hc-tile, body.hc-claude .hc-tile--feature { padding: 24px; } body.hc-claude .hc-tile--feature::after { left: 24px; right: 24px; top: 24px; } body.hc-claude .hc-apps { grid-template-columns: 1fr; } body.hc-claude .hc-app, body.hc-claude .hc-app--lead { min-height: 260px; grid-column: auto; } body.hc-claude .hc-app__text { padding: 20px; } body.hc-claude .hc-steps { grid-template-columns: 1fr; gap: 16px; } body.hc-claude .hc-steps { background-image: linear-gradient(180deg, var(--c-personalizados), var(--hc-navy)); background-size: 2px calc(100% - 80px); background-position: 48px 40px; } body.hc-claude .hc-times { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { body.hc-claude .hc-header { transition: none; } } /* Colores de texto: el kit global de Elementor impone gris a los editores de texto */ body.hc-claude .elementor-widget-text-editor { color: inherit !important; } body.hc-claude .hc-cmp__card--premium, body.hc-claude .hc-tile--feature, body.hc-claude .hc-time-note { color: #c9d0e3; } body.hc-claude .hc-app__text { color: #e3e8f3; } body.hc-claude .hc-ico .elementor-icon-wrapper { text-align: left; } body.hc-claude .hc-tile--feature p { color: #d5dbea; } body.hc-claude .elementor-widget-text-editor.hc-time-note { color: #c9d0e3 !important; } body.hc-claude .hc-ico .elementor-icon-wrapper { text-align: left !important; } body.hc-claude .hc-tile--feature { padding-top: 64px; } @media (max-width: 767px) { body.hc-claude .hc-tile--feature { padding-top: 52px; } } /* Revisión 3: el dato de fabricación queda alineado al pie de cada tarjeta */ body.hc-claude .hc-product > .hc-product__desc { flex: 1 1 auto !important; } body.hc-claude .hc-time .hc-time__what { line-height: 1.45; } /* ========================================================================== Encabezado en dos renglones (26-09-2026) Con seis entradas la lista del menú necesita unos 930 px y la franja central solo le daba 850, así que se salía por los dos lados y se montaba sobre el logo y sobre el botón de cotización. Pasaba en todos los anchos, incluso a 1600. La lista no puede encogerse: los rótulos van en nowrap. Solución: en escritorio el menú baja a su propio renglón, a lo ancho. ========================================================================== */ @media (min-width: 1025px) { body.hc-claude { --hc-header-h: 124px; } body.hc-claude .hc-header__bar { display: grid; grid-template-columns: auto 1fr auto auto; /* 1 de octubre: la celda "wa" estaba libre, porque el teléfono del encabezado se retiró el 26 de septiembre. Ahí entran las redes, que es justo a la izquierda del botón de cotización. */ grid-template-areas: "logo hueco redes cta" "nav nav nav nav"; align-items: center; column-gap: 18px; row-gap: 2px; min-height: var(--hc-header-h); padding-block: 10px; } body.hc-claude .hc-header__logo { grid-area: logo; } body.hc-claude .hc-header__wa { grid-area: redes; } /* oculto desde el 26-09 */ body.hc-claude .hc-header__redes { grid-area: redes; } body.hc-claude .hc-header__cta { grid-area: cta; } body.hc-claude .hc-header__nav { grid-area: nav; min-width: 0; } /* el menú va centrado en su renglón */ body.hc-claude .hc-nav { justify-content: center; } /* con renglón propio caben los rótulos a su tamaño natural */ body.hc-claude .hc-nav__list { gap: 2px; } body.hc-claude .hc-nav__list a { padding: 10px 12px; font-size: .9375rem; } body.hc-claude .hc-header__logo img { width: 190px; } /* una línea fina separa los dos renglones */ body.hc-claude .hc-header__nav { border-top: 1px solid var(--hc-line); padding-top: 6px; } } /* ---------- WhatsApp: el verde de marca, medido ---------- #25D366 es el verde de WhatsApp. Con texto blanco da 1,98 de contraste y no pasa; con el tinte del sitio da 8,68. Así que el verde de marca va de fondo y el texto y el icono van oscuros, que además es como lo pinta WhatsApp en sus botones claros. Donde el verde es tinta sobre blanco (el icono de la cabecera, el enlace del menú) se queda --hc-wa, el oscurecido, porque el de marca sobre blanco da 1,98 y no se leería. */ body.hc-claude .hc-btn--wa .elementor-button { background-color: var(--hc-wa-marca) !important; color: var(--hc-ink) !important; border-color: transparent !important; } body.hc-claude .hc-btn--wa .elementor-button-icon svg, body.hc-claude .hc-btn--wa .elementor-button-icon i { fill: var(--hc-ink); color: var(--hc-ink); } @media (hover: hover) and (pointer: fine) { body.hc-claude .hc-btn--wa .elementor-button:hover { background-color: var(--hc-wa-marca-hover) !important; } } body.hc-claude .hc-btn--wa .elementor-button:focus-visible { outline: 3px solid var(--hc-ink); outline-offset: 2px; } /* El flotante: mismo criterio, verde de marca con el icono oscuro. */ body.hc-claude .hc-wa-float .elementor-button { background: var(--hc-wa-marca); color: var(--hc-ink); } body.hc-claude .hc-wa-float .elementor-button { background-color: var(--hc-wa-marca) !important; color: var(--hc-ink) !important; } body.hc-claude .hc-wa-float .elementor-button-icon svg, body.hc-claude .hc-wa-float .elementor-button-icon i { fill: var(--hc-ink); color: var(--hc-ink); } @media (hover: hover) and (pointer: fine) { /* 1 de octubre, encontrado pasando el cursor DE VERDAD con Playwright: dos reglas anteriores (líneas 528 y 689) pintaban el flotante con --hc-wa-hover #15683a y una de ellas lleva !important, así que ganaba a esta. Resultado: al pasar el cursor el verde se oscurecía, la tinta seguía siendo oscura y el texto caía a 3,11 de contraste. En reposo daba 8,68, y por eso la comprobación de contraste anterior, que simulaba el hover duplicando reglas, no lo veía. */ body.hc-claude .hc-wa-float .elementor-button:hover { background-color: var(--hc-wa-marca-hover) !important; } } /* ---------- Las dos tarjetas de una comparativa, fila con fila ---------- Con flex cada tarjeta repartía su propio alto, así que la ficha de datos de una arrancaba más abajo que la de la otra y los botones no quedaban a la misma altura. Las seis filas son las mismas en las cinco comparativas del sitio: etiqueta, imagen, titular, texto, datos y llamado. */ @supports (grid-template-rows: subgrid) { @media (min-width: 768px) { body.hc-claude .hc-cmp { grid-template-rows: auto auto auto 1fr auto auto; } body.hc-claude .hc-cmp__card { display: grid; grid-row: span 6; grid-template-rows: subgrid; } } } /* ---------- El anillo de foco de un botón claro sobre azul marino ---------- Tomaba el color de la línea o el propio azul marino, así que se dibujaba y no se veía: 1,10 de contraste en la auditoría del 30. Sobre fondo oscuro el anillo tiene que ser claro. */ body.hc-claude .hc-sec--navy .hc-btn--light .elementor-button:focus-visible, body.hc-claude .hc-cmp__card--premium .hc-btn--light .elementor-button:focus-visible, body.hc-claude .hc-sec--navy .hc-btn--ghost-light .elementor-button:focus-visible, body.hc-claude .hc-cmp__card--premium .hc-link a:focus-visible { outline: 3px solid #fff; outline-offset: 3px; } /* ---------- Los dos llamados de una comparativa, del mismo tamaño ---------- Son dos componentes distintos: el de la izquierda es un .hc-cta, que nació para las fichas del catálogo y va a ancho completo con la flecha a la derecha; el de la derecha es un botón de Elementor, que se ajusta a su texto. Puestos uno al lado del otro se veían de tamaños distintos, y no era solo el ancho: diferían también en alto, relleno, cuerpo de letra y alineación. Aquí, y solo aquí, mandan las medidas del botón: 50 px de alto, 24 de relleno, 1rem y texto centrado. Y la flecha se retira de los dos, decisión de Hernando del 1 de octubre: en la comparativa los dos llamados pesan lo mismo, así que tienen que verse iguales. En las 37 fichas del catálogo la flecha se queda. */ body.hc-claude .hc-cmp__card .hc-cta a, body.hc-claude .hc-cmp__card .hc-btn .elementor-button { display: flex; width: 100%; min-height: 50px; padding: 0 24px; box-sizing: border-box; font-size: 1rem; line-height: 1.25; text-align: center; justify-content: center; align-items: center; border-radius: var(--hc-radius); } body.hc-claude .hc-cmp__card .hc-cta a::after { content: none; } /* ---------- Redes sociales en el pie · 1 de octubre ---------- El icono lleva el color de LÍNEA, no el de cada red. Pero el pie es azul marino y el color puro de línea ahí no se ve: el azul de hologramas da 1,91 contra el fondo y el de Premium 1,10, es decir, invisible. Es el mismo fallo que tenían los anillos de foco hasta el 30. Así que se aclara hacia el blanco: al 45% el peor caso de las seis líneas queda en 5,29, por encima del 3:1 que pide una marca y también del 4,5 de texto. En la portada no hay --line, y entonces cae al azul corporativo: 5,63. */ body.hc-claude .hc-footer__col { display: flex; flex-direction: column; } body.hc-claude .hc-footer .hc-footer__title--redes { margin-top: 26px; } body.hc-claude .hc-redes { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 22px; } body.hc-claude .hc-redes a { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; color: #fff; border-radius: 8px; padding: 2px; } body.hc-claude .hc-redes__ico { display: inline-flex; color: color-mix(in srgb, var(--line, var(--hc-navy)) 45%, #fff); } body.hc-claude .hc-redes__ico svg { width: 24px; height: 24px; display: block; } body.hc-claude .hc-redes__t { text-decoration: underline; text-decoration-color: rgba(255,255,255,.35); text-underline-offset: 4px; } /* 1 de octubre, corregido el mismo día: esta regla aclaraba el icono a BLANCO al pasar el cursor. En el pie está bien, porque el fondo es azul marino. En la barra de arriba el fondo es blanco, así que el logotipo desaparecía. Se encierra en el pie, que es para lo que se escribió. */ @media (hover: hover) and (pointer: fine) { body.hc-claude .hc-footer .hc-redes a:hover .hc-redes__ico { color: #fff; } } body.hc-claude .hc-redes a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; } /* ---------- Tira de fotografías con el tratamiento de la portada ---------- .hc-apps es la rejilla de la portada: una grande y dos al lado. Las páginas internas necesitan una tira de iguales, y el NÚMERO vive en el contenedor, como --hco-n y --hcs-n, no repetido en cada ficha. */ body.hc-claude .hc-apps--tira { --hca-n: 3; grid-template-columns: repeat(var(--hca-n), minmax(0, 1fr)); grid-template-rows: auto; } body.hc-claude .hc-apps--n1 { --hca-n: 1; } body.hc-claude .hc-apps--n2 { --hca-n: 2; } body.hc-claude .hc-apps--n3 { --hca-n: 3; } body.hc-claude .hc-apps--n4 { --hca-n: 4; } body.hc-claude .hc-apps--tira .hc-app { min-height: 300px; } body.hc-claude .hc-apps--n1 .hc-app { min-height: 420px; } @media (max-width: 900px) { body.hc-claude .hc-apps--tira { --hca-n: 2; } body.hc-claude .hc-apps--n1 { --hca-n: 1; } } @media (max-width: 600px) { body.hc-claude .hc-apps--tira, body.hc-claude .hc-apps--n1 { --hca-n: 1; } body.hc-claude .hc-apps--tira .hc-app { min-height: 260px; } } /* ---------- Redes en la barra de arriba · 1 de octubre ---------- Solo el icono. La barra ya iba justa: por debajo de 1200 px el CSS de abajo estrecha los botones para evitar el scroll lateral, así que a partir de ahí las redes se esconden de la barra y viven en el panel del menú. Sobre blanco el color de línea puro cumple el 3:1 de una marca en las seis líneas del catálogo (la más justa, el verde de cintas, 3,31), así que aquí no hace falta aclararlo como en el pie. */ body.hc-claude .hc-header__redes { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; } body.hc-claude .hc-header__redes > .elementor-widget-container { display: flex; align-items: center; gap: 10px; } body.hc-claude .hc-redes__rotulo { margin: 0; font-size: .8125rem; font-weight: 600; color: var(--hc-muted); white-space: nowrap; } @media (max-width: 1340px) { body.hc-claude .hc-redes__rotulo { display: none; } } body.hc-claude .hc-header__redes .hc-redes { gap: 4px; } body.hc-claude .hc-header__redes .hc-redes a { padding: 7px; border-radius: 9px; color: inherit; } body.hc-claude .hc-header__redes .hc-redes__ico { color: var(--line-graphic, var(--hc-navy)); } body.hc-claude .hc-header__redes .hc-redes__ico svg { width: 24px; height: 24px; display: block; } @media (hover: hover) and (pointer: fine) { /* Sobre blanco el icono se OSCURECE al pasar el cursor, no se aclara. El fondo gris muy claro solo marca la zona pulsable. */ body.hc-claude .hc-header__redes .hc-redes a:hover { background: #eef1f6; } body.hc-claude .hc-header__redes .hc-redes a:hover .hc-redes__ico { color: var(--hc-navy); } body.hc-claude .hc-nav__redes .hc-redes a:hover .hc-redes__ico { color: var(--hc-navy); } } body.hc-claude .hc-header__redes .hc-redes a:focus-visible { outline: 2px solid var(--line-graphic, var(--hc-navy)); outline-offset: 2px; } @media (max-width: 1200px) { body.hc-claude .hc-header__redes { display: none; } } /* En el panel del menú, debajo del WhatsApp. Ahí el fondo es claro, así que el icono va con el color de línea y el nombre sí se escribe. */ body.hc-claude .hc-nav__redes { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--hc-line); } body.hc-claude .hc-nav__redes .hc-redes { gap: 8px 20px; } body.hc-claude .hc-nav__redes .hc-redes a { color: var(--hc-ink); gap: 10px; padding: 6px 2px; } body.hc-claude .hc-nav__redes .hc-redes__ico { color: var(--line-graphic, var(--hc-navy)); } body.hc-claude .hc-nav__redes .hc-redes__ico svg { width: 22px; height: 22px; } body.hc-claude .hc-nav__redes .hc-redes__t { text-decoration-color: rgba(27,35,65,.35); } body.hc-claude .hc-nav__redes .hc-redes a:focus-visible { outline: 2px solid var(--line-graphic, var(--hc-navy)); outline-offset: 2px; } /* El bloque de redes del panel del menú es para el cajón de móvil. En escritorio el panel es la lista horizontal y ahí no pinta nada: salía suelto bajo el botón de cotización. */ @media (min-width: 1025px) { body.hc-claude .hc-nav__redes { display: none; } } /* ---------- La ficha con vídeo de la portada · 1 de octubre ---------- El vídeo sustituye al icono dentro de la misma tarjeta, así que la rejilla de cuatro no se toca. Relación 16:9 reservada de antemano para que al cargar no salte el resto de la página. */ body.hc-claude .hc-tile--video .hc-tile__media { margin-bottom: 4px; } body.hc-claude .hc-tile--video .hc-vid { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--hc-r-img); background: var(--hc-navy); box-shadow: 0 10px 28px rgba(14, 19, 40, .18); } @media (max-width: 600px) { body.hc-claude .hc-tile--video .hc-vid { aspect-ratio: 16 / 10; } } /* ---------- Los botones del banner, a la misma altura · 1 de octubre ---------- Medido antes de tocar nada: la fila de botones arrancaba a 500 px del borde del banner en código de barras y a 692 en Platinum, y la distancia al fondo iba de 107 a 366 px. Cada banner tiene un texto de distinto largo y los botones iban detrás, así que caían donde caían. Ahora la columna del banner empuja los botones al fondo: cambia el texto, no la posición del botón. 1 de octubre, tarde. Corrección del efecto secundario. «min-height: 100%» estiraba la columna hasta el alto de la fotografía, 562 px, y el sobrante se lo quedaba entero el margen automático: medido, el hueco entre el último párrafo y los botones iba de 22 px en personalizados a 263 en VOID. Los botones quedaban alineados, sí, pero con un agujero en medio. Ahora la columna tiene un alto MÍNIMO en vez de uno forzado. Los banners de texto corto siguen empujando los botones hasta esa línea, así que entre ellos siguen alineados; los de texto largo los llevan justo detrás del texto. El hueco queda topado por la diferencia hasta ese mínimo, no por el alto de la foto. */ body.hc-claude .hc-phero__copy, body.hc-claude .hc-hero__copy { display: flex; flex-direction: column; min-height: clamp(280px, 25vw, 360px); } body.hc-claude .hc-phero__copy > .hc-actions, body.hc-claude .hc-hero__copy > .hc-actions { margin-top: auto; padding-top: 8px; } @media (max-width: 900px) { /* En móvil la columna ya no tiene alto sobrante que repartir. */ body.hc-claude .hc-phero__copy > .hc-actions, body.hc-claude .hc-hero__copy > .hc-actions { margin-top: 0; } } /* ========================================================================== 14-10-2026: botón «Ver catálogo» en la cabecera, entre las redes y el botón de cotización. Lleva al catálogo estático de /catalogo/. ========================================================================== */ body.hc-claude .hc-header__cat .elementor-button { min-height: 44px; padding: 0 16px; font-size: .9375rem; white-space: nowrap; } @media (min-width: 1025px) { body.hc-claude .hc-header__bar { grid-template-columns: auto 1fr auto auto auto; grid-template-areas: "logo hueco redes cat cta" "nav nav nav nav nav"; } body.hc-claude .hc-header__cat { grid-area: cat; } } @media (max-width: 1024px) { body.hc-claude .hc-header__bar .elementor-widget.hc-header__cat { margin-left: auto; } body.hc-claude .hc-header__bar .elementor-widget.hc-header__cta { margin-left: 0; } body.hc-claude .hc-header__cat .elementor-button { padding: 0 12px; } } @media (max-width: 480px) { body.hc-claude .hc-header__bar .elementor-widget.hc-header__nav { margin-left: 0; } body.hc-claude .hc-header__cat .elementor-button { min-height: 40px; padding: 0 10px; font-size: .875rem; } } /* 14-10-2026: color del botón de catálogo */ /* Tinte suave del azul corporativo: se distingue del resto sin competir con el botón de cotización */ body.hc-claude .hc-header__bar .hc-header__cat .elementor-button { background-color: #eaf1fc !important; color: #144e9c !important; border: 1px solid #b4caee !important; } @media (hover: hover) { body.hc-claude .hc-header__bar .hc-header__cat .elementor-button:hover { background-color: #dbe7fa !important; color: #0f3f80 !important; border-color: #144e9c !important; } } body.hc-claude .hc-header__bar .hc-header__cat .elementor-button:focus-visible { outline: 2px solid #144e9c; outline-offset: 2px; } /* 14-10-2026: catálogo en celulares angostos */ /* Por debajo de 400 px no cabe «Ver catálogo» entre el logo y el menú: se muestra «Catálogo» y el logo baja un poco */ @media (max-width: 400px) { body.hc-claude .hc-header__logo img { width: 128px; } body.hc-claude .hc-header__bar .hc-header__cat .elementor-button { padding: 0 8px; min-height: 40px; } body.hc-claude .hc-header__cat .elementor-button-text { font-size: 0; } body.hc-claude .hc-header__cat .elementor-button-text::after { content: "Catálogo"; font-size: .8125rem; } } /* ---- 15-10 iPhone: el menú móvil no se abría ---- En Safari de iPhone, el desenfoque de fondo (backdrop-filter) de la cabecera recorta el panel fijo del menú, que queda dentro de la cabecera y no se ve. En móvil la cabecera va con fondo blanco sólido y sin desenfoque. */ @media (max-width: 1024px) { body.hc-claude .hc-header { background: #fff; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } } /* ---- 15-10 reCAPTCHA: el sello ocupaba mucho ---- El CSS adicional lo pasa a la izquierda y así se veía entero (256 px). Se deja plegado en el logo, visible como pide Google; se abre al pasar el ratón. */ .grecaptcha-badge { width: 70px !important; overflow: hidden !important; transition: width .3s ease !important; } .grecaptcha-badge:hover { width: 256px !important; }