/* ========================================================================== Holographic Certus Perú SAC · Páginas de producto (propuesta Claude) Se carga DESPUÉS de holo-claude.css y solo en páginas con body.hc-pp. Regla de color (Manual de Identidad 2026, "Paleta cromática por línea de producto"): - Estructura en azul corporativo #1b2341 (cabecera, pie, textos, hero oscuro). - Acento protagonista = color de la línea (--line): filetes, numeración, iconos, ledger, subrayados, miga activa, foco, etiquetas y fondos suaves. - Botón principal igual al Home; el color de línea solo en borde o foco. ========================================================================== */ /* ---------- Color por página ---------- */ body.hc-claude.hc-pp { --line: var(--hc-navy); --line-soft: color-mix(in srgb, var(--line) 8%, #fff); /* fondo suave */ --line-soft-2: color-mix(in srgb, var(--line) 14%, #fff); --line-ink: #ffffff; /* texto sobre el color de línea */ --line-text: var(--line); /* color de línea usado como texto sobre blanco (si cumple AA) */ /* Tinta de las MARCAS: iconos, filetes, anillos de foco y trazos de dibujo. Una marca no es texto: su umbral es 3:1, no 4,5, y las seis líneas del catálogo lo cumplen sobre blanco (la más justa, el verde de cintas, 3,31). Por eso aquí va el color de línea de verdad, aunque --line-text sea azul. */ --line-graphic: var(--line); /* Sobre la chapa clara (--line-soft) el color puro se queda en 3,03, al borde del 3:1. Se oscurece hacia el azul corporativo sin cambiar de tono. */ --line-graphic-soft: color-mix(in srgb, var(--line) 78%, var(--hc-navy)); /* Texto con el tinte de la línea: 40% es lo más claro que cumple 4,5 en TODAS las líneas, incluidos los amarillos. Para marcas, --line-graphic; para texto, esta o --line-text. */ --line-text-tint: color-mix(in srgb, var(--line) 40%, var(--hc-navy)); --line-on-dark: color-mix(in srgb, var(--line) 40%, #fff); /* acento legible sobre el azul corporativo */ --hc-focus: var(--line-graphic); /* Tinta de los enlaces de contenido. Vive en el contenedor, nunca en el anchor: cualquier bloque de fondo oscuro la redefine y el enlace la hereda. */ --ink-link: var(--line-text); /* enlace normal */ --ink-link-strong: var(--hc-navy); /* enlace destacado (.hc-link) */ --ink-link-line: color-mix(in srgb, var(--line) 45%, transparent); --ink-link-line-strong: var(--hc-line-strong); } /* Los bloques de fondo oscuro redefinen la tinta una sola vez. Cualquier contenedor oscuro nuevo se añade aquí; el enlace no se pinta nunca a mano. */ body.hc-claude .hc-sec--navy, body.hc-claude .hc-phero, body.hc-claude .hc-premium, body.hc-claude .hc-contact__info, body.hc-claude .hc-footer, body.hc-claude .hc-callout--solid, body.hc-claude .hc-cmp__card--premium, body.hc-claude .hc-on-dark { --ink-link: #ffffff; --ink-link-strong: #ffffff; --ink-link-line: rgba(255, 255, 255, .4); --ink-link-line-strong: rgba(255, 255, 255, .55); --ink-ghost: #ffffff; --ink-ghost-line: rgba(255, 255, 255, .42); } /* Holograma Personalizado · #144e9c · contraste 8,1:1 sobre blanco (AA) */ body.hc-claude.hc-page-personalizados { --line: #144e9c; } /* Premium y Platinum comparten el tono #011b45 del manual. Platinum se distingue con un acento plateado en los filetes, no con otro color de línea. */ body.hc-claude.hc-page-premium { --line: #011b45; } body.hc-claude.hc-page-platinum { --line: #011b45; --line-accent: #8fa3c9; } body.hc-claude.hc-page-platinum .hc-origin li::after, body.hc-claude.hc-page-platinum .hc-subcard::before { background: linear-gradient(90deg, var(--line) 0 44%, var(--line-accent) 44% 56%, var(--line) 56%); } body.hc-claude.hc-page-platinum .hc-pledger__item::before { background: var(--line-accent); } /* Documentos y credenciales: la página cubre las dos líneas, así que usa el azul de Personalizado como color de página y el de Premium como acento del bloque comparativo. Holograma QR es una variante de Personalizado y hereda su azul. */ body.hc-claude.hc-page-credenciales { --line: #144e9c; --line-accent: #011b45; } body.hc-claude.hc-page-qr { --line: #144e9c; } body.hc-claude.hc-page-barras { --line: #144e9c; } body.hc-claude.hc-page-etiquetas { --line: #d42f2f; } /* Páginas publicadas de las otras dos familias. Estaban dentro del comentario de abajo desde que se escribieron, así que las tres salían en azul corporativo. Sobre tonos claros el texto va en azul, porque el verde y el naranja no cumplen AA como texto: #42a048 da 3,31 sobre blanco y #e76215 da 3,45. */ body.hc-claude.hc-page-void { --line: #d42f2f; } body.hc-claude.hc-page-cintas { --line: #42a048; --line-text: var(--hc-navy); } body.hc-claude.hc-page-activos { --line: #e76215; --line-ink: #1b2341; --line-text: var(--hc-navy); } /* Próximas páginas (valores del manual). Sobre tonos claros el texto va en azul corporativo: body.hc-page-premium { --line:#011b45; } body.hc-page-generico { --line:#4c6eaf; } body.hc-page-transferencia { --line:#f3a62a; --line-ink:#1b2341; --line-text:var(--hc-navy); } body.hc-page-polipropilenos { --line:#fed937; --line-ink:#1b2341; --line-text:var(--hc-navy); } body.hc-page-termicos { --line:#fff277; --line-ink:#1b2341; --line-text:var(--hc-navy); } body.hc-page-activos { --line:#e76215; --line-ink:#1b2341; --line-text:var(--hc-navy); } */ /* Tipografía: el kit global de Elementor impone Roboto y Poppins en los widgets de texto y HTML. En las páginas de producto se fija Geist, la tipografía del sistema. */ body.hc-claude.hc-pp .elementor-widget-text-editor, body.hc-claude.hc-pp .elementor-widget-html, body.hc-claude.hc-pp .elementor-widget-image .widget-image-caption { font-family: var(--hc-font) !important; } body.hc-claude.hc-pp ::selection { background: var(--line); color: var(--line-ink); } body.hc-claude.hc-pp .hc-label, body.hc-claude.hc-pp .hc-label .elementor-heading-title { color: var(--line-text); } body.hc-claude.hc-pp .hc-head .hc-label { display: flex; align-items: center; gap: 10px; } body.hc-claude.hc-pp .hc-head .hc-label .elementor-heading-title::before { content: ""; display: inline-block; width: 22px; height: 2px; background: var(--line); vertical-align: middle; margin-right: 10px; transform: translateY(-2px); } body.hc-claude.hc-pp .hc-head { gap: 14px; } body.hc-claude.hc-pp .hc-h2 .elementor-heading-title { max-width: 22ch; } body.hc-claude.hc-pp .hc-measure p { max-width: 68ch; } body.hc-claude.hc-pp .elementor-widget-text-editor a:not(.elementor-button) { color: var(--ink-link); text-decoration: underline; text-decoration-color: var(--ink-link-line); text-underline-offset: 4px; text-decoration-thickness: 1px; font-weight: 500; transition: text-decoration-color var(--hc-dur) ease; } @media (hover: hover) and (pointer: fine) { body.hc-claude.hc-pp .elementor-widget-text-editor a:not(.elementor-button):hover { text-decoration-color: currentColor; } } /* El enlace destacado también toma la tinta del contenedor, no un azul fijo */ body.hc-claude.hc-pp .hc-link.elementor-widget-text-editor a:not(.elementor-button) { color: var(--ink-link-strong); font-weight: 600; text-decoration-color: var(--ink-link-line-strong); } body.hc-claude.hc-pp .hc-callout--solid a:not(.elementor-button) { color: var(--ink-link); text-decoration-color: var(--ink-link-line); } body.hc-claude.hc-pp .hc-contact__list a { font-weight: 600; } /* Filete del color de línea delante de la etiqueta de cada sección */ body.hc-claude.hc-pp .hc-pp-file__copy .hc-label .elementor-heading-title::before, body.hc-claude.hc-pp .hc-faq__intro .hc-label .elementor-heading-title::before, body.hc-claude.hc-pp .hc-related-head .hc-label .elementor-heading-title::before { content: ""; display: inline-block; width: 22px; height: 2px; background: var(--line); vertical-align: middle; margin-right: 10px; transform: translateY(-2px); } /* ---------- Presentación ---------- */ body.hc-claude.hc-pp .hc-phero { padding-block: clamp(28px, 3.5vw, 44px) 0; } body.hc-claude.hc-pp .hc-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; list-style: none; margin: 0 0 clamp(28px, 4vw, 44px); padding: 0; font-size: .875rem; } /* La miga no siempre cae sobre el hero azul: en las páginas legales va sobre blanco. Su tinta sale de variables, y el contenedor oscuro las redefine. */ body.hc-claude.hc-pp .hc-crumbs { --crumb: var(--hc-muted); --crumb-sep: var(--hc-line-strong); --crumb-on: var(--hc-ink); --crumb-hover: var(--hc-navy); } body.hc-claude.hc-pp .hc-sec--navy .hc-crumbs, body.hc-claude.hc-pp .hc-phero .hc-crumbs { --crumb: var(--hc-on-navy-2); --crumb-sep: rgba(255,255,255,.4); --crumb-on: #fff; --crumb-hover: #fff; } body.hc-claude.hc-pp .hc-crumbs li { display: flex; align-items: center; gap: 10px; color: var(--crumb); } body.hc-claude.hc-pp .hc-crumbs li + li::before { content: "›"; color: var(--crumb-sep); } body.hc-claude.hc-pp .hc-crumbs a { color: var(--crumb); text-decoration: none; border-radius: 2px; transition: color var(--hc-dur) ease; } @media (hover: hover) and (pointer: fine) { body.hc-claude.hc-pp .hc-crumbs a:hover { color: var(--crumb-hover); } } body.hc-claude.hc-pp .hc-crumbs [aria-current] { color: var(--crumb-on); font-weight: 500; padding-bottom: 2px; border-bottom: 2px solid var(--line-on-dark); } body.hc-claude.hc-pp .hc-phero__grid { display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr); gap: clamp(24px, 3vw, 48px); align-items: center; } body.hc-claude.hc-pp .hc-phero__copy { display: flex; flex-direction: column; gap: 22px; position: relative; z-index: 1; } body.hc-claude.hc-pp .hc-phero .hc-h1 .elementor-heading-title { color: #fff; font-size: clamp(2.125rem, 1.4rem + 2.2vw, 3.25rem); max-width: 18ch; } body.hc-claude.hc-pp .hc-phero .hc-lead { color: #e4e8f2; } body.hc-claude.hc-pp .hc-phero .hc-support { color: var(--hc-on-navy-2); font-size: 1rem; max-width: 58ch; } /* La fotografía sale hasta el borde derecho de la ventana y se funde con el fondo con una máscara de transparencia, sin velo ni pérdida de brillo. */ body.hc-claude.hc-pp .hc-phero { overflow: hidden; } body.hc-claude.hc-pp .hc-phero__media { position: relative; --width: calc(100% + var(--hc-bleed-r)); width: calc(100% + var(--hc-bleed-r)); max-width: none; } body.hc-claude.hc-pp .hc-phero__media img { width: 100%; height: clamp(400px, 39vw, 580px); 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%; } /* 2 de octubre · el pie de la fotografía del banner. Nace por una razón concreta, no por adorno: el pliego de tercera placa es de la revisión técnica vehicular de Cuenca, Ecuador, y puesto sin decirlo insinúa que proveemos el sistema oficial peruano, que es justo lo que esa página niega. El pie va dentro de la foto, abajo a la izquierda, sobre el degradado que la propia máscara ya oscurece. Tinta clara sobre azul marino: el mismo par que el resto del banner. */ body.hc-claude.hc-pp .hc-phero__media .hc-foto-pie-w { position: absolute; left: 0; right: var(--hc-bleed-r, 0px); bottom: 0; padding: 14px 18px; background: linear-gradient(180deg, rgba(14, 19, 40, 0) 0%, rgba(14, 19, 40, .72) 60%, rgba(14, 19, 40, .86) 100%); } body.hc-claude.hc-pp .hc-foto-pie { margin: 0; max-width: 62ch; font-size: .75rem; line-height: 1.45; color: var(--hc-on-navy-2); } @media (max-width: 1024px) { body.hc-claude.hc-pp .hc-phero__media .hc-foto-pie-w { right: 0; } } body.hc-claude.hc-pp .hc-phero .hc-btn--ghost-light .elementor-button-icon svg { width: 18px; height: 18px; fill: #fff; } body.hc-claude.hc-pp .hc-pledger { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: clamp(30px, 3.75vw, 48px); border-top: 1px solid var(--hc-on-navy-line); } body.hc-claude.hc-pp .hc-pledger__item { position: relative; padding: 24px 24px 28px 0; } body.hc-claude.hc-pp .hc-pledger__item::before { content: ""; position: absolute; top: -1px; left: 0; width: 48px; height: 3px; background: var(--line-on-dark); } body.hc-claude.hc-pp .hc-pledger__item + .hc-pledger__item { padding-left: 24px; border-left: 1px solid var(--hc-on-navy-line); } body.hc-claude.hc-pp .hc-pledger__item + .hc-pledger__item::before { left: 24px; } body.hc-claude.hc-pp .hc-pledger__value { display: block; color: #fff; font-size: 1.375rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.25; margin-bottom: 4px; } body.hc-claude.hc-pp .hc-pledger__item p { margin: 0; font-size: var(--hc-fs-small); color: var(--hc-on-navy-2); } /* ---------- Tabla ---------- */ body.hc-claude.hc-pp .hc-table-wrap { border: 1px solid var(--hc-line); border-radius: var(--hc-r-card); overflow: hidden; background: #fff; box-shadow: var(--hc-shadow); } body.hc-claude.hc-pp .hc-table { width: 100%; border-collapse: collapse; margin: 0; font-size: var(--hc-fs-small); background: transparent; border: 0; } body.hc-claude.hc-pp .hc-table th, body.hc-claude.hc-pp .hc-table td { padding: 18px 22px; text-align: left; vertical-align: top; border: 0; border-top: 1px solid var(--hc-line); background: transparent; line-height: 1.5; } body.hc-claude.hc-pp .hc-table thead th { border-top: 0; background: var(--line-soft); color: var(--hc-ink); font-size: .8125rem; font-weight: 600; letter-spacing: .02em; } body.hc-claude.hc-pp .hc-table thead th:first-child { box-shadow: inset 4px 0 0 var(--line); } body.hc-claude.hc-pp .hc-table tbody th { width: 26%; color: var(--hc-ink); font-weight: 600; font-size: 1rem; } body.hc-claude.hc-pp .hc-table tbody tr:nth-child(even) { background: #fafbfd; } body.hc-claude.hc-pp .hc-table td { color: var(--hc-text); } body.hc-claude.hc-pp .hc-pp-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; margin-top: clamp(24px, 3vw, 36px); } body.hc-claude.hc-pp .hc-pp-split > .hc-measure { padding-top: 6px; } /* ---------- Avisos ---------- */ body.hc-claude.hc-pp .hc-callout { padding: 22px 24px; box-sizing: border-box; min-width: 0; border-radius: 12px; background: var(--line-soft); box-shadow: inset 4px 0 0 var(--line); font-size: var(--hc-fs-small); color: var(--hc-text); } body.hc-claude.hc-pp .hc-callout p { margin: 0 0 .6em; } body.hc-claude.hc-pp .hc-callout p:last-child { margin: 0; } body.hc-claude.hc-pp .hc-callout .hc-callout__title { font-weight: 600; color: var(--hc-ink); font-size: 1rem; } body.hc-claude.hc-pp .hc-callout--solid { background: var(--hc-navy); box-shadow: inset 4px 0 0 var(--line-on-dark); color: #c9d0e3 !important; } body.hc-claude.hc-pp .hc-callout--solid .hc-callout__title { color: #fff; } /* ---------- Qué archivo necesitamos ---------- */ body.hc-claude.hc-pp .hc-pp-file__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(36px, 6vw, 88px); align-items: start; } body.hc-claude.hc-pp .hc-pp-file__copy { display: flex; flex-direction: column; gap: 18px; } body.hc-claude.hc-pp .hc-pp-file__list { display: flex; flex-direction: column; gap: 16px; } body.hc-claude.hc-pp .hc-checklist { counter-reset: hc; list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; } body.hc-claude.hc-pp .hc-checklist li { counter-increment: hc; position: relative; display: flex; flex-direction: column; gap: 4px; padding: 20px 22px 20px 72px; background: #fff; border: 1px solid var(--hc-line); border-radius: var(--hc-r-card); box-shadow: var(--hc-shadow); } body.hc-claude.hc-pp .hc-checklist li::before { content: counter(hc); position: absolute; left: 22px; top: 18px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--line); color: var(--line-ink); font-weight: 600; font-size: .9375rem; } body.hc-claude.hc-pp .hc-checklist b { color: var(--hc-ink); font-weight: 600; font-size: 1.0625rem; } body.hc-claude.hc-pp .hc-checklist span { font-size: var(--hc-fs-small); color: var(--hc-text); } /* ---------- Comparación (reutiliza .hc-cmp del Home) ---------- */ body.hc-claude.hc-pp .hc-cmp__card--personalizados { border-top: 4px solid var(--line); } body.hc-claude.hc-pp .hc-cmp__card .hc-label .elementor-heading-title { font-size: .75rem; } body.hc-claude.hc-pp .hc-cmp__card--premium .hc-label .elementor-heading-title { color: #a9c4f0; } body.hc-claude.hc-pp .hc-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; margin: 0; border-top: 1px solid var(--hc-line); } body.hc-claude.hc-pp .hc-facts div { padding: 14px 0; border-bottom: 1px solid var(--hc-line); } body.hc-claude.hc-pp .hc-facts dt { font-size: .8125rem; color: var(--hc-muted); font-weight: 500; } body.hc-claude.hc-pp .hc-facts dd { margin: 2px 0 0; font-size: 1rem; font-weight: 600; color: var(--hc-ink); line-height: 1.35; } body.hc-claude.hc-pp .hc-cmp__card--premium .hc-facts, body.hc-claude.hc-pp .hc-cmp__card--premium .hc-facts div { border-color: var(--hc-on-navy-line); } body.hc-claude.hc-pp .hc-cmp__card--premium .hc-facts dt { color: #aeb7cf; } body.hc-claude.hc-pp .hc-cmp__card--premium .hc-facts dd { color: #fff; } /* Las dos tarjetas ocupan el mismo alto y su cierre queda alineado abajo, aunque una termine en botón y la otra en enlace. */ body.hc-claude.hc-pp .hc-cmp { align-items: stretch; } body.hc-claude.hc-pp .hc-cmp__card { display: flex; flex-direction: column; height: 100%; } body.hc-claude.hc-pp .hc-cmp__card .hc-btn, body.hc-claude.hc-pp .hc-cmp__card .hc-link { margin-top: auto; padding-top: 4px; } body.hc-claude.hc-pp .hc-cmp__card--premium .hc-link a { color: #fff; text-decoration-color: rgba(255,255,255,.45); } body.hc-claude.hc-pp .hc-cmp__card--personalizados .hc-btn--primary .elementor-button:focus-visible { outline-color: var(--line); } /* ---------- Efectos holográficos ---------- */ body.hc-claude.hc-pp .hc-fx-figure { background: #fff; border: 1px solid var(--hc-line); border-radius: var(--hc-r-card); box-shadow: var(--hc-shadow); padding: clamp(16px, 3vw, 36px); overflow: hidden; } body.hc-claude.hc-pp .hc-fx-map figure, body.hc-claude.hc-pp .hc-fx-map .wp-caption { margin: 0; max-width: 100% !important; width: 100% !important; } body.hc-claude.hc-pp .hc-fx-map a { display: block; cursor: zoom-in; border-radius: 8px; } body.hc-claude.hc-pp .hc-fx-map img { width: 100%; max-width: 980px; margin-inline: auto; transition: transform 320ms var(--hc-ease); } @media (hover: hover) and (pointer: fine) { body.hc-claude.hc-pp .hc-fx-map a:hover img { transform: scale(1.01); } } body.hc-claude.hc-pp .hc-fx-map figcaption, body.hc-claude.hc-pp .hc-fx-map .widget-image-caption { margin: 18px auto 0; padding-top: 14px; border-top: 1px solid var(--hc-line); max-width: 980px; font-size: .875rem; color: var(--hc-muted); text-align: left; font-style: normal; } body.hc-claude.hc-pp .hc-fx-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 20px; } body.hc-claude.hc-pp .hc-fx { --accent: var(--line); display: flex; flex-direction: column; gap: 10px; padding: 26px; background: #fff; border: 1px solid var(--hc-line); border-radius: var(--hc-r-card); box-shadow: var(--hc-shadow); } body.hc-claude.hc-pp .hc-fx .hc-h3 .elementor-heading-title { font-size: 1.1875rem; } body.hc-claude.hc-pp .hc-fx p { margin: 0; font-size: var(--hc-fs-small); } body.hc-claude.hc-pp .hc-chips { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; } body.hc-claude.hc-pp .hc-chips li { padding: 6px 12px; border-radius: 999px; background: var(--line-soft); border: 1px solid var(--line-soft-2); color: var(--hc-ink); font-size: .8125rem; font-weight: 500; line-height: 1.3; } body.hc-claude.hc-pp .hc-fx-note { margin-top: clamp(21px, 2.62vw, 30px); } body.hc-claude.hc-pp .hc-examples-head { margin-top: clamp(36px, 4.5vw, 54px); margin-bottom: 20px; } body.hc-claude.hc-pp .hc-examples { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } body.hc-claude.hc-pp .hc-examples img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--hc-r-card); border: 1px solid var(--hc-line); } /* ---------- Proceso de 7 pasos ---------- */ body.hc-claude.hc-pp .hc-pp-process { background: #fff; } body.hc-claude.hc-pp .hc-steps--7 { grid-template-columns: repeat(4, minmax(0, 1fr)); background-image: none; } body.hc-claude.hc-pp .hc-step { border-top: 3px solid var(--line); } body.hc-claude.hc-pp .hc-step__num { background: var(--line); color: var(--line-ink); box-shadow: 0 0 0 5px var(--line-soft); width: 42px; height: 42px; font-size: 1rem; } body.hc-claude.hc-pp .hc-step__top .hc-ico .elementor-icon { --accent: var(--line); } body.hc-claude.hc-pp .hc-times--pp { grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(0, 1.4fr); margin-top: clamp(21px, 3vw, 33px); } body.hc-claude.hc-pp .hc-time--habitual { --accent: var(--line); } /* ---------- Preguntas frecuentes ---------- */ body.hc-claude.hc-pp .hc-faq .e-n-accordion-item-title::after { border-color: var(--line); } @media (hover: hover) and (pointer: fine) { body.hc-claude.hc-pp .hc-faq .e-n-accordion-item-title:hover .e-n-accordion-item-title-text { color: var(--line-text); } } body.hc-claude.hc-pp .hc-faq .e-n-accordion-item[open] > .e-n-accordion-item-title .e-n-accordion-item-title-text { color: var(--line-text); } /* ---------- Enlaces relacionados ---------- */ body.hc-claude.hc-pp .hc-pp-related { padding-block: clamp(56px, 7vw, 88px); border-top: 1px solid var(--hc-line); } body.hc-claude.hc-pp .hc-related-head { margin-bottom: 20px; } body.hc-claude.hc-pp .hc-related { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } body.hc-claude.hc-pp .hc-rel { position: relative; padding: 22px 22px 24px; background: #fff; border: 1px solid var(--hc-line); border-radius: var(--hc-r-card); box-shadow: inset 0 3px 0 var(--line), var(--hc-shadow); transition: transform 200ms var(--hc-ease), box-shadow 200ms ease; } body.hc-claude.hc-pp .hc-rel p { margin: 0; font-size: var(--hc-fs-small); } body.hc-claude.hc-pp .hc-rel .hc-rel__title { margin: 6px 0 6px; font-size: 1.0625rem; font-weight: 600; line-height: 1.35; } body.hc-claude.hc-pp .hc-rel .hc-rel__title a { color: var(--hc-ink); text-decoration: none; } body.hc-claude.hc-pp .hc-rel .hc-rel__title a::after { content: ""; position: absolute; inset: 0; border-radius: var(--hc-r-card); } body.hc-claude.hc-pp .hc-rel__tag { display: inline-block; font-size: .6875rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--hc-muted); } @media (hover: hover) and (pointer: fine) { body.hc-claude.hc-pp .hc-rel:hover { transform: translateY(-2px); box-shadow: inset 0 3px 0 var(--line), var(--hc-shadow-hover); } body.hc-claude.hc-pp .hc-rel:hover .hc-rel__title a { color: var(--line-text); } } /* ---------- Contacto ---------- */ body.hc-claude.hc-pp .hc-contact__note { padding: 14px 16px; border-radius: 10px; background: rgba(255,255,255,.06); box-shadow: inset 3px 0 0 var(--line-on-dark); font-size: var(--hc-fs-small); color: #e4e8f2 !important; } body.hc-claude.hc-pp .hc-contact__note p { margin: 0; } /* ---------- Responsive ---------- */ @media (max-width: 1200px) { body.hc-claude.hc-pp .hc-steps--7 { grid-template-columns: repeat(3, minmax(0, 1fr)); } body.hc-claude.hc-pp .hc-related { grid-template-columns: repeat(2, minmax(0, 1fr)); } body.hc-claude.hc-pp .hc-times--pp { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 1024px) { body.hc-claude.hc-pp .hc-phero__grid { grid-template-columns: 1fr; gap: clamp(26px, 5vw, 38px); } body.hc-claude.hc-pp .hc-phero__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-pp .hc-phero__media img { height: clamp(290px, 50vw, 440px); -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-pp .hc-pp-split, body.hc-claude.hc-pp .hc-pp-file__grid { grid-template-columns: 1fr; } body.hc-claude.hc-pp .hc-fx-grid { grid-template-columns: 1fr; } body.hc-claude.hc-pp .hc-steps--7 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 767px) { body.hc-claude.hc-pp .hc-pledger { grid-template-columns: 1fr; } body.hc-claude.hc-pp .hc-pledger__item, body.hc-claude.hc-pp .hc-pledger__item + .hc-pledger__item { padding: 18px 0; border-left: 0; border-top: 1px solid var(--hc-on-navy-line); } body.hc-claude.hc-pp .hc-pledger__item:first-child { border-top: 0; } body.hc-claude.hc-pp .hc-pledger__item + .hc-pledger__item::before { left: 0; } body.hc-claude.hc-pp .hc-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } body.hc-claude.hc-pp .hc-table, body.hc-claude.hc-pp .hc-table tbody, body.hc-claude.hc-pp .hc-table tr, body.hc-claude.hc-pp .hc-table th, body.hc-claude.hc-pp .hc-table td { display: block; width: 100%; box-sizing: border-box; } body.hc-claude.hc-pp .hc-table tbody tr { padding: 18px 18px 16px; border-top: 1px solid var(--hc-line); box-shadow: inset 4px 0 0 var(--line); } body.hc-claude.hc-pp .hc-table tbody tr:first-child { border-top: 0; } body.hc-claude.hc-pp .hc-table tbody th { width: 100%; padding: 0 0 8px; border: 0; } body.hc-claude.hc-pp .hc-table td { padding: 8px 0 0; border: 0; } body.hc-claude.hc-pp .hc-table td::before { content: attr(data-label); display: block; font-size: .75rem; font-weight: 600; color: var(--hc-muted); margin-bottom: 2px; } body.hc-claude.hc-pp .hc-facts { grid-template-columns: 1fr 1fr; } body.hc-claude.hc-pp .hc-checklist li { padding: 18px 18px 18px 64px; } body.hc-claude.hc-pp .hc-checklist li::before { left: 18px; } body.hc-claude.hc-pp .hc-examples { grid-template-columns: 1fr; gap: 16px; } body.hc-claude.hc-pp .hc-steps--7 { grid-template-columns: 1fr; background-image: none; } body.hc-claude.hc-pp .hc-times--pp { grid-template-columns: 1fr; } body.hc-claude.hc-pp .hc-related { grid-template-columns: 1fr; } body.hc-claude.hc-pp .hc-fx { padding: 22px; } } @media (max-width: 480px) { body.hc-claude.hc-pp .hc-facts { grid-template-columns: 1fr; } } /* Infografía en tablet y móvil: se muestra a tamaño legible y se desliza en horizontal dentro de su tarjeta (la página no se desborda). Pulsar abre la ampliación. */ @media (max-width: 900px) { body.hc-claude.hc-pp .hc-fx-figure { padding: 14px; } /* 1 de octubre. El deslizamiento colgaba solo del , y la imagen de la madre de hologramas NO lleva enlace: es todavía la reserva gris, a la espera del vectorial. Resultado: los 720 px se salían de la página y a 390 px había barra horizontal. El contenedor del widget existe siempre, así que el deslizamiento va también ahí. No es de los cambios de hoy: estaba desde que se puso la reserva. */ body.hc-claude.hc-pp .hc-fx-map a, body.hc-claude.hc-pp .hc-fx-map > .elementor-widget-container { overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: thin; padding-bottom: 8px; } body.hc-claude.hc-pp .hc-fx-map img { width: max(100%, 720px); max-width: none; } body.hc-claude.hc-pp .hc-fx-map figcaption::before, body.hc-claude.hc-pp .hc-fx-map .widget-image-caption::before { content: "Deslice para ver la imagen completa. "; font-weight: 600; color: var(--hc-ink); } } /* ========================================================================== Componentes de categoría (21-09-2026) · Hologramas de seguridad ========================================================================== */ /* Holograma Genérico · #4c6eaf · contraste 5,1:1 sobre blanco (AA) */ body.hc-claude.hc-page-hologramas { --line: #4c6eaf; } body.hc-claude.hc-pp .hc-hs-note { margin-top: clamp(18px, 2.25vw, 27px); } body.hc-claude.hc-pp .hc-fx-figure { margin-top: 20px; } /* ---------- Bloque de línea Premium ---------- */ body.hc-claude.hc-pp .hc-premium { display: flex; flex-direction: column; gap: 16px; margin-top: 24px; padding: clamp(28px, 4vw, 44px); border-radius: var(--hc-r-card); background: #011b45; color: #c9d0e3; box-shadow: inset 0 4px 0 rgba(255,255,255,.22), var(--hc-shadow); } body.hc-claude.hc-pp .hc-premium .elementor-heading-title { color: #fff; } body.hc-claude.hc-pp .hc-premium .hc-label .elementor-heading-title { color: #a9c4f0; } body.hc-claude.hc-pp .hc-premium .hc-label .elementor-heading-title::before { background: #a9c4f0; } body.hc-claude.hc-pp .hc-premium .hc-h3 .elementor-heading-title { font-size: clamp(1.375rem, 1.1rem + .8vw, 1.75rem); letter-spacing: -.025em; } body.hc-claude.hc-pp .hc-premium .hc-premium__text { color: #c9d0e3 !important; max-width: 68ch; } body.hc-claude.hc-pp .hc-premium .hc-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); border-top-color: rgba(255,255,255,.16); } body.hc-claude.hc-pp .hc-premium .hc-facts div { border-bottom-color: rgba(255,255,255,.16); } body.hc-claude.hc-pp .hc-premium .hc-facts dt { color: #aeb7cf; } body.hc-claude.hc-pp .hc-premium .hc-facts dd { color: #fff; } body.hc-claude.hc-pp .hc-premium .hc-btn { align-self: flex-start; } /* ---------- Cotizador ---------- */ body.hc-claude.hc-pp .hc-quote { margin: 0; padding: clamp(24px, 3.5vw, 40px); background: #fff; border: 1px solid var(--hc-line); border-top: 4px solid var(--line); border-radius: var(--hc-r-card); box-shadow: var(--hc-shadow); } body.hc-claude.hc-pp .hc-quote__title { margin: 0 0 20px; font-size: 1.375rem; font-weight: 600; color: var(--hc-ink); letter-spacing: -.02em; } body.hc-claude.hc-pp .hc-quote__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } body.hc-claude.hc-pp .hc-quote__field { display: flex; flex-direction: column; gap: 6px; margin: 0; } body.hc-claude.hc-pp .hc-quote__field label { font-size: .8125rem; font-weight: 600; color: var(--hc-muted); } body.hc-claude.hc-pp .hc-quote select, body.hc-claude.hc-pp .hc-quote input { width: 100%; box-sizing: border-box; min-height: 48px; padding: 0 14px; font-family: var(--hc-font); font-size: 1rem; color: var(--hc-ink); background: #fff; border: 1px solid var(--hc-line-strong); border-radius: var(--hc-radius); transition: border-color var(--hc-dur) ease, box-shadow var(--hc-dur) ease; } body.hc-claude.hc-pp .hc-quote select { appearance: none; -webkit-appearance: none; padding-right: 38px; background-image: linear-gradient(45deg, transparent 50%, var(--line) 50%), linear-gradient(135deg, var(--line) 50%, transparent 50%); background-position: calc(100% - 20px) 21px, calc(100% - 14px) 21px; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; } body.hc-claude.hc-pp .hc-quote select:focus-visible, body.hc-claude.hc-pp .hc-quote input:focus-visible { outline: 2px solid var(--line); outline-offset: 2px; border-color: var(--line); } body.hc-claude.hc-pp .hc-quote__note { margin: 16px 0 0; padding: 14px 16px; border-radius: 10px; background: var(--line-soft); box-shadow: inset 4px 0 0 var(--line); font-size: var(--hc-fs-small); color: var(--hc-ink); } body.hc-claude.hc-pp .hc-quote__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; } body.hc-claude.hc-pp .hc-quote__btn { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 24px; border-radius: var(--hc-radius); border: 1px solid transparent; font-weight: 600; font-size: 1rem; text-decoration: none; transition: background-color var(--hc-dur) ease, border-color var(--hc-dur) ease, transform 140ms var(--hc-ease); } body.hc-claude.hc-pp .hc-quote__btn:active { transform: scale(.97); } /* 2 de octubre. Hernando: «los botones de cintas están azules y no se ven». Eran estos dos, los del cotizador, y estaban así en las CATORCE páginas de producto: el de WhatsApp iba en azul corporativo y el otro en azul sobre un filete gris. Dos cosas mal a la vez. La primera: un botón que dice WhatsApp va en el verde de WhatsApp, como los otros cuarenta y tantos del sitio. El único que no lo hacía era este. La segunda: el secundario no llevaba el color de su línea, así que en una página verde salían dos azules. Ahora toma --line, que es la regla de la casa. */ body.hc-claude.hc-pp .hc-quote__btn--wa { background: var(--hc-wa-marca); color: var(--hc-ink); } body.hc-claude.hc-pp .hc-quote__btn--form { background: transparent; color: var(--line-text, var(--hc-navy)); border-color: var(--line, var(--hc-line-strong)); } @media (hover: hover) and (pointer: fine) { body.hc-claude.hc-pp .hc-quote__btn--wa:hover { background: var(--hc-wa-marca-hover); } body.hc-claude.hc-pp .hc-quote__btn--form:hover { background: var(--line-soft, transparent); } } body.hc-claude.hc-pp .hc-quote__btn--wa:focus-visible { outline: 3px solid var(--hc-ink); outline-offset: 2px; } body.hc-claude.hc-pp .hc-quote__legal { margin: 16px 0 0; font-size: .8125rem; color: var(--hc-muted); } /* ---------- Tarjetas de sector ---------- */ body.hc-claude.hc-pp .hc-sectors { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } body.hc-claude.hc-pp .hc-sector { --accent: var(--line); display: flex; flex-direction: column; gap: 10px; padding: 26px; background: #fff; border: 1px solid var(--hc-line); border-radius: var(--hc-r-card); box-shadow: var(--hc-shadow); } body.hc-claude.hc-pp .hc-sector .hc-h3 .elementor-heading-title { font-size: 1.125rem; } body.hc-claude.hc-pp .hc-sector p { margin: 0; font-size: var(--hc-fs-small); } body.hc-claude.hc-pp .hc-sectors__note { margin-top: 20px; } /* ---------- Tarjetas de subcategoría a 3 columnas ---------- */ body.hc-claude.hc-pp .hc-related--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } /* ---------- Bloque de muestra gratuita ---------- */ body.hc-claude.hc-pp .hc-sample { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 32px; margin-top: clamp(21px, 3vw, 30px); padding: clamp(22px, 3vw, 32px); background: #fff; border: 1px solid var(--hc-line); border-left: 4px solid var(--line); border-radius: var(--hc-r-card); box-shadow: var(--hc-shadow); } body.hc-claude.hc-pp .hc-sample__copy { display: flex; flex-direction: column; gap: 8px; max-width: 68ch; } body.hc-claude.hc-pp .hc-sample p { margin: 0; font-size: var(--hc-fs-small); } /* ---------- Responsive de los componentes nuevos ---------- */ @media (max-width: 1200px) { body.hc-claude.hc-pp .hc-sectors { grid-template-columns: repeat(2, minmax(0, 1fr)); } body.hc-claude.hc-pp .hc-quote__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 1024px) { body.hc-claude.hc-pp .hc-related--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } body.hc-claude.hc-pp .hc-premium .hc-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } body.hc-claude.hc-pp .hc-specs, /* min() no vale dentro de repeat(): la declaración entera se invalida y la rejilla se quedaba en tres columnas a 820 px, con 25 px de desborde en tercera placa. A este ancho van dos y punto. */ body.hc-claude.hc-pp .hc-tamper { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 767px) { body.hc-claude.hc-pp .hc-sectors, body.hc-claude.hc-pp .hc-related--3 { grid-template-columns: 1fr; } body.hc-claude.hc-pp .hc-quote__grid { grid-template-columns: 1fr; } body.hc-claude.hc-pp .hc-quote__btn { width: 100%; } body.hc-claude.hc-pp .hc-premium { padding: 24px; } body.hc-claude.hc-pp .hc-sample { flex-direction: column; align-items: flex-start; } body.hc-claude.hc-pp .hc-sample .hc-btn, body.hc-claude.hc-pp .hc-sample .elementor-button { width: 100%; } } @media (max-width: 480px) { body.hc-claude.hc-pp .hc-premium .hc-facts { grid-template-columns: 1fr; } } /* ========================================================================== Revisión de diseño (21-09-2026): originación, tecnología por línea y fichas ========================================================================== */ /* ---------- Diagrama de originación ---------- */ body.hc-claude.hc-pp .hc-origin-head { margin-top: clamp(30px, 3.75vw, 48px); margin-bottom: 20px; display: flex; flex-direction: column; gap: 8px; } body.hc-claude.hc-pp .hc-origin-head .hc-h3 .elementor-heading-title { font-size: 1.375rem; } body.hc-claude.hc-pp .hc-origin-head p { margin: 0; font-size: var(--hc-fs-small); color: var(--hc-muted); max-width: 70ch; } body.hc-claude.hc-pp .hc-origin { counter-reset: hco; list-style: none; margin: 0; padding: 0; /* La cuenta de pasos la pone steps() en --hco-n. Con cinco fijas, una lista de cuatro dejaba una columna vacia a la derecha y el hilo la cruzaba igual. */ display: grid; grid-template-columns: repeat(var(--hco-n, 5), minmax(0, 1fr)); gap: 20px; position: relative; } /* Hilo que une los pasos; queda detrás de las fichas y solo en escritorio */ body.hc-claude.hc-pp .hc-origin::before { content: ""; position: absolute; top: 40px; left: 9%; right: 9%; height: 2px; z-index: 0; background: linear-gradient(90deg, var(--line), color-mix(in srgb, var(--line) 25%, #fff)); } /* Cada paso es una ficha con recuadro redondeado */ body.hc-claude.hc-pp .hc-origin li { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 6px; padding: 20px 18px 22px; background: var(--hc-white); border: 1px solid var(--hc-line); border-radius: var(--hc-r-card); box-shadow: var(--hc-shadow); transition: transform 200ms var(--hc-ease), box-shadow 200ms ease, border-color 200ms ease; } body.hc-claude.hc-pp .hc-origin li::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; border-radius: var(--hc-r-card) var(--hc-r-card) 0 0; background: color-mix(in srgb, var(--line) 55%, #fff); } @media (hover: hover) and (pointer: fine) { body.hc-claude.hc-pp .hc-origin li:hover { transform: translateY(-3px); box-shadow: var(--hc-shadow-hover); border-color: var(--hc-line-strong); } } body.hc-claude.hc-pp .hc-origin__n { position: relative; z-index: 1; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--line); color: var(--line-ink); font-weight: 600; font-size: .9375rem; } body.hc-claude.hc-pp .hc-origin b { color: var(--hc-ink); font-size: 1rem; font-weight: 600; line-height: 1.3; margin-top: 10px; } body.hc-claude.hc-pp .hc-origin__t { font-size: .875rem; color: var(--hc-text); line-height: 1.5; } /* ---------- Carta de colores de la base holográfica ---------- */ body.hc-claude.hc-pp .hc-colors-w { margin-top: clamp(21px, 2.62vw, 30px); padding: clamp(24px, 3vw, 32px); background: var(--hc-white); border: 1px solid var(--hc-line); border-radius: var(--hc-r-card); box-shadow: var(--hc-shadow); } body.hc-claude.hc-pp .hc-colors__title { margin: 0 0 8px; font-size: 1.125rem; font-weight: 600; color: var(--hc-ink); letter-spacing: -.02em; } body.hc-claude.hc-pp .hc-colors__intro { margin: 0 0 20px; font-size: var(--hc-fs-small); color: var(--hc-text); max-width: 72ch; } body.hc-claude.hc-pp .hc-colors { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px 14px; } body.hc-claude.hc-pp .hc-colors li { display: flex; flex-direction: column; gap: 8px; align-items: stretch; } body.hc-claude.hc-pp .hc-swatch { display: block; aspect-ratio: 3 / 2; border-radius: 10px; border: 1px solid var(--hc-line); background: linear-gradient(118deg, transparent 12%, rgba(255,255,255,.55) 26%, transparent 38%), linear-gradient(135deg, var(--s3) 0%, var(--s1) 38%, var(--s2) 58%, var(--s1) 76%, var(--s3) 100%); } body.hc-claude.hc-pp .hc-colors li.is-clear .hc-swatch { background: linear-gradient(118deg, transparent 12%, rgba(255,255,255,.7) 26%, transparent 38%), linear-gradient(135deg, var(--s1) 0%, var(--s2) 50%, var(--s1) 100%), repeating-conic-gradient(#e9edf3 0% 25%, #ffffff 0% 50%) 0 0 / 14px 14px; } body.hc-claude.hc-pp .hc-colors b { font-size: .8125rem; font-weight: 600; color: var(--hc-ink); text-align: center; line-height: 1.3; } body.hc-claude.hc-pp .hc-colors__note { margin: 18px 0 0; font-size: .8125rem; color: var(--hc-muted); max-width: 78ch; } /* ---------- Definición de apertura ---------- */ body.hc-claude.hc-pp .hc-def { font-size: 1.25rem; line-height: 1.5; color: var(--hc-ink); letter-spacing: -.015em; max-width: 46ch; padding-left: 18px; border-left: 3px solid var(--line); } body.hc-claude.hc-pp .hc-def b { font-weight: 600; } body.hc-claude.hc-pp .hc-terms { font-size: .9375rem; color: var(--hc-muted); } /* Columna lateral de la definición: recuadro y glosario breve */ body.hc-claude.hc-pp .hc-aside { display: flex; flex-direction: column; gap: 16px; } body.hc-claude.hc-pp .hc-terms-def { margin: 0; display: grid; gap: 14px; } body.hc-claude.hc-pp .hc-terms-def > div { padding-left: 16px; border-left: 2px solid var(--hc-line); } body.hc-claude.hc-pp .hc-terms-def dt { margin: 0 0 4px; font-size: .9375rem; font-weight: 600; color: var(--hc-ink); } body.hc-claude.hc-pp .hc-terms-def dd { margin: 0; font-size: .875rem; line-height: 1.5; color: var(--hc-text); } /* Lista sin numeración para pares línea / comportamiento */ body.hc-claude.hc-pp .hc-checklist--plain { list-style: none; counter-reset: none; padding: 0; margin: 0 0 18px; display: grid; gap: 12px; } body.hc-claude.hc-pp .hc-checklist--plain li { padding: 14px 18px 16px; background: var(--line-soft); border-radius: var(--hc-r-card); border: 1px solid color-mix(in srgb, var(--line) 16%, #fff); display: flex; flex-direction: column; gap: 4px; } body.hc-claude.hc-pp .hc-checklist--plain li::before { content: none; } body.hc-claude.hc-pp .hc-checklist--plain b { color: var(--hc-ink); font-size: 1rem; } body.hc-claude.hc-pp .hc-checklist--plain span { font-size: .9375rem; color: var(--hc-text); line-height: 1.5; } /* ---------- Condiciones de la línea, en fichas ---------- */ body.hc-claude.hc-pp .hc-specs { /* Tres columnas salvo que la lista diga otra cosa en --hcs-n. Con cuatro fichas y tres columnas, la cuarta se queda sola con un hueco al lado. */ display: grid; grid-template-columns: repeat(var(--hcs-n, 3), minmax(0, 1fr)); gap: 20px; margin: 0; } body.hc-claude.hc-pp .hc-specs > div { position: relative; padding: 22px 20px 24px; background: var(--hc-white); border: 1px solid var(--hc-line); border-radius: var(--hc-r-card); box-shadow: var(--hc-shadow); } body.hc-claude.hc-pp .hc-specs > div::before { content: ""; position: absolute; top: 0; left: 20px; width: 34px; height: 3px; border-radius: 0 0 2px 2px; background: var(--line); } body.hc-claude.hc-pp .hc-specs dt { margin: 0 0 8px; font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--hc-muted); } body.hc-claude.hc-pp .hc-specs dd { margin: 0; font-size: 1rem; line-height: 1.5; color: var(--hc-ink); } /* ---------- Evidencia de manipulación ---------- */ body.hc-claude.hc-pp .hc-tamper { list-style: none; margin: 0; padding: 0; /* 1 de octubre: estaba fijo en tres. Con dos fichas quedaban 420 px vacíos a la derecha, que es lo que se ve como "los recuadros están a la izquierda" en la sección 02 de QR y de código de barras. La cuenta la pone tamper() en --hct-n, igual que --hco-n en los pasos. */ display: grid; grid-template-columns: repeat(var(--hct-n, 3), minmax(0, 1fr)); gap: 20px; } body.hc-claude.hc-pp .hc-tamper li { display: flex; flex-direction: column; gap: 8px; padding: 22px 20px 24px; border-radius: var(--hc-r-card); background: var(--line-soft); border: 1px solid color-mix(in srgb, var(--line) 16%, #fff); } body.hc-claude.hc-pp .hc-tamper__ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: var(--hc-white); border: 1px solid color-mix(in srgb, var(--line) 20%, #fff); color: var(--line-graphic); } body.hc-claude.hc-pp .hc-tamper__ico svg { width: 22px; height: 22px; } body.hc-claude.hc-pp .hc-tamper b { color: var(--hc-ink); font-size: 1.0625rem; line-height: 1.3; margin-top: 4px; } body.hc-claude.hc-pp .hc-tamper__t { font-size: .875rem; color: var(--hc-text); line-height: 1.55; } /* ---------- Carta de colores a dos columnas ---------- */ body.hc-claude.hc-pp .hc-colors-split { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(28px, 4vw, 56px); align-items: center; } body.hc-claude.hc-pp .hc-colors-split__copy { display: flex; flex-direction: column; gap: 14px; } body.hc-claude.hc-pp .hc-colors-split .hc-colors { grid-template-columns: repeat(4, minmax(0, 1fr)); } body.hc-claude.hc-pp .hc-colors-split .hc-colors__title { display: none; } body.hc-claude.hc-pp .hc-colors-split .hc-colors__intro { margin-bottom: 16px; } /* ---------- Bloque de efectos con el tratamiento de la página madre ---------- */ body.hc-claude.hc-pp .hc-fx-block { margin-top: 0; } body.hc-claude.hc-pp .hc-fx-block .hc-premium__text p + p { margin-top: 12px; } body.hc-claude.hc-pp .hc-fx-block + .hc-fx-grid { margin-top: clamp(16px, 1.95vw, 22px); } /* ---------- Formato único: la etiqueta adhesiva ---------- */ body.hc-claude.hc-pp .hc-format-one { display: flex; align-items: flex-start; gap: 18px; padding: 20px 24px 22px; border-radius: var(--hc-r-card); background: var(--line-soft); border: 1px solid color-mix(in srgb, var(--line) 16%, #fff); position: relative; overflow: hidden; } body.hc-claude.hc-pp .hc-format-one::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--line); } body.hc-claude.hc-pp .hc-format-one__ico { flex: 0 0 auto; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; background: #fff; border: 1px solid color-mix(in srgb, var(--line) 20%, #fff); color: var(--line); } body.hc-claude.hc-pp .hc-format-one__ico svg { width: 20px; height: 20px; display: block; } body.hc-claude.hc-pp .hc-format-one__body { display: flex; flex-direction: column; gap: 6px; } body.hc-claude.hc-pp .hc-format-one__body b { color: var(--hc-ink); font-size: 1rem; line-height: 1.3; } body.hc-claude.hc-pp .hc-format-one__body span { font-size: .9375rem; color: var(--hc-text); line-height: 1.55; max-width: 62ch; } /* ---------- Carta de colores con fotografía real ---------- */ body.hc-claude.hc-pp .hc-colors--photo .hc-swatch-img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 10px; border: 1px solid var(--hc-line); background: #eef1f6; } /* ---------- Tres formatos del mismo elemento óptico ---------- */ body.hc-claude.hc-pp .hc-formats-w { margin-top: clamp(21px, 2.62vw, 30px); } body.hc-claude.hc-pp .hc-formats__title { margin: 0 0 14px; font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--hc-muted); } body.hc-claude.hc-pp .hc-formats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } body.hc-claude.hc-pp .hc-formats li { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px 20px; border-radius: var(--hc-r-card); background: var(--line-soft); border: 1px solid color-mix(in srgb, var(--line) 16%, #fff); } body.hc-claude.hc-pp .hc-formats b { color: var(--hc-ink); font-size: 1rem; line-height: 1.3; } body.hc-claude.hc-pp .hc-formats span { font-size: .875rem; color: var(--hc-text); line-height: 1.5; } body.hc-claude.hc-pp .hc-formats__note { margin: 12px 0 0; font-size: .8125rem; color: var(--hc-muted); } /* ---------- Etiqueta de tecnología y efectos solo nano ---------- */ body.hc-claude.hc-pp .hc-tech { display: inline-block; margin: 0; padding: 4px 10px; border-radius: 999px; background: var(--line-soft); border: 1px solid var(--line-soft-2); font-size: .75rem; font-weight: 600; letter-spacing: .02em; color: var(--hc-ink); } body.hc-claude.hc-pp .hc-tech-w { line-height: 1; } body.hc-claude.hc-pp .hc-chips li.is-nano { padding-right: 22px; position: relative; } body.hc-claude.hc-pp .hc-chips li.is-nano::after { content: ""; position: absolute; right: 9px; top: 50%; transform: translateY(-50%); width: 6px; height: 6px; border-radius: 50%; background: var(--hc-navy); } /* ---------- Bloque Premium a dos columnas ---------- */ body.hc-claude.hc-pp .hc-premium { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: clamp(24px, 3vw, 44px); align-items: center; } body.hc-claude.hc-pp .hc-premium__copy { display: flex; flex-direction: column; gap: 16px; } body.hc-claude.hc-pp .hc-premium__media { background: #fff; border-radius: var(--hc-r-img); padding: 14px; } body.hc-claude.hc-pp .hc-premium__media .hc-fx-map figcaption, body.hc-claude.hc-pp .hc-premium__media .hc-fx-map .widget-image-caption { margin-top: 12px; padding-top: 10px; font-size: .8125rem; } body.hc-claude.hc-pp .hc-premium .hc-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* ---------- Ficha de requisitos del arte ---------- */ body.hc-claude.hc-pp .hc-reqs-w { background: #fff; border: 1px solid var(--hc-line); border-radius: var(--hc-r-card); box-shadow: var(--hc-shadow); padding: 26px; } body.hc-claude.hc-pp .hc-reqs__title { margin: 0 0 16px; font-size: 1rem; font-weight: 600; color: var(--hc-ink); } body.hc-claude.hc-pp .hc-reqs { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; } body.hc-claude.hc-pp .hc-reqs li { display: flex; flex-direction: row; gap: 14px; align-items: flex-start; } body.hc-claude.hc-pp .hc-reqs li + li { padding-top: 18px; border-top: 1px solid var(--hc-line); } body.hc-claude.hc-pp .hc-reqs__ico { flex: 0 0 auto; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: var(--line-soft); color: var(--line-graphic-soft); } body.hc-claude.hc-pp .hc-reqs__ico svg { width: 20px; height: 20px; } body.hc-claude.hc-pp .hc-reqs li > span:last-child { display: flex; flex-direction: column; gap: 3px; } body.hc-claude.hc-pp .hc-reqs b { color: var(--hc-ink); font-weight: 600; font-size: 1rem; } body.hc-claude.hc-pp .hc-reqs li span span { font-size: var(--hc-fs-small); color: var(--hc-text); line-height: 1.5; } /* ---------- Fichas de subcategoría (formato de las tarjetas del Home) ---------- */ /* ---------- Las fichas, al mismo tamaño en todas las páginas · 1 de octubre ---------- Medido antes de tocar: la misma ficha salía de 233 px de ancho en QR a 606 en la de cintas, porque el número de columnas cambiaba con el número de fichas. Dos fichas ocupaban media pantalla cada una. Ahora la ficha tiene su tamaño (de 300 a 400 px) y la rejilla pone las que quepan, centradas: dos fichas se ven igual de grandes que seis. */ body.hc-claude.hc-pp .hc-subcards { /* auto-fit dejaba dos por fila cuando caben tres, porque calcula las pistas con el mínimo y luego las estira. Tres como mucho, de 400 px como mucho, y centradas: así una página de dos fichas y otra de seis las enseñan exactamente del mismo tamaño. */ /* 1 de octubre, tarde. El techo de 400 px no estandarizaba nada: medido, la misma ficha salía de 292 px en las páginas de cuatro a 400 en las de dos. La fila tiene 1.240 px y cuatro fichas con tres huecos de 24 dan 292, así que ESE es el tamaño de la ficha. Las de dos, tres y seis lo adoptan y la rejilla las centra. Una medida para todo el sitio. */ --hcg-ficha: 292px; display: grid; grid-template-columns: repeat(var(--hcg-n, 3), minmax(0, var(--hcg-ficha))); justify-content: center; gap: 24px; } /* Cuántas caben en una fila lo dice el número de fichas, no una cifra fija: cuatro fichas van en UNA fila, no tres y una suelta. De cinco en adelante se reparten de tres en tres, que es lo que se lee bien. El techo de 400 px por ficha se mantiene, así que dos fichas no se hacen gigantes. */ body.hc-claude.hc-pp .hc-subcards--2 { --hcg-n: 2; } body.hc-claude.hc-pp .hc-subcards--3 { --hcg-n: 3; } body.hc-claude.hc-pp .hc-subcards--4 { --hcg-n: 4; } body.hc-claude.hc-pp .hc-subcards--5, body.hc-claude.hc-pp .hc-subcards--6 { --hcg-n: 3; } @media (max-width: 1240px) { body.hc-claude.hc-pp .hc-subcards--4 { --hcg-n: 2; } } @media (max-width: 1100px) { body.hc-claude.hc-pp .hc-subcards { --hcg-n: 2; } } @media (max-width: 720px) { /* En una sola columna el techo de 292 px dejaría la ficha estrecha en medio de la pantalla. Aquí la ficha ocupa el ancho que haya. */ body.hc-claude.hc-pp .hc-subcards { --hcg-n: 1; --hcg-ficha: 400px; } } body.hc-claude.hc-pp .hc-subcard { --card: var(--line); position: relative; display: flex; flex-direction: column; gap: 10px; padding-bottom: 22px; background: #fff; border: 1px solid var(--hc-line); border-radius: var(--hc-r-card); box-shadow: var(--hc-shadow); overflow: hidden; transition: transform 200ms var(--hc-ease), box-shadow 200ms ease, border-color 200ms ease; } body.hc-claude.hc-pp .hc-subcard::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--card); z-index: 2; } /* Un color por línea, el mismo en la ficha, el filete y el botón */ /* La ficha de enlace lleva el color de la línea a la que apunta, no el de la página donde vive. Antes solo se pintaba con él el filete de 4 px de arriba (--card): el resto de la ficha leía --line, que viene del body, así que las seis fichas de la madre de hologramas salían todas del mismo azul. Cada ficha redefine ahora --line para ella y para lo que lleva dentro, que es la regla de la casa: el color de un componente vive en su contenedor. */ body.hc-claude.hc-pp .hc-subcard--personalizados { --card: var(--c-personalizados); --line: var(--c-personalizados); } body.hc-claude.hc-pp .hc-subcard--credenciales { --card: var(--c-credenciales); --line: var(--c-credenciales); } body.hc-claude.hc-pp .hc-subcard--qr { --card: var(--c-qr); --line: var(--c-qr); } body.hc-claude.hc-pp .hc-subcard--barras { --card: var(--c-barras); --line: var(--c-barras); } body.hc-claude.hc-pp .hc-subcard--hologramas { --card: var(--c-generico); --line: var(--c-generico); } body.hc-claude.hc-pp .hc-subcard--premium { --card: var(--c-premium); --line: var(--c-premium); } body.hc-claude.hc-pp .hc-subcard--platinum { --card: var(--c-platinum); --line: var(--c-platinum); } body.hc-claude.hc-pp .hc-subcard--cintas { --card: var(--c-cintas); --line: var(--c-cintas); } body.hc-claude.hc-pp .hc-subcard--void, body.hc-claude.hc-pp .hc-subcard--etiquetas { --card: var(--c-void); --line: var(--c-void); } body.hc-claude.hc-pp .hc-subcard--activos { --card: var(--c-activos); --line: var(--c-activos); } body.hc-claude.hc-pp .hc-subcard--trazabilidad { --card: var(--c-trazabilidad); --line: var(--c-trazabilidad); } /* Al redefinir --line dentro de la ficha, el texto teñido y las marcas se recalculan solos: --line-text-tint y --line-graphic se derivan de --line. */ /* .hc-subcards--4: el número de columnas ya no se fija aquí, lo decide el ancho de la ficha */ /* .hc-subcards--5: el número de columnas ya no se fija aquí, lo decide el ancho de la ficha */ /* .hc-subcards--6: el número de columnas ya no se fija aquí, lo decide el ancho de la ficha */ /* .hc-subcards--3: el número de columnas ya no se fija aquí, lo decide el ancho de la ficha */ body.hc-claude.hc-pp .hc-subcards--5 .hc-subcard > .elementor-element:not(.hc-subcard__img) { padding-inline: 18px; } body.hc-claude.hc-pp .hc-subcards--5 .hc-subcard .hc-h3 .elementor-heading-title { font-size: 1.0625rem; } /* La ficha de Platinum comparte tono con Premium: se distingue con un filete doble */ body.hc-claude.hc-pp .hc-subcard--platinum::before { background: linear-gradient(90deg, #011b45 0 46%, #8fa3c9 46% 54%, #011b45 54%); } body.hc-claude.hc-pp .hc-subcard > .elementor-element:not(.hc-subcard__img) { padding-inline: 22px; } body.hc-claude.hc-pp .hc-subcard__img { overflow: hidden; margin-bottom: 4px; } body.hc-claude.hc-pp .hc-subcard__img img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; /* era 4/3 y la ficha quedaba muy alta */ transition: transform 320ms var(--hc-ease); } body.hc-claude.hc-pp .hc-subcard__tag { margin: 0; font-size: .6875rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--hc-muted); } body.hc-claude.hc-pp .hc-subcard .hc-h3 .elementor-heading-title { font-size: 1.125rem; line-height: 1.3; } body.hc-claude.hc-pp .hc-subcard .hc-subcard__desc { font-size: var(--hc-fs-small); flex: 1 1 auto; } body.hc-claude.hc-pp .hc-subcard .hc-subcard__desc p { margin: 0; } body.hc-claude.hc-pp .hc-subcard .hc-subcard__meta { font-size: .8125rem; font-weight: 600; color: var(--hc-muted); } body.hc-claude.hc-pp .hc-subcard .hc-subcard__meta p { margin: 0; } body.hc-claude.hc-pp .hc-subcard .hc-cta { padding-top: 12px; } @media (hover: hover) and (pointer: fine) { body.hc-claude.hc-pp .hc-subcard:hover { transform: translateY(-3px); box-shadow: var(--hc-shadow-hover); border-color: var(--hc-line-strong); } body.hc-claude.hc-pp .hc-subcard:hover .hc-subcard__img img { transform: scale(1.03); } } /* ---------- Cotizador: encabezado ---------- */ body.hc-claude.hc-pp .hc-quote__kicker { margin: 0 0 6px; font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--line-text); } body.hc-claude.hc-pp .hc-quote__title { margin-bottom: 4px; } body.hc-claude.hc-pp .hc-quote__sub { margin: 0 0 20px; font-size: var(--hc-fs-small); color: var(--hc-muted); } /* ---------- Responsive ---------- */ @media (max-width: 1200px) { body.hc-claude.hc-pp .hc-origin { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 16px; } body.hc-claude.hc-pp .hc-origin::before { display: none; } body.hc-claude.hc-pp .hc-colors { grid-template-columns: repeat(4, minmax(0, 1fr)); } body.hc-claude.hc-pp .hc-colors-split { grid-template-columns: 1fr; gap: 28px; } body.hc-claude.hc-pp .hc-colors-split .hc-colors { grid-template-columns: repeat(6, minmax(0, 1fr)); } } /* 1 de octubre, tarde. Aquí había dos restos de una limpieza anterior que dejaron CSS roto: un selector suelto, «.hc-subcards--5,», seguido de un comentario y de la llave de cierre. El navegador se come lo que viene detrás. Dos consecuencias medidas: · a 1024 px y por debajo se forzaba «grid-template-columns: repeat(2,...)» por encima de las variables, así que a 390 px las fichas salían de 155 px de ancho, dos por fila, en once páginas; · en el bloque de 767 px el selector suelto arrastraba a .hc-subcards al «padding: 8px» de .hc-premium__media. Las columnas las deciden las variables y nada más. */ @media (max-width: 1024px) { body.hc-claude.hc-pp .hc-premium { grid-template-columns: 1fr; } } @media (max-width: 767px) { body.hc-claude.hc-pp .hc-origin { grid-template-columns: 1fr; gap: 16px; } body.hc-claude.hc-pp .hc-origin li { flex-direction: row; align-items: flex-start; gap: 14px; flex-wrap: wrap; padding: 16px 18px 18px; } body.hc-claude.hc-pp .hc-origin b { margin-top: 7px; } /* 1 de octubre. flex-basis del 100% MÁS 50 px de relleno, y sin border-box el relleno se suma al 100%: la ficha se salía de la pantalla. Es la causa de la barra horizontal en doce de las diecinueve páginas a 390 px. No se había visto nunca porque Chromium no baja de 500 px de ancho de ventana y todas las comprobaciones "a 390" se hicieron en realidad a 500. */ body.hc-claude.hc-pp .hc-origin__t { flex: 1 0 100%; padding-left: 50px; margin-top: -4px; box-sizing: border-box; } body.hc-claude.hc-pp .hc-formats { grid-template-columns: 1fr; } body.hc-claude.hc-pp .hc-specs, body.hc-claude.hc-pp .hc-tamper { grid-template-columns: 1fr; } body.hc-claude.hc-pp .hc-colors, body.hc-claude.hc-pp .hc-colors-split .hc-colors { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 12px; } body.hc-claude.hc-pp .hc-colors-w { padding: 20px; } body.hc-claude.hc-pp .hc-premium__media { padding: 8px; } body.hc-claude.hc-pp .hc-reqs-w { padding: 22px; } } /* Ritmo: la etiqueta del bloque de subcategorías necesita aire tras el aviso */ body.hc-claude.hc-pp .hc-hs-custom .hc-related-head { margin-top: clamp(30px, 3.75vw, 48px); } body.hc-claude.hc-pp .hc-subcards--5 .hc-cta a { font-size: .8125rem; padding-inline: 13px; } /* ---------- Tabla de simbologías: la primera columna es el nombre corto ---------- */ body.hc-claude.hc-pp .hc-bar-symbology .hc-table tbody th { width: 18%; white-space: nowrap; } body.hc-claude.hc-pp .hc-bar-symbology .hc-callout { margin-top: clamp(18px, 2.2vw, 26px); } /* ---------- El botón de ficha no es un enlace de texto ---------- La regla general de enlaces dentro de un widget de texto pinta el anchor con el color de la línea, y en las páginas de producto ganaba sobre el botón: texto azul sobre fondo azul. Aquí se devuelve su tinta y se quita el subrayado. */ body.hc-claude.hc-pp .hc-cta.elementor-widget-text-editor a:not(.elementor-button), body.hc-claude.hc-pp .hc-cta .elementor-widget-text-editor a:not(.elementor-button) { color: var(--cta-ink); font-weight: 600; text-decoration: none; } body.hc-claude.hc-pp .hc-cta--pending.elementor-widget-text-editor a:not(.elementor-button) { color: var(--hc-muted); } @media (hover: hover) and (pointer: fine) { body.hc-claude.hc-pp .hc-cta.elementor-widget-text-editor a:not(.elementor-button):hover { text-decoration: none; } body.hc-claude.hc-pp .hc-cta--pending.elementor-widget-text-editor a:not(.elementor-button):hover { color: var(--hc-navy); } } /* Lo mismo dentro de una sección de fondo azul, donde los enlaces van en blanco */ body.hc-claude.hc-pp .hc-sec--navy .hc-cta.elementor-widget-text-editor a:not(.elementor-button) { color: var(--cta-ink); } /* ========================================================================== Páginas de confianza: legal, nosotros, contacto y tercera placa ========================================================================== */ body.hc-claude.hc-page-legal { --line: #4c6eaf; } body.hc-claude.hc-page-nosotros { --line: #1b2341; } body.hc-claude.hc-page-contacto { --line: #144e9c; } body.hc-claude.hc-page-placa { --line: #4c6eaf; } /* ---------- Documento legal ---------- */ body.hc-claude.hc-pp .hc-legal-head { padding-bottom: 0; } body.hc-claude.hc-pp .hc-legal__head { max-width: 780px; } body.hc-claude.hc-pp .hc-legal__head .hc-h1 .elementor-heading-title { font-size: clamp(1.75rem, 3vw, 2.375rem); line-height: 1.2; } body.hc-claude.hc-pp .hc-legal__date { margin: 18px 0 0; font-size: .8125rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--hc-muted); } body.hc-claude.hc-pp .hc-legal { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: clamp(32px, 4vw, 64px); align-items: start; } body.hc-claude.hc-pp .hc-legal__toc-w { position: sticky; top: calc(var(--hc-header-h, 76px) + var(--hc-top, 0px) + 24px); } body.hc-claude.hc-pp .hc-legal__toc-title { margin: 0 0 12px; font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--hc-muted); } body.hc-claude.hc-pp .hc-legal__toc ol { margin: 0; padding: 0 0 0 4px; list-style: none; counter-reset: toc; } body.hc-claude.hc-pp .hc-legal__toc li { counter-increment: toc; } body.hc-claude.hc-pp .hc-legal__toc a { display: block; padding: 7px 10px 7px 30px; position: relative; font-size: .875rem; line-height: 1.35; color: var(--hc-text); text-decoration: none; border-radius: 8px; transition: background-color var(--hc-dur) ease, color var(--hc-dur) ease; } body.hc-claude.hc-pp .hc-legal__toc a::before { content: counter(toc); position: absolute; left: 8px; top: 7px; font-size: .75rem; font-weight: 600; color: var(--hc-muted); font-variant-numeric: tabular-nums; } @media (hover: hover) and (pointer: fine) { body.hc-claude.hc-pp .hc-legal__toc a:hover { background: var(--hc-alt); color: var(--hc-ink); } } body.hc-claude.hc-pp .hc-legal__art { scroll-margin-top: calc(var(--hc-header-h, 76px) + var(--hc-top, 0px) + 24px); } body.hc-claude.hc-pp .hc-legal__art + .hc-legal__art { margin-top: clamp(30px, 3.4vw, 44px); padding-top: clamp(30px, 3.4vw, 44px); border-top: 1px solid var(--hc-line); } body.hc-claude.hc-pp .hc-legal__num { margin: 0 0 6px; font-size: .75rem; font-weight: 700; letter-spacing: .12em; color: var(--line); } body.hc-claude.hc-pp .hc-legal__t { margin: 0 0 14px; font-size: clamp(1.125rem, 1.8vw, 1.375rem); font-weight: 600; line-height: 1.3; color: var(--hc-ink); } body.hc-claude.hc-pp .hc-legal__body { max-width: 68ch; } body.hc-claude.hc-pp .hc-legal__body p { margin: 0 0 14px; } body.hc-claude.hc-pp .hc-legal__body ul { margin: 0 0 14px; padding-left: 22px; } body.hc-claude.hc-pp .hc-legal__body li { margin-bottom: 7px; } body.hc-claude.hc-pp .hc-legal__pending { margin-top: 18px; padding: 14px 16px; border-radius: 10px; background: #fff8e6; border: 1px solid #f0dca6; color: #6b5310; font-size: .875rem; } @media (max-width: 1024px) { body.hc-claude.hc-pp .hc-legal { grid-template-columns: 1fr; gap: 28px; } body.hc-claude.hc-pp .hc-legal__toc-w { position: static; padding: 18px 20px; background: var(--hc-alt); border-radius: var(--hc-r-card); } body.hc-claude.hc-pp .hc-legal__toc ol { columns: 2; column-gap: 20px; } } @media (max-width: 600px) { body.hc-claude.hc-pp .hc-legal__toc ol { columns: 1; } } /* ---------- Resumen en 30 segundos ---------- */ /* 3 de octubre. El resumen nació dentro del banner azul marino y llevaba el blanco quemado en cinco sitios. Al bajarlo a una sección clara se quedó en blanco sobre blanco. Mismo error de siempre: el color de un componente vive en su contenedor. Aquí van los valores para fondo claro, y los contenedores oscuros redefinen las variables en holo-claude.css, en la misma lista que usan el botón sólido y los anillos de foco. */ body.hc-claude.hc-pp .hc-tldr { margin-top: clamp(28px, 3.2vw, 40px); padding: clamp(22px, 2.6vw, 30px); background: var(--tldr-fondo, var(--line-soft, rgba(20, 26, 48, .04))); border: 1px solid var(--tldr-borde, var(--hc-line)); border-radius: var(--hc-r-card); } body.hc-claude.hc-pp .hc-tldr__title { margin: 0 0 14px; font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--tldr-fuerte, var(--line-text, var(--hc-ink))); opacity: .78; } body.hc-claude.hc-pp .hc-tldr ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 30px; margin: 0; padding: 0; list-style: none; } body.hc-claude.hc-pp .hc-tldr li { position: relative; padding-left: 20px; font-size: .9375rem; line-height: 1.5; color: var(--tldr-tinta, var(--hc-text)); } body.hc-claude.hc-pp .hc-tldr li::before { content: ""; position: absolute; left: 0; top: 9px; width: 8px; height: 2px; background: var(--tldr-marca, var(--line, var(--hc-line-strong))); } body.hc-claude.hc-pp .hc-tldr b { color: var(--tldr-fuerte, var(--hc-ink)); font-weight: 600; } body.hc-claude.hc-pp .hc-tldr i { font-style: italic; } @media (max-width: 900px) { body.hc-claude.hc-pp .hc-tldr ul { grid-template-columns: 1fr; } } /* ---------- Contacto: la lista de datos en la presentación ---------- */ body.hc-claude.hc-pp .hc-ct-list { margin-top: clamp(20px, 2.4vw, 28px); } body.hc-claude.hc-pp .hc-ct-list .hc-contact__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 28px; } @media (max-width: 767px) { body.hc-claude.hc-pp .hc-ct-list .hc-contact__list { grid-template-columns: 1fr; } } /* ---------- Identificación del responsable, en la política ---------- */ body.hc-claude.hc-pp .hc-legal__id { display: grid; gap: 10px; margin: 18px 0 0; padding: 18px 20px; background: var(--hc-alt); border-radius: var(--hc-r-card); } body.hc-claude.hc-pp .hc-legal__id div { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 4px 16px; } body.hc-claude.hc-pp .hc-legal__id dt { margin: 0; font-size: .8125rem; font-weight: 600; color: var(--hc-muted); } body.hc-claude.hc-pp .hc-legal__id dd { margin: 0; font-size: .9375rem; color: var(--hc-ink); } @media (max-width: 600px) { body.hc-claude.hc-pp .hc-legal__id div { grid-template-columns: 1fr; } } /* ---------- Mapa de la oficina ---------- */ body.hc-claude.hc-pp .hc-map-w { margin-top: clamp(26px, 3vw, 38px); } body.hc-claude.hc-pp .hc-map { position: relative; aspect-ratio: 21 / 9; overflow: hidden; border: 1px solid var(--hc-line); border-radius: var(--hc-r-card); box-shadow: var(--hc-shadow); background: var(--hc-alt); } body.hc-claude.hc-pp .hc-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } @media (max-width: 767px) { body.hc-claude.hc-pp .hc-map { aspect-ratio: 4 / 3; } } /* ========================================================================== Nosotros: fichas ========================================================================== */ /* Los pasos numerados admiten tres y cinco columnas */ body.hc-claude.hc-pp .hc-origin--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } body.hc-claude.hc-pp .hc-origin--3::before { left: 15%; right: 15%; } /* Dos fichas de familia, a media anchura */ /* .hc-subcards--2: dejaba dos fichas de 606 px, el triple que las de seis. El ancho lo pone ahora la ficha. */ /* Ficha de país: la cifra manda, el texto acompaña */ body.hc-claude.hc-pp .hc-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; list-style: none; margin: 0; padding: 0; } body.hc-claude.hc-pp .hc-stat { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 26px 22px 28px; background: var(--hc-white); border: 1px solid var(--hc-line); border-radius: var(--hc-r-card); box-shadow: var(--hc-shadow); transition: transform 200ms var(--hc-ease), box-shadow 200ms ease, border-color 200ms ease; } body.hc-claude.hc-pp .hc-stat::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; border-radius: var(--hc-r-card) var(--hc-r-card) 0 0; background: color-mix(in srgb, var(--line) 55%, #fff); } @media (hover: hover) and (pointer: fine) { body.hc-claude.hc-pp .hc-stat:hover { transform: translateY(-3px); box-shadow: var(--hc-shadow-hover); border-color: var(--hc-line-strong); } } body.hc-claude.hc-pp .hc-stat__k { font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--hc-muted); } body.hc-claude.hc-pp .hc-stat__v { font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 600; line-height: 1.1; color: var(--line); letter-spacing: -.01em; } body.hc-claude.hc-pp .hc-stat__t { font-size: .875rem; line-height: 1.5; color: var(--hc-text); margin-top: 4px; } @media (max-width: 1024px) { body.hc-claude.hc-pp .hc-origin--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } body.hc-claude.hc-pp .hc-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* Por debajo de 900 px la cifra de la ficha de país y la ficha con imagen dejan de respirar en tres y dos columnas: pasan a una sola. */ @media (max-width: 900px) { /* 1 de octubre, tarde. Esto fijaba las columnas a mano y se saltaba las variables: a 820 px dejaba las dos fichas a 754 px de ancho, mientras las de tres y cuatro seguían a 292. Ahora dice cuántas columnas, no de qué ancho, y el ancho de la ficha es el mismo en todo el sitio. */ /* La línea de .hc-subcards--2 se retira: con la ficha a 292 px caben dos hasta los 720, que es donde el bloque entero pasa a una columna. */ body.hc-claude.hc-pp .hc-stats { grid-template-columns: 1fr; gap: 16px; } } @media (max-width: 767px) { body.hc-claude.hc-pp .hc-origin--3 { grid-template-columns: 1fr; gap: 16px; } } /* ========================================================================== Fichas contrapuestas y dibujo de la zona de silencio ========================================================================== */ /* Dos fichas que se comparan de un vistazo, no se leen */ body.hc-claude.hc-pp .hc-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; list-style: none; margin: 0; padding: 0; } body.hc-claude.hc-pp .hc-duo li { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 24px 22px 26px; background: var(--hc-white); border: 1px solid var(--hc-line); border-radius: var(--hc-r-card); box-shadow: var(--hc-shadow); transition: transform 200ms var(--hc-ease), box-shadow 200ms ease, border-color 200ms ease; } body.hc-claude.hc-pp .hc-duo li::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; border-radius: var(--hc-r-card) var(--hc-r-card) 0 0; background: color-mix(in srgb, var(--line) 55%, #fff); } @media (hover: hover) and (pointer: fine) { body.hc-claude.hc-pp .hc-duo li:hover { transform: translateY(-3px); box-shadow: var(--hc-shadow-hover); border-color: var(--hc-line-strong); } } body.hc-claude.hc-pp .hc-duo__ico { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 8px; border-radius: 10px; background: var(--line-soft, color-mix(in srgb, var(--line) 12%, #fff)); color: var(--line-graphic-soft); } body.hc-claude.hc-pp .hc-duo__ico svg { width: 21px; height: 21px; } body.hc-claude.hc-pp .hc-duo b { font-size: 1.0625rem; font-weight: 600; line-height: 1.3; color: var(--hc-ink); } body.hc-claude.hc-pp .hc-duo__t { font-size: var(--hc-fs-small); line-height: 1.55; color: var(--hc-text); } /* El dibujo de la zona de silencio */ body.hc-claude.hc-pp .hc-qz { margin: clamp(24px, 3vw, 34px) 0 0; } body.hc-claude.hc-pp .hc-qz svg { display: block; width: 100%; height: auto; max-width: 720px; margin: 0 auto; background: var(--hc-alt); border: 1px solid var(--hc-line); border-radius: var(--hc-r-card); padding: 14px 10px; box-sizing: border-box; } body.hc-claude.hc-pp .hc-qz figcaption { max-width: 68ch; margin: 16px auto 0; font-size: var(--hc-fs-small); line-height: 1.6; color: var(--hc-muted); text-align: center; } @media (max-width: 767px) { body.hc-claude.hc-pp .hc-duo { grid-template-columns: 1fr; gap: 16px; } body.hc-claude.hc-pp .hc-qz figcaption { text-align: left; } } /* ========================================================================== Etiquetas VOID (26-09-2026) ========================================================================== */ /* ---------- El desmoldeo, en dos escenas ---------- */ body.hc-claude.hc-pp .hc-peel { margin: 28px 0 0; padding: 26px 26px 22px; background: #fff; border: 1px solid var(--hc-line); border-radius: var(--hc-r-card); box-shadow: var(--hc-shadow); /* 1 de octubre: el dibujo se veía grande. Se le pone techo y se centra. */ max-width: 820px; margin-inline: auto; } body.hc-claude.hc-pp .hc-peel__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } /* 1 de octubre, tarde. Hernando: «se ve descentrado, muy a la izquierda». Medido: el dibujo va centrado y ocupa 874 px de los 1.240 del envoltorio, pero el texto de debajo arrancaba pegado al borde izquierdo, en una columna de 592, y dejaba 648 px de hueco a la derecha. Tres anchos distintos y tres ejes distintos en la misma sección. El texto y la foto se alinean ahora con el dibujo: mismo ancho, mismo eje. Y una segunda causa, la de fondo: el dibujo TAMPOCO estaba centrado en el sitio de verdad, aunque en la copia de medir saliera centrado desde el 1 de octubre por la mañana. Elementor trae «.elementor .elementor-widget:not(...):not(...) figure { margin: 0 }», con especificidad (0,4,1), y mi regla iba con (0,3,1): perdía, y el «margin-inline: auto» no llegaba a aplicarse. En la copia de medir no está la hoja de Elementor, así que allí sí se veía centrado. Sonda número quince. Aquí se sube la especificidad por encima de la suya. */ body.hc-claude.hc-pp .hc-vd-peel .hc-peel-w figure.hc-peel { margin: 28px auto 0; } body.hc-claude.hc-pp .hc-vd-peel .hc-pp-split { max-width: 820px; margin-inline: auto; grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr); align-items: center; } body.hc-claude.hc-pp .hc-peel__scene { min-width: 0; } body.hc-claude.hc-pp .hc-peel__scene svg { width: 100%; height: auto; display: block; } body.hc-claude.hc-pp .hc-peel__t { margin: 0 0 10px; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--line, var(--hc-navy)); } body.hc-claude.hc-pp .hc-peel__key { margin: 14px 0 0; padding: 0; list-style: none; counter-reset: peel; display: grid; gap: 8px; } body.hc-claude.hc-pp .hc-peel__key li { counter-increment: peel; position: relative; padding-left: 30px; font-size: .875rem; color: var(--hc-muted); line-height: 1.45; } body.hc-claude.hc-pp .hc-peel__key li::before { content: counter(peel); position: absolute; left: 0; top: 0; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--hc-line-strong, var(--hc-line)); display: grid; place-items: center; font-size: .6875rem; font-weight: 700; color: var(--hc-ink); } body.hc-claude.hc-pp .hc-peel__note { margin: 14px 0 0; font-size: .875rem; color: var(--hc-muted); line-height: 1.45; } body.hc-claude.hc-pp .hc-peel figcaption { margin: 20px 0 0; padding-top: 16px; border-top: 1px solid var(--hc-line); font-size: .875rem; color: var(--hc-muted); line-height: 1.6; } /* ---------- Dónde sí y dónde no: dos columnas contrapuestas ---------- */ body.hc-claude.hc-pp .hc-fit { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 4px; padding: 0; list-style: none; } body.hc-claude.hc-pp .hc-fit > li { background: #fff; border: 1px solid var(--hc-line); border-radius: var(--hc-r-card); padding: 22px 22px 20px; box-shadow: var(--hc-shadow); } body.hc-claude.hc-pp .hc-fit__h { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-size: 1.0625rem; font-weight: 700; color: var(--hc-ink); } body.hc-claude.hc-pp .hc-fit__mark { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: .8125rem; font-weight: 800; color: #fff; } body.hc-claude.hc-pp .hc-fit--yes .hc-fit__mark { background: #2f8f4e; } body.hc-claude.hc-pp .hc-fit--no .hc-fit__mark { background: var(--c-void, #d42f2f); } body.hc-claude.hc-pp .hc-fit ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 11px; } body.hc-claude.hc-pp .hc-fit ul li { position: relative; padding-left: 16px; font-size: .9375rem; color: var(--hc-muted); line-height: 1.5; } body.hc-claude.hc-pp .hc-fit ul li::before { content: ""; position: absolute; left: 0; top: .55em; width: 6px; height: 1.5px; background: var(--hc-line-strong, #c9ced9); } body.hc-claude.hc-pp .hc-fit ul li b { color: var(--hc-ink); font-weight: 600; } @media (max-width: 860px) { body.hc-claude.hc-pp .hc-peel__grid, body.hc-claude.hc-pp .hc-fit { grid-template-columns: 1fr; } body.hc-claude.hc-pp .hc-peel { padding: 20px 18px 18px; } } /* ---------- La fotografía de la etiqueta retirada ---------- */ /* 1 de octubre. Era una tarjeta BLANCA con la foto a 562 px, es decir, casi a tamaño original: la imagen mide 647 px de ancho. Pedido: reducirla y darle el tratamiento de la portada. Primer intento, y fallo mío: se le dio el fondo oscuro pero NO el tratamiento de la portada, con la excusa de que la foto es un recorte con transparencia (36,7% del archivo, comprobado) y el degradado da por supuesta una foto a sangre. Eso fue cambiar la instrucción por mi criterio. Mirada la foto compuesta sobre el azul marino, el recorte se funde con el fondo y el degradado funciona igual que en la portada. Ahora es lo mismo que .hc-app: foto a sangre, degradado y el pie encima. */ body.hc-claude.hc-pp .hc-vd-shot { position: relative; isolation: isolate; overflow: hidden; background: var(--hc-navy); border: 0; border-radius: var(--hc-r-card); box-shadow: 0 18px 44px rgba(14, 19, 40, .22); padding: 0; align-self: center; /* centrada en su columna, no pegada arriba */ /* El ancho tiene que ir explícito. Con la foto y el pie en posición absoluta no queda nada en el flujo, y «margin-inline: auto» en una celda de rejilla la deja encogida a su contenido: medido, 0 x 0. */ width: 100%; max-width: 420px; margin-inline: auto; aspect-ratio: 16 / 10; } body.hc-claude.hc-pp .hc-vd-shot > .elementor-widget-image { position: absolute; inset: 0; z-index: -2; } body.hc-claude.hc-pp .hc-vd-shot > .elementor-widget-image .elementor-widget-container { height: 100%; } body.hc-claude.hc-pp .hc-vd-shot img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0; transition: transform 400ms var(--hc-ease); } @media (hover: hover) and (pointer: fine) { body.hc-claude.hc-pp .hc-vd-shot:hover img { transform: scale(1.035); } } body.hc-claude.hc-pp .hc-vd-shot::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(14, 19, 40, 0) 34%, rgba(14, 19, 40, .82) 78%, rgba(14, 19, 40, .94) 100%); } body.hc-claude.hc-pp .hc-vd-shot__cap-w { position: absolute; left: 0; right: 0; bottom: 0; } body.hc-claude.hc-pp .hc-vd-shot__cap { margin: 0; padding: 20px 22px; font-size: .8125rem; color: #e3e8f3; line-height: 1.45; } /* ========================================================================== Limpieza de bloques de texto (26-09-2026) ========================================================================== */ /* ---------- El recorrido del master ---------- */ body.hc-claude.hc-pp .hc-master { margin: 26px 0 0; padding: 26px 26px 20px; background: #fff; border: 1px solid var(--hc-line); border-radius: var(--hc-r-card); box-shadow: var(--hc-shadow); } body.hc-claude.hc-pp .hc-master svg { display: block; width: 100%; height: auto; max-width: 760px; margin-inline: auto; } body.hc-claude.hc-pp .hc-master figcaption { margin: 20px auto 0; padding-top: 16px; border-top: 1px solid var(--hc-line); max-width: 760px; font-size: .875rem; color: var(--hc-muted); line-height: 1.6; } @media (max-width: 720px) { body.hc-claude.hc-pp .hc-master { padding: 18px 14px 16px; overflow-x: auto; } body.hc-claude.hc-pp .hc-master svg { min-width: 560px; } body.hc-claude.hc-pp .hc-master figcaption::before { content: "Deslice para ver el recorrido completo. "; font-weight: 600; color: var(--hc-ink); } } /* ---------- Línea de tiempo ---------- */ body.hc-claude.hc-pp .hc-tl { margin: 4px 0 0; padding: 0; list-style: none; display: grid; gap: 0; } body.hc-claude.hc-pp .hc-tl > li { display: grid; grid-template-columns: 116px 24px minmax(0, 1fr); align-items: start; column-gap: 4px; position: relative; padding-bottom: 26px; } body.hc-claude.hc-pp .hc-tl > li:last-child { padding-bottom: 0; } body.hc-claude.hc-pp .hc-tl__when { padding-top: 1px; text-align: right; font-size: .8125rem; font-weight: 700; letter-spacing: .02em; color: var(--line, var(--hc-navy)); } body.hc-claude.hc-pp .hc-tl__dot { position: relative; justify-self: center; margin-top: 5px; width: 11px; height: 11px; border-radius: 50%; background: #fff; border: 2px solid var(--line, var(--hc-navy)); } /* el hilo que une los hitos */ body.hc-claude.hc-pp .hc-tl > li:not(:last-child) .hc-tl__dot::after { content: ""; position: absolute; left: 50%; top: 13px; transform: translateX(-50%); width: 1.5px; height: calc(100% + 26px); background: var(--hc-line); } body.hc-claude.hc-pp .hc-tl__body { padding-left: 8px; } body.hc-claude.hc-pp .hc-tl__body b { display: block; font-size: 1rem; font-weight: 700; color: var(--hc-ink); margin-bottom: 5px; line-height: 1.35; } body.hc-claude.hc-pp .hc-tl__t { display: block; font-size: .9375rem; color: var(--hc-muted); line-height: 1.55; } @media (max-width: 720px) { body.hc-claude.hc-pp .hc-tl > li { grid-template-columns: 24px minmax(0, 1fr); column-gap: 10px; } body.hc-claude.hc-pp .hc-tl__when { grid-column: 2; grid-row: 1; text-align: left; margin-bottom: 4px; } body.hc-claude.hc-pp .hc-tl__dot { grid-column: 1; grid-row: 1; margin-top: 3px; } body.hc-claude.hc-pp .hc-tl__body { grid-column: 2; grid-row: 2; padding-left: 0; } body.hc-claude.hc-pp .hc-tl > li:not(:last-child) .hc-tl__dot::after { height: calc(100% + 40px); } } /* ========================================================================== Activos fijos · dibujo de colocación y pasos con icono (26-09-2026) ========================================================================== */ body.hc-claude.hc-pp .hc-place { display: block; /* figure hereda grid del sistema y ahoga el ancho del svg */ margin: 0; background: #fff; border: 1px solid var(--hc-line); border-radius: var(--hc-r-card); padding: 20px 20px 14px; box-shadow: var(--hc-shadow); } body.hc-claude.hc-pp .hc-place svg { display: block; width: 100%; height: auto; } /* Un SVG no reordena solo: hay dos dibujos y el ancho decide cuál se ve */ /* Un SVG no reordena solo: hay tres dibujos y el ancho decide cuál se ve. Cuatro en fila, dos por dos, o uno debajo de otro. */ body.hc-claude.hc-pp .hc-place svg.hc-place--2, body.hc-claude.hc-pp .hc-place svg.hc-place--1 { display: none; } @media (max-width: 999px) { body.hc-claude.hc-pp .hc-place svg.hc-place--4 { display: none; } body.hc-claude.hc-pp .hc-place svg.hc-place--2 { display: block; } } @media (max-width: 559px) { body.hc-claude.hc-pp .hc-place svg.hc-place--2 { display: none; } body.hc-claude.hc-pp .hc-place svg.hc-place--1 { display: block; } } body.hc-claude.hc-pp .hc-place__cap { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--hc-line); font-size: .875rem; font-style: normal; color: var(--hc-text); } body.hc-claude.hc-pp .hc-place__key { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; } body.hc-claude.hc-pp .hc-place__key::before { content: ""; width: 16px; height: 8px; border-radius: 3px; border: 2px solid currentColor; } body.hc-claude.hc-pp .hc-place__key--ok { color: #2f8f52; } body.hc-claude.hc-pp .hc-place__key--no { color: #d42f2f; } body.hc-claude.hc-pp .hc-place__key--no::before { border-style: dashed; } @media (max-width: 640px) { body.hc-claude.hc-pp .hc-place { padding: 14px 14px 12px; } body.hc-claude.hc-pp .hc-place svg { min-height: 180px; } } /* Pasos con icono: el número se queda de guía y el dibujo lleva el peso */ body.hc-claude.hc-pp .hc-origin--ico li { padding-top: 56px; position: relative; } body.hc-claude.hc-pp .hc-origin--ico .hc-origin__ico { position: absolute; top: 0; left: 0; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 12px; background: var(--line-soft); color: var(--line-graphic-soft); } body.hc-claude.hc-pp .hc-origin--ico .hc-origin__ico svg { width: 22px; height: 22px; } body.hc-claude.hc-pp .hc-origin--ico .hc-origin__n { /* Con chapa de icono, el número deja de ser el protagonista: pierde el círculo y queda como guía. Antes heredaba el fondo del color de línea y la tinta gris caía encima, así que la cifra no se leía. */ position: absolute; top: 8px; left: 54px; width: auto; height: auto; background: none; font-size: .8125rem; font-weight: 600; color: var(--hc-muted); } /* Tres fichas de dato en fila (variante de hc-duo para condiciones clave) */ body.hc-claude.hc-pp .hc-duo--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } @media (max-width: 900px) { body.hc-claude.hc-pp .hc-duo--3 { grid-template-columns: 1fr; } } /* Cintas · el color del precinto como código de remitente (26-09-2026) */ body.hc-claude.hc-pp .hc-swatches { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } body.hc-claude.hc-pp .hc-swatches li { display: flex; flex-direction: column; gap: 8px; background: #fff; border: 1px solid var(--hc-line); border-radius: var(--hc-r-card); padding: 16px; } body.hc-claude.hc-pp .hc-swatches .hc-swatch { /* la muestra de cinta es un color plano, no la base holográfica de --s1/--s2/--s3 */ width: 100%; height: 44px; aspect-ratio: auto; border-radius: 8px; border: 1px solid var(--hc-line); box-shadow: inset 0 -1px 0 rgba(0,0,0,.06); } body.hc-claude.hc-pp .hc-swatches b { font-size: 1rem; font-weight: 600; color: var(--hc-ink); } body.hc-claude.hc-pp .hc-swatches .hc-swatch__t { font-size: .875rem; color: var(--hc-text); line-height: 1.4; } @media (max-width: 860px) { body.hc-claude.hc-pp .hc-swatches { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 460px) { body.hc-claude.hc-pp .hc-swatches { grid-template-columns: 1fr; } } /* Cintas · dos columnas iguales para superficies y sectores (26-09-2026) */ body.hc-claude.hc-pp .hc-ct-where .hc-pp-split { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } body.hc-claude.hc-pp .hc-mini-h { margin: 0; font-size: .8125rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--line-text-tint); } @media (max-width: 767px) { body.hc-claude.hc-pp .hc-ct-where .hc-pp-split { grid-template-columns: 1fr; } } /* Cintas · el dibujo llena la tarjeta, pero el SVG no se estira sin freno. Sin tope, a 560 px el rótulo OPENED salía a 52 px. */ body.hc-claude.hc-pp .hc-tape svg { margin-inline: auto; } body.hc-claude.hc-pp .hc-tape svg.hc-place--4 { max-width: 1120px; } body.hc-claude.hc-pp .hc-tape svg.hc-place--2 { max-width: 660px; } body.hc-claude.hc-pp .hc-tape svg.hc-place--1 { max-width: 340px; } /* Ficha de producto con chapa de icono, cuando no hay una foto por tarjeta */ body.hc-claude.hc-pp .hc-subcard__ico-w { margin-bottom: 4px; } body.hc-claude.hc-pp .hc-subcard__ico { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; background: var(--line-soft); color: var(--line-graphic-soft); } body.hc-claude.hc-pp .hc-subcard__ico svg { width: 26px; height: 26px; } /* Comparativa con peso: una columna por opción, cabecera del color de la línea */ body.hc-claude.hc-pp .hc-compara thead th { vertical-align: bottom; padding-bottom: 14px; } body.hc-claude.hc-pp .hc-compara thead th b { display: block; font-size: 1.0625rem; font-weight: 600; color: var(--hc-ink); line-height: 1.25; } body.hc-claude.hc-pp .hc-compara thead th span { display: block; margin-top: 4px; font-size: .8125rem; font-weight: 600; color: var(--line-text-tint); line-height: 1.3; } body.hc-claude.hc-pp .hc-compara thead th + th { border-top: 3px solid var(--line); } body.hc-claude.hc-pp .hc-compara tbody th { font-size: .8125rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--hc-muted); white-space: nowrap; } body.hc-claude.hc-pp .hc-compara tbody td { color: var(--hc-text); } body.hc-claude.hc-pp .hc-compara tbody tr:last-child td { font-weight: 600; color: var(--hc-ink); } /* El dibujo del liner es de dos escenas: no necesita el tope de cuatro columnas */ body.hc-claude.hc-pp .hc-liner svg.hc-place--4 { max-width: 840px; } body.hc-claude.hc-pp .hc-liner svg.hc-place--1 { max-width: 320px; } @media (max-width: 719px) { body.hc-claude.hc-pp .hc-liner svg.hc-place--4 { display: none; } body.hc-claude.hc-pp .hc-liner svg.hc-place--1 { display: block; } } @media (min-width: 720px) { body.hc-claude.hc-pp .hc-liner svg.hc-place--4 { display: block; } body.hc-claude.hc-pp .hc-liner svg.hc-place--1 { display: none; } } /* Aviso del hero: banda estrecha, no una sección entera */ body.hc-claude.hc-pp .hc-phero .hc-aviso { margin: 18px auto 0; padding: 12px 16px; border-radius: var(--hc-radius); background: rgba(255, 255, 255, .08); border-left: 3px solid var(--line-on-dark); color: #c9d0e3; font-size: .9375rem; line-height: 1.5; max-width: 74ch; } body.hc-claude.hc-pp .hc-phero .hc-aviso b { color: #fff; } /* Dos columnas de chips, sin reusar el molde de párrafo más recuadro */ /* Superficies y sectores: una placa con dos mitades, no dos grupos sueltos. Sobre fondo alterno los chips solos flotaban; la placa blanca los recoge. */ body.hc-claude.hc-pp .hc-duo-chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; align-items: stretch; margin-top: clamp(22px, 2.8vw, 34px); background: #fff; border: 1px solid var(--hc-line); border-radius: var(--hc-r-card); overflow: hidden; } body.hc-claude.hc-pp .hc-duo-chips > .hc-half { padding: clamp(18px, 2.2vw, 26px) clamp(18px, 2.4vw, 30px); } body.hc-claude.hc-pp .hc-duo-chips > .hc-half + .hc-half { border-left: 1px solid var(--hc-line); } @media (max-width: 767px) { body.hc-claude.hc-pp .hc-duo-chips { grid-template-columns: 1fr; } body.hc-claude.hc-pp .hc-duo-chips > .hc-half + .hc-half { border-left: 0; border-top: 1px solid var(--hc-line); } } /* Lo que va justo debajo de una placa necesita aire propio */ body.hc-claude.hc-pp .hc-after-plate { margin-top: clamp(30px, 3.6vw, 44px); } /* ========================================================================== Centrado del contenido, páginas de producto El criterio está escrito entero en holo-claude.css. Resumen: se centra el bloque, el texto sigue a la izquierda; los encabezados de sección van centrados del todo; lo que vive en una columna o una ficha no se toca. ========================================================================== */ /* El párrafo dentro de .hc-measure lleva su propio tope de renglón */ body.hc-claude.hc-pp .hc-measure p { margin-inline: auto; } /* pero no cuando la nota es la mitad de un bloque a dos columnas */ body.hc-claude.hc-pp .hc-pp-split > .hc-measure p, body.hc-claude.hc-pp .hc-duo > .hc-measure p { margin-inline: 0; } /* Encabezado del bloque de origen: es un encabezado, va centrado del todo */ body.hc-claude.hc-pp .hc-origin-head { text-align: center; } body.hc-claude.hc-pp .hc-origin-head p { margin-inline: auto; } /* Encabezado de la página legal */ body.hc-claude.hc-pp .hc-legal__head { margin-inline: auto; text-align: center; } /* Notas y textos sueltos que ocupan el ancho del contenedor */ body.hc-claude.hc-pp .hc-colors__intro, body.hc-claude.hc-pp .hc-colors__note, body.hc-claude.hc-pp .hc-def, body.hc-claude.hc-pp .hc-quote, body.hc-claude.hc-pp .hc-aviso { margin-inline: auto; } /* Los dibujos ya los centraba su figura; que no dependa de ella */ body.hc-claude.hc-pp .hc-tape svg, body.hc-claude.hc-pp .hc-liner svg, body.hc-claude.hc-pp .hc-place svg { margin-inline: auto; } /* Lo que NO se centra, dicho en voz alta para que nadie lo "arregle" luego: .hc-phero y .hc-hero son dos columnas, texto a la izquierda y foto a la derecha; .hc-faq__intro es la columna izquierda del bloque de preguntas; .hc-legal__body comparte fila con su índice; .hc-premium__text, .hc-sample__copy, .hc-format-one__body y .hc-app__text viven dentro de una columna o una ficha; .hc-crumbs va pegado a la izquierda; y el pie se queda como está, incluida la línea legal, que ya ocupa el ancho entero. */ /* ---------- Ficha de superficie y de sector (chips con icono) ---------- Con icono el chip deja de ser una píldora y pasa a ficha: el dibujo arriba, grande, y el nombre debajo. En rejilla, para que las fichas se alineen en columnas en vez de quedar en un renglón irregular. El icono es una marca, no texto, así que le basta 3:1. Va con --line-graphic-soft y no con el color puro: sobre el fondo de la ficha (--line-soft, la línea al 8 %) el verde puro de cintas se queda en 3,03, justo en el borde, y la variante sobre chapa clara da 4,22. */ body.hc-claude.hc-pp .hc-chips--ico { display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 150px)); justify-content: center; gap: 10px; margin-top: 12px; } /* La ficha no depende de la clase de la lista: si el JSON es más viejo que el CSS, el chip se ve igual de bien. Un estado intermedio dejaba el icono sin tamaño y el svg se estiraba al 100 % de la ficha, que salía como un círculo enorme. */ body.hc-claude.hc-pp .hc-chips li.has-ico { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 9px; padding: 15px 10px 13px; border-radius: 14px; text-align: center; line-height: 1.25; } body.hc-claude.hc-pp .hc-chip__ico { display: block; flex: 0 0 auto; width: 28px; height: 28px; color: var(--line-graphic-soft); } /* medida explícita en el propio dibujo, no solo el 100 % del padre */ body.hc-claude.hc-pp .hc-chip__ico svg { width: 28px; height: 28px; max-width: 100%; max-height: 100%; display: block; } body.hc-claude.hc-pp .hc-chip__t { display: block; } @media (max-width: 767px) { /* en móvil se aprieta la rejilla y el hueco, nunca el dibujo */ body.hc-claude.hc-pp .hc-chips--ico { grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 8px; } body.hc-claude.hc-pp .hc-chips li.has-ico { padding: 13px 8px 11px; gap: 8px; } body.hc-claude.hc-pp .hc-chip__ico { width: 24px; height: 24px; } body.hc-claude.hc-pp .hc-chip__ico svg { width: 24px; height: 24px; } } /* ---------- Huecos de fotografía ---------- El pie no es decorativo: dice qué tiene que verse ahí, para que la foto se pueda encargar sin volver a preguntar. Mientras no exista, se ve la imagen compartida de la familia. */ body.hc-claude.hc-pp .hc-fotos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); margin-top: clamp(20px, 2.5vw, 30px); } body.hc-claude.hc-pp .hc-fotos--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } body.hc-claude.hc-pp .hc-fotos--1 { grid-template-columns: minmax(0, 1fr); max-width: 760px; margin-inline: auto; } body.hc-claude.hc-pp .hc-foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--hc-r-img); border: 1px solid var(--hc-line); display: block; } body.hc-claude.hc-pp .hc-foto__pie p { margin: 10px 0 0; font-size: .8125rem; line-height: 1.45; color: var(--hc-muted); } @media (max-width: 767px) { body.hc-claude.hc-pp .hc-fotos, body.hc-claude.hc-pp .hc-fotos--3 { grid-template-columns: minmax(0, 1fr); } } /* ---------- Muestras de color de la cinta ---------- Estaban aquí desde la primera versión de Premium, que planteaba el color como código del remitente. Ese discurso se retiró el 29 de septiembre y la sección con él, pero el componente se queda: lo hereda la cinta personalizada, donde el color es lo que de verdad es, una elección de compra. Los tres colores viven aquí, en clases, y no en el archivo que arma la página: el color de un componente vive en su contenedor, no en la etiqueta. */ body.hc-claude.hc-pp .hc-tintas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(196px, 1fr)); gap: 12px; } body.hc-claude.hc-pp .hc-tintas li { display: flex; align-items: center; gap: 11px; padding: 11px 14px; border-radius: 12px; background: #fff; border: 1px solid var(--hc-line); } body.hc-claude.hc-pp .hc-tinta__m { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 7px; border: 1px solid rgba(0, 0, 0, .16); } body.hc-claude.hc-pp .hc-tintas b { display: block; font-size: .875rem; font-weight: 600; color: var(--hc-ink); } body.hc-claude.hc-pp .hc-tintas span.t { display: block; font-size: .75rem; color: var(--hc-muted); } /* Los tres colores más pedidos de la cinta. Son colores de producto, no del sistema: por eso son valores literales y no variables de línea. */ body.hc-claude.hc-pp .hc-tinta__m--azul { background: #1c50a8; } body.hc-claude.hc-pp .hc-tinta__m--rojo { background: #c8232c; } body.hc-claude.hc-pp .hc-tinta__m--blanco { background: #f7f7f5; border-color: rgba(0, 0, 0, .28); } /* El dibujo del liner con una sola escena. Lo usa la cinta personalizada, donde el liner no se elige: ahí el rollo sin soporte sobra y además contradice. */ body.hc-claude.hc-pp .hc-liner--una svg.hc-place--4 { max-width: 320px; } body.hc-claude.hc-pp .hc-liner--una svg.hc-place--1 { max-width: 320px; } /* Los colores de la cinta de domicilios, confirmados el 30 de septiembre y distintos según el ancho. Son colores de producto, no del sistema: por eso son valores literales. Son muestras aproximadas, no fotografías, y la página lo dice. */ body.hc-claude.hc-pp .hc-tinta__m--naranja { background: #e8621a; } body.hc-claude.hc-pp .hc-tinta__m--verde-menta { background: #6fc9a6; } body.hc-claude.hc-pp .hc-tinta__m--cafe { background: #6b4429; } body.hc-claude.hc-pp .hc-tinta__m--azul-cielo { background: #7bb8e8; } /* El dibujo del consecutivo: tres bultos con su número. Más estrecho que el de las escenas de uso, porque son tres figuras y no cuatro. */ body.hc-claude.hc-pp .hc-consec svg.hc-place--4 { max-width: 620px; } body.hc-claude.hc-pp .hc-consec svg.hc-place--1 { max-width: 230px; } /* ---------- Cotizador: el número de campos vive en el contenedor ---------- 1 de octubre. La rejilla estaba fija en cuatro columnas. Con el cotizador en catorce páginas, el número de campos puede cambiar por familia, así que sale de la clase del contenedor y no de una regla reescrita cada vez. */ body.hc-claude.hc-pp .hc-quote__grid { --hcq-n: 4; grid-template-columns: repeat(var(--hcq-n), minmax(0, 1fr)); } body.hc-claude.hc-pp .hc-quote__grid--n2 { --hcq-n: 2; } body.hc-claude.hc-pp .hc-quote__grid--n3 { --hcq-n: 3; } body.hc-claude.hc-pp .hc-quote__grid--n4 { --hcq-n: 4; } body.hc-claude.hc-pp .hc-quote__grid--n5 { --hcq-n: 5; } @media (max-width: 900px) { body.hc-claude.hc-pp .hc-quote__grid { --hcq-n: 2; } } @media (max-width: 600px) { body.hc-claude.hc-pp .hc-quote__grid { --hcq-n: 1; } } /* ---------- Las dos columnas desiguales · 1 de octubre ---------- Lo que se veía como "espacio hacia la izquierda" no era un descuadre: los bloques de texto están centrados, 48 contra 48 en las 48 secciones medidas. Era .hc-pp-split con una columna mucho más corta que la otra, y en 15 de los 17 casos la pareja es siempre la misma: un párrafo de texto al lado de un recuadro .hc-aside. Sus alturas no coinciden nunca, y el hueco queda debajo de la corta. Dos remedios, y cada sección lleva el suyo escrito en su constructor: --una cuando la columna de texto es tan corta que la rejilla está al revés: dos renglones al lado de un recuadro de 300 px. Deja de ser de dos columnas. --centro cuando las dos columnas tienen sentido: el hueco se reparte arriba y abajo y el recuadro se lee como nota al margen, no como sobra. */ body.hc-claude.hc-pp .hc-pp-split--centro { align-items: center; } body.hc-claude.hc-pp .hc-pp-split--una { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: clamp(20px, 2.6vw, 32px); } /* 1 de octubre, corregido el mismo día. Esto ponía TODO a 64 caracteres, y en la sección 04 de garantía dejó el recuadro y las definiciones como una tira estrecha debajo de tres fichas a todo lo ancho: justo el "espacio blanco al costado izquierdo" que se reportó. El ancho de lectura es para el TEXTO; un recuadro o una ficha ocupan lo que les toca. */ body.hc-claude.hc-pp .hc-pp-split--una > * { width: 100%; } body.hc-claude.hc-pp .hc-pp-split--una > .hc-measure { max-width: 64ch; } body.hc-claude.hc-pp .hc-pp-split--una > .hc-measure { padding-top: 0; } /* En --una el párrafo ya no vive en una columna, así que vuelve a valer la regla del 28 de septiembre: el párrafo corto y suelto se centra. La excepción de .hc-pp-split lo dejaba a la izquierda, y aquí eso sería un error heredado. */ body.hc-claude.hc-pp .hc-pp-split--una > .hc-measure.hc-centrado, body.hc-claude.hc-pp .hc-pp-split--una > .hc-measure.hc-centrado p { text-align: center; } /* ---------- Platinum, que se veía apretada · 1 de octubre ---------- Medido antes de tocar nada: en la sección 01 los huecos entre bloques son 44, 0, 0, 0, 0 y 27 px. Cinco bloques seguidos SIN NADA entre ellos. La causa no es de esta página: el sitio no tiene una regla de ritmo entre los bloques de una sección. El 44 lo pone el margen inferior de .hc-head y lo demás depende de que cada componente traiga su propio margen. Los que no lo traen quedan pegados, y en Platinum coinciden cinco seguidos. Aquí se arregla SOLO Platinum, que es lo que se pidió. El hueco pasa a vivir en el contenedor, una sola vez, y los márgenes propios de los hijos directos se anulan para que no se sumen. La referencia son las páginas de cintas, que van entre 27 y 44: este queda en 36 a 1440 px. */ /* CORREGIDO el mismo día. Esta regla ponía EN COLUMNA todos los .hc-wrap de la página, y algunos envoltorios no son una pila de bloques sino una rejilla con su propia forma: .hc-faq son dos columnas, con el titular a la izquierda y el acordeón a la derecha. Al volverlos columna, las preguntas de Platinum y de tercera placa quedaban apiladas y distintas de las otras diecisiete. Tercera placa cae aquí porque comparte la clase de cuerpo hc-page-platinum. El ritmo se aplica solo al envoltorio liso. */ body.hc-claude.hc-page-platinum .hc-sec > .hc-wrap:not(.hc-faq):not(.hc-place):not(.hc-made):not(.hc-legal):not(.hc-hero__grid):not(.hc-ledger__grid):not(.hc-pp-file__grid):not(.hc-header__bar) { display: flex; flex-direction: column; gap: clamp(26px, 2.5vw, 36px); } body.hc-claude.hc-page-platinum .hc-sec > .hc-wrap:not(.hc-faq):not(.hc-place):not(.hc-made):not(.hc-legal):not(.hc-hero__grid):not(.hc-ledger__grid):not(.hc-pp-file__grid):not(.hc-header__bar) > * { margin-block: 0; } body.hc-claude.hc-page-platinum .hc-sec > .hc-wrap:not(.hc-faq):not(.hc-place):not(.hc-made):not(.hc-legal):not(.hc-hero__grid):not(.hc-ledger__grid):not(.hc-pp-file__grid):not(.hc-header__bar) > .hc-head { margin-bottom: 0; } /* ---------- Desplegable simple · 1 de octubre ---------- Para plegar una tabla larga sin acordeón ni JavaScript. La tabla de decretos de tercera placa se queda entera: no se recorta ningún dato normativo, solo deja de ocupar media página por delante de lo que vendemos. */ body.hc-claude.hc-pp .hc-det { border: 1px solid var(--hc-line); border-radius: var(--hc-radius); background: #fff; overflow: hidden; } body.hc-claude.hc-pp .hc-det__sum { list-style: none; cursor: pointer; padding: 16px 20px; display: flex; align-items: center; gap: 12px; font-weight: 600; color: var(--hc-ink); font-size: 1rem; } body.hc-claude.hc-pp .hc-det__sum::-webkit-details-marker { display: none; } body.hc-claude.hc-pp .hc-det__sum::after { content: ""; margin-left: auto; width: 10px; height: 10px; border-right: 2px solid var(--line-graphic); border-bottom: 2px solid var(--line-graphic); transform: rotate(45deg); transition: transform 180ms var(--hc-ease); } body.hc-claude.hc-pp .hc-det[open] .hc-det__sum::after { transform: rotate(-135deg); } body.hc-claude.hc-pp .hc-det__sum:focus-visible { outline: 2px solid var(--line-graphic); outline-offset: -2px; } body.hc-claude.hc-pp .hc-det__body { padding: 0 20px 20px; } body.hc-claude.hc-pp .hc-det__nota { margin: 14px 0 0; font-size: .8125rem; color: var(--hc-muted); } @media (hover: hover) and (pointer: fine) { body.hc-claude.hc-pp .hc-det__sum:hover { background: var(--line-soft); } } /* La columna de la oficina en contacto: el texto y su botón van juntos, como una sola columna del split. Antes el botón colgaba del split y se convertía en una tercera columna. */ body.hc-claude.hc-pp .hc-ct-donde { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; } /* ---------- Etiquetas Platinum (13-10-2026) ---------- */ /* «Tres datos clave» es un H3 real (lo pide el documento SEO): se ve como rótulo sobre el fondo azul */ .hc-page-etiquetas-platinum .hc-pledger__title{margin:8px 0 14px} body.hc-claude.hc-pp.hc-page-etiquetas-platinum .hc-pledger__title .elementor-heading-title{font-size:12px;line-height:1.4;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#c9d3ea} /* Dos colores del estampado: las dos muestras centradas */ .hc-page-etiquetas-platinum .hc-colors--duo{grid-template-columns:repeat(2,minmax(0,220px));justify-content:center} /* v3: piezas visuales de Etiquetas Platinum, con los mismos tokens del sitio */ body.hc-claude.hc-pp .hc-cmp.hc-cmp--3{grid-template-columns:repeat(3,minmax(0,1fr))} body.hc-claude.hc-pp .hc-ep-stamp__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px;align-items:start} body.hc-claude.hc-pp .hc-duo-w--1 .hc-duo{grid-template-columns:1fr} body.hc-claude.hc-pp .hc-ep-stamp .hc-colors--duo{grid-template-columns:repeat(2,minmax(0,1fr))} body.hc-claude.hc-pp .hc-ep-void{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:28px;align-items:center;margin-top:28px} body.hc-claude.hc-pp .hc-ep-void__media img{width:100%;height:auto;border-radius:16px;box-shadow:var(--hc-shadow, 0 8px 24px rgba(1,27,69,.12));display:block} body.hc-claude.hc-pp .hc-tamper-w--duo .hc-tamper{grid-template-columns:repeat(2,minmax(0,1fr))} @media (max-width:900px){ body.hc-claude.hc-pp .hc-cmp.hc-cmp--3,body.hc-claude.hc-pp .hc-ep-stamp__grid,body.hc-claude.hc-pp .hc-ep-void,body.hc-claude.hc-pp .hc-tamper-w--duo .hc-tamper{grid-template-columns:1fr} } /* 15-10: la definición de Premium va dentro del recuadro del proceso, encima del diagrama */ body.hc-claude.hc-pp .hc-master__intro { max-width: 760px; margin: 0 auto 22px; padding-bottom: 16px; border-bottom: 1px solid var(--hc-line); font-size: 1rem; line-height: 1.6; color: var(--hc-muted); text-align: center; } body.hc-claude.hc-pp .hc-master__intro b { color: var(--hc-ink); font-weight: 600; } @media (max-width: 720px) { body.hc-claude.hc-pp .hc-master__intro { text-align: left; position: sticky; left: 0; } }