/* ==========================================================================
CARTHEN TECHNOLOGIES E.I.R.L. — Sistema de diseño del sitio corporativo
--------------------------------------------------------------------------
CSS propio, sin frameworks, sin dependencias. Un solo archivo.
Sin JavaScript en todo el sitio.
REGLAS DE MARCA QUE ESTE ARCHIVO HACE CUMPLIR
1. El naranja de marca #E1853A ES el color de acción, desde el 2026-08-20.
Deroga la regla de junio de 2026 que lo prohibía. Decisión de Anthony,
anotada en NOTAS-WEB.md «Etapa 9». El verde sigue siendo el color de la
identidad: títulos, fondos y estructura. El naranja es el acento y la
acción. Reparto 60-30-10, que es la identidad original del logotipo.
2. Ningún naranja se usa a ojo: cada tono de la escala tiene un trabajo y
un ratio de contraste medido al lado. Ver el bloque 2.
3. Tipografía DM Sans (la misma de la aplicación), auto-alojada.
4. Contraste AA verificado, foco visible y prefers-reduced-motion.
========================================================================== */
/* ==========================================================================
1. TIPOGRAFÍA — DM Sans variable, auto-alojada
--------------------------------------------------------------------------
Se sirve desde el propio dominio, no desde una CDN. Razones:
· Una petición menos a un tercero -> carga más rápida con datos móviles.
· El sitio no hace ninguna llamada externa: eso es lo que declara la
política de privacidad, y así sigue siendo cierto.
Subconjunto "latin" (U+0000-00FF): cubre tildes, ñ, ¿ y ¡. 36 KB.
========================================================================== */
@font-face {
font-family: "DM Sans Variable";
font-style: normal;
font-display: swap;
font-weight: 100 1000;
src: url("../fonts/dm-sans-variable-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ==========================================================================
2. VARIABLES
========================================================================== */
:root {
/* --- Verdes: la identidad ---------------------------------------------- */
--verde-marca: #34583E; /* títulos, marco del teléfono, hover */
--verde-profundo: #233b29; /* texto principal Y fondo de sección oscura */
--verde-accion: #4f7a5d; /* acción secundaria, texto de apoyo */
--verde-claro: #9FBF88; /* acentos sobre fondo oscuro */
--verde-suave: #e8f0e0; /* fondos de sección alternos */
--verde-sage: #c8d7be; /* bordes marcados */
--borde: #e0e6d8; /* borde por defecto */
--fondo: #fafdf8; /* fondo de página, off-white con tinte verde */
--blanco: #ffffff;
--texto: #233b29;
--texto-suave: #5d7c66;
--verde-accion-hover: #42674e;
--verde-marca-hover: #264030;
/* --- Naranjas: la acción y el acento ------------------------------------
Escala de siete tonos del MISMO naranja de marca. Cada uno tiene un
trabajo y un contraste medido; no son intercambiables. Los ratios están
calculados con la fórmula de la WCAG 2.1, no estimados.
AA pide 4,5:1 en texto normal · 3:1 en texto >=24px y en componentes. */
--naranja: #E1853A; /* MARCA. Relleno decorativo grande, y texto o
icono SOLO sobre --verde-profundo (4,41:1). */
--naranja-medio: #D2761F; /* bordes y trazos sobre claro: 3,22:1 sobre el
fondo de página. Supera el 3:1 de componente
pero NO vale como texto. */
--naranja-fuerte: #B0590F; /* relleno de botón. Blanco encima: 4,90:1 AA. */
--naranja-oscuro: #8F4509; /* hover del botón. Blanco encima: 6,95:1. */
--naranja-texto: #A85410; /* naranja como TEXTO o icono pequeño sobre
fondo claro: 5,19:1 página · 5,33:1 blanco ·
4,56:1 sobre el fondo alterno. AA en los 3. */
--naranja-claro: #f0a869; /* naranja como texto pequeño sobre fondo
oscuro: 6,08:1 sobre --verde-profundo. */
--naranja-tenue: #fdf0e0; /* fondo de pastilla y de caja de icono.
--naranja-texto encima da 4,75:1. */
/* --- Tipografía ------------------------------------------------------- */
--fuente: "DM Sans Variable", "DM Sans", -apple-system, BlinkMacSystemFont,
"Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--t-xs: .8125rem; /* 13px letra chica */
--t-sm: .9375rem; /* 15px apoyo */
--t-base: clamp(1.0625rem, .98rem + .35vw, 1.1875rem); /* 17 -> 19px */
--t-lead: clamp(1.1875rem, 1.05rem + .6vw, 1.4375rem); /* 19 -> 23px */
--t-h3: clamp(1.125rem, 1.05rem + .3vw, 1.3125rem);
--t-h2: clamp(1.75rem, 1.35rem + 1.7vw, 2.625rem);
--t-h1: clamp(2.1875rem, 1.6rem + 2.6vw, 3.5rem);
--t-cifra: clamp(2.5rem, 1.9rem + 2.6vw, 3.75rem);
/* --- Espaciado -------------------------------------------------------- */
--e1: .25rem; --e2: .5rem; --e3: .75rem; --e4: 1rem;
--e5: 1.5rem; --e6: 2rem; --e7: 3rem; --e8: 4rem;
--seccion-y: clamp(3.75rem, 2rem + 6.5vw, 7rem);
/* --- Medidas ---------------------------------------------------------- */
--ancho: 1140px;
--ancho-texto: 64ch;
--radio: 16px;
--radio-sm: 10px;
--radio-lg: 24px;
--borde-fino: 1px solid var(--borde);
/* --- Sombras: en verde, nunca en gris neutro -------------------------- */
--sombra-sutil: 0 1px 2px rgba(35, 59, 41, .05);
--sombra-media: 0 10px 30px -8px rgba(35, 59, 41, .13);
--sombra-alta: 0 24px 48px -16px rgba(35, 59, 41, .22);
--sombra-naranja: 0 10px 24px -8px rgba(176, 89, 15, .35);
}
/* CONTRASTE MEDIDO, no supuesto. Sobre el fondo de página #fafdf8:
#233b29 texto principal .... 11,84:1 AAA
#34583E verde marca ........ 7,84:1 AAA
#A85410 naranja texto ...... 5,19:1 AA
#4f7a5d verde acción ....... 4,79:1 AA
#5d7c66 texto suave ........ 4,51:1 al límite -> solo en texto grande
Sobre el fondo alterno #e8f0e0 esos mismos bajan: #5d7c66 da 3,96:1 y
#4f7a5d da 4,20:1, los dos por debajo de AA. Por eso hay un bloque de
reglas que, dentro de .seccion--alterna, sube el texto secundario a
--verde-marca (6,88:1). El naranja de texto aguanta ahí: 4,56:1.
Sobre el fondo oscuro #233b29: blanco 12,15:1 · #d0dfd2 8,77:1 ·
#f0a869 6,08:1 · #9FBF88 5,95:1 · #E1853A 4,41:1 (>=24px e iconos). */
/* ==========================================================================
3. BASE
========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
scroll-padding-top: 5.5rem; /* para que el ancla no quede bajo la barra */
}
body {
margin: 0;
background: var(--fondo);
color: var(--texto);
font-family: var(--fuente);
font-size: var(--t-base);
line-height: 1.65;
font-synthesis-weight: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
overflow-x: hidden; /* ningún adorno decorativo empuja la página */
}
h1, h2, h3, h4 {
margin: 0 0 var(--e4);
line-height: 1.14;
letter-spacing: -.022em;
font-weight: 700;
text-wrap: balance;
color: var(--verde-marca);
}
h1 {
font-size: var(--t-h1); font-weight: 800;
letter-spacing: -.035em; line-height: 1.06;
color: var(--verde-profundo);
}
h2 { font-size: var(--t-h2); font-weight: 800; letter-spacing: -.028em; color: var(--verde-profundo); }
h3 { font-size: var(--t-h3); letter-spacing: -.012em; }
h4 { font-size: 1.0625rem; }
p { margin: 0 0 var(--e4); max-width: var(--ancho-texto); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
a { color: var(--verde-marca); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--naranja-texto); }
strong, b { font-weight: 700; }
small { font-size: var(--t-sm); }
img, svg, video { max-width: 100%; height: auto; display: block; }
ul, ol { margin: 0 0 var(--e4); padding-left: 1.25rem; max-width: var(--ancho-texto); }
li { margin: var(--e2) 0; }
li::marker { color: var(--naranja-texto); }
hr { border: 0; border-top: var(--borde-fino); margin: var(--e6) 0; }
::selection { background: var(--naranja-tenue); color: var(--verde-profundo); }
/* ==========================================================================
4. ACCESIBILIDAD
========================================================================== */
/* Foco visible siempre, en teclado, sin excepciones. */
:focus-visible {
outline: 3px solid var(--naranja-fuerte);
outline-offset: 2px;
border-radius: 4px;
}
.seccion--oscura :focus-visible,
.pie :focus-visible { outline-color: var(--naranja-claro); }
/* Enlace de salto al contenido: invisible hasta que se le da foco. */
.salto {
position: absolute; left: var(--e4); top: var(--e4); z-index: 100;
transform: translateY(-200%);
background: var(--verde-profundo); color: var(--blanco);
padding: var(--e3) var(--e5); border-radius: var(--radio-sm);
text-decoration: none; font-weight: 600;
}
.salto:focus { transform: translateY(0); color: var(--blanco); }
.solo-lectores {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: .001ms !important;
animation-iteration-count: 1 !important;
transition-duration: .001ms !important;
}
.tarjeta:hover, .plan:hover, .telefono--inclinado { transform: none !important; }
}
/* ==========================================================================
5. ESTRUCTURA
========================================================================== */
.contenedor {
width: 100%; max-width: var(--ancho); margin-inline: auto;
padding-inline: clamp(1.25rem, 4vw, 2rem);
}
.contenedor--angosto { max-width: 820px; }
.seccion { padding-block: var(--seccion-y); position: relative; }
.seccion--alterna { background: var(--verde-suave); }
.seccion--blanca { background: var(--blanco); }
/* Las secciones oscuras van en --verde-profundo, no en --verde-marca:
sobre #34583E el naranja de marca da 2,92:1 y no llega ni al 3:1 de
componente. Sobre #233b29 da 4,41:1 y el acento se puede usar de verdad. */
.seccion--oscura { background: var(--verde-profundo); color: #d7e4d5; }
.seccion--oscura h1,
.seccion--oscura h2,
.seccion--oscura h3,
.seccion--oscura h4,
.seccion--oscura strong { color: var(--blanco); }
.seccion--oscura a { color: var(--naranja-claro); }
.seccion--oscura a:hover { color: var(--blanco); }
.seccion--ajustada { padding-block: clamp(2.75rem, 1.5rem + 4vw, 4.5rem); }
/* Encabezado de sección: rótulo + título + entradilla */
.cabecera-seccion { max-width: var(--ancho-texto); margin-bottom: var(--e7); }
.cabecera-seccion--centro { margin-inline: auto; text-align: center; }
/* --- El rótulo: la pastilla naranja que abre cada sección ----------------
Es el elemento que más se repite en el sitio y el que más trabajo hace
por la presencia del naranja. Contraste: #A85410 sobre #fdf0e0 = 4,75:1. */
.rotulo {
display: inline-flex; align-items: center; gap: .45em;
margin: 0 0 var(--e4);
padding: .34rem .8rem;
background: var(--naranja-tenue); color: var(--naranja-texto);
border-radius: 999px;
font-size: var(--t-xs); font-weight: 700;
letter-spacing: .07em; text-transform: uppercase;
}
.rotulo::before {
content: ""; width: 6px; height: 6px; border-radius: 50%;
background: var(--naranja-fuerte); flex: none;
}
/* Sobre el fondo alterno la pastilla lleva borde para no flotar. */
.seccion--alterna .rotulo { background: var(--blanco); border: 1px solid #f0d9bd; }
/* Sobre oscuro: fondo translúcido y naranja claro, 6,08:1. */
.seccion--oscura .rotulo {
background: rgba(225, 133, 58, .16); color: var(--naranja-claro);
}
.seccion--oscura .rotulo::before { background: var(--naranja); }
.entradilla {
font-size: var(--t-lead); line-height: 1.5;
color: var(--texto-suave);
max-width: 58ch;
}
.seccion--oscura .entradilla { color: #d7e4d5; }
.letra-chica { font-size: var(--t-sm); color: var(--verde-accion); }
.seccion--oscura .letra-chica { color: #c3d5c6; }
/* --- Contraste sobre el fondo alterno --verde-suave (#e8f0e0) -------------
MEDIDO: sobre #e8f0e0 el texto secundario #5d7c66 da 3,96:1 y el verde de
acción #4f7a5d da 4,20:1. AA exige 4,5:1 y .entradilla llega a 23px, por
debajo del umbral de 24px que la norma considera texto grande. Sobre ese
fondo el texto secundario sube a --verde-marca: 6,88:1. */
.seccion--alterna .entradilla,
.seccion--alterna .letra-chica,
.seccion--alterna .nota-precios,
.seccion--alterna .plan__periodo,
.seccion--alterna .tira-telefonos figcaption,
.seccion--alterna .legal .fecha,
.seccion--alterna .indice h2 { color: var(--verde-marca); }
/* Regla decorativa de sección: tres trazos, el del medio naranja. */
.filete { display: flex; gap: 6px; margin: 0 0 var(--e5); }
.filete::before, .filete::after {
content: ""; height: 4px; width: 22px; border-radius: 2px;
background: var(--verde-sage);
}
.filete::before { background: var(--naranja); width: 34px; }
.cabecera-seccion--centro .filete { justify-content: center; }
/* ==========================================================================
5b. ENCABEZADO PRINCIPAL (hero)
--------------------------------------------------------------------------
El momento de más fuerza visual del sitio: escala tipográfica grande, el
producto a la vista y un campo cálido detrás. Sin animación de entrada.
========================================================================== */
.hero {
position: relative; overflow: hidden;
padding-block: clamp(2.75rem, 1.5rem + 5vw, 5.5rem) clamp(3rem, 2rem + 5vw, 6rem);
background:
radial-gradient(58rem 34rem at 82% 12%, rgba(225, 133, 58, .13), transparent 62%),
radial-gradient(48rem 30rem at 8% 96%, rgba(159, 191, 136, .22), transparent 60%);
}
.hero__interior {
display: grid; gap: clamp(2.5rem, 5vw, 4rem);
grid-template-columns: 1fr; align-items: center;
}
@media (min-width: 900px) {
.hero__interior { grid-template-columns: 1.18fr .82fr; }
}
.hero h1 { margin-bottom: var(--e5); max-width: 19ch; }
.hero .entradilla { margin-bottom: var(--e6); }
/* El realce del titular: un trazo naranja por debajo de la línea de base.
Va pintado como fondo, no como pseudoelemento posicionado, para que se
corte y se repita bien cuando el titular pasa de línea. Un ::after con
position:absolute obligaba a white-space:nowrap y desbordaba la columna.
Es decoración: no lleva texto encima, así que no necesita contraste. */
.realce {
background-image: linear-gradient(to top,
rgba(225, 133, 58, .42) 0, rgba(225, 133, 58, .42) .22em, transparent .22em);
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
padding-inline: .05em;
}
.hero__figura { position: relative; display: flex; justify-content: center; }
.hero__figura::before {
content: ""; position: absolute; z-index: 0;
left: 50%; transform: translateX(-50%);
top: 9%; bottom: -4%;
width: min(340px, 90%);
background: var(--verde-suave);
border-radius: 30px;
}
.hero__figura .telefono { position: relative; z-index: 1; }
/* Sobre el fondo oscuro el panel de detras se veia como una losa desalineada
respecto del telefono inclinado, y el marco del telefono, que es del mismo
--verde-profundo que la seccion, desaparecia. Ahi no hay panel y el marco
sube a --verde-marca con un filo claro que lo recorta contra el fondo. */
.seccion--oscura .hero__figura::before { content: none; }
.seccion--oscura .telefono {
background: var(--verde-marca);
box-shadow: 0 0 0 1px rgba(255, 255, 255, .16), 0 24px 48px -16px rgba(0, 0, 0, .5);
}
.seccion--oscura .telefono__hueco { background: #eef4e8; }
/* ==========================================================================
5c. FRANJA DE CONFIANZA
--------------------------------------------------------------------------
Cuatro datos verificables justo debajo del encabezado. Es lo primero que
busca un verificador de D&B o de Google, y de paso da peso visual al
arranque de la página. Todo lo que sale aquí es comprobable en un
registro público: nada de cifras de clientes ni de logos inventados.
========================================================================== */
.franja {
border-block: var(--borde-fino);
background: var(--blanco);
}
.franja__lista {
list-style: none; margin: 0; padding-block: var(--e5); max-width: none;
display: grid; gap: var(--e5) var(--e4);
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.franja__lista li {
margin: 0; display: grid; grid-template-columns: auto 1fr; gap: var(--e4);
align-items: center;
padding-left: var(--e5); border-left: 1px solid var(--borde);
}
.franja__lista li:first-child { padding-left: 0; border-left: 0; }
.franja__lista .icono {
box-sizing: content-box;
width: 20px; height: 20px; padding: 9px; border-radius: 10px;
background: var(--naranja-tenue); color: var(--naranja-texto);
}
.franja__lista strong {
display: block; font-size: var(--t-sm); line-height: 1.35;
color: var(--verde-profundo);
}
.franja__lista span { font-size: var(--t-xs); line-height: 1.4; color: var(--verde-accion); }
/* Cuando la rejilla se parte en varias filas, la raya de la izquierda del
primer elemento de cada fila sobra. No hay forma de saber dónde parte, así
que por debajo de dos columnas se quitan todas. */
@media (max-width: 1080px) {
.franja__lista li { padding-left: 0; border-left: 0; }
}
/* ==========================================================================
6. BOTONES
--------------------------------------------------------------------------
Desde el 2026-08-20 el botón principal es NARANJA. Se usa el tono
--naranja-fuerte #B0590F, no el de marca: con blanco encima da 4,90:1 y
pasa AA. El de marca #E1853A daría 2,76:1 y sería ilegible.
El verde queda para la acción secundaria y para la navegación.
========================================================================== */
.boton {
display: inline-flex; align-items: center; justify-content: center; gap: var(--e2);
padding: .9rem 1.85rem;
border: 2px solid transparent; border-radius: var(--radio-sm);
font: inherit; font-weight: 700; line-height: 1.2;
text-decoration: none; text-align: center; cursor: pointer;
transition: background-color .18s ease, border-color .18s ease,
color .18s ease, transform .18s ease, box-shadow .18s ease;
}
/* Principal — el naranja de acción */
.boton--principal {
background: var(--naranja-fuerte); color: var(--blanco);
box-shadow: var(--sombra-naranja);
}
.boton--principal:hover {
background: var(--naranja-oscuro); color: var(--blanco);
transform: translateY(-2px);
box-shadow: 0 14px 28px -10px rgba(143, 69, 9, .45);
}
/* Secundario — verde en contorno */
.boton--contorno {
background: transparent; color: var(--verde-marca); border-color: var(--verde-accion);
}
.boton--contorno:hover {
background: var(--verde-suave); color: var(--verde-marca);
border-color: var(--verde-marca);
}
/* Sobre fondo oscuro. El naranja de acción sobre #233b29 da 1,64:1 contra el
fondo: no se separaría. Ahí el principal va en el naranja de marca, que da
4,41:1 contra el fondo, con texto verde profundo encima (4,41:1 también). */
.seccion--oscura .boton--principal,
.pie .boton--principal {
background: var(--naranja); color: var(--verde-profundo); box-shadow: none;
}
.seccion--oscura .boton--principal:hover,
.pie .boton--principal:hover { background: #eda15c; color: var(--verde-profundo); }
.seccion--oscura .boton--contorno { color: var(--blanco); border-color: rgba(255, 255, 255, .38); }
.seccion--oscura .boton--contorno:hover {
background: rgba(255, 255, 255, .1); color: var(--blanco); border-color: var(--blanco);
}
.boton--ancho { width: 100%; }
/* Versión reducida, para la barra superior.
El min-height garantiza el mínimo táctil de 44 px pase lo que pase con el
tamaño de letra: calcularlo solo con el relleno se quedaba en 42,4 px en el
celular, donde la navegación baja la fuente a 14 px. */
.boton--compacto {
padding: .7rem 1.15rem;
min-height: 44px;
font-size: var(--t-sm);
border-radius: 8px;
border-width: 2px;
}
.grupo-botones { display: flex; flex-wrap: wrap; gap: var(--e3) var(--e4); align-items: center; }
/* ==========================================================================
7. TARJETAS Y REJILLAS
========================================================================== */
.tarjeta {
position: relative; overflow: hidden;
background: var(--blanco);
border: var(--borde-fino); border-radius: var(--radio);
padding: var(--e5);
box-shadow: var(--sombra-sutil);
transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
/* El halo naranja de la esquina: decorativo puro, detrás del contenido. */
.tarjeta::after {
content: ""; position: absolute; inset: auto -40px -40px auto;
width: 130px; height: 130px; border-radius: 50%;
background: radial-gradient(circle, rgba(225, 133, 58, .12), transparent 68%);
opacity: 0; transition: opacity .25s ease; pointer-events: none;
}
.tarjeta:hover {
transform: translateY(-3px);
border-color: var(--naranja-medio);
box-shadow: var(--sombra-media);
}
.tarjeta:hover::after { opacity: 1; }
.tarjeta > * { position: relative; z-index: 1; }
/* Columna flexible para que, cuando la tarjeta lleva botón, quede pegado al
fondo y los botones de las cuatro tarjetas se alineen entre sí. */
.tarjeta { display: flex; flex-direction: column; align-items: flex-start; }
.tarjeta > .boton { margin-top: auto; }
.tarjeta h2, .tarjeta h3 { margin-bottom: var(--e2); font-size: var(--t-h3); }
.tarjeta p { margin: 0; font-size: var(--t-sm); line-height: 1.6; }
/* Un correo largo no cabe en una tarjeta estrecha: se parte antes que
desbordar. Afecta solo a enlaces y direcciones, no al texto corrido. */
.tarjeta a, .tarjeta address { overflow-wrap: anywhere; }
.seccion--alterna .tarjeta { border-color: #dbe6d0; }
.rejilla { display: grid; gap: var(--e4); }
.rejilla--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.rejilla--3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.rejilla--4 { grid-template-columns: repeat(auto-fit, minmax(238px, 1fr)); }
/* ==========================================================================
8. ICONOS — SVG en línea, de trazo. Ni emojis ni librería.
========================================================================== */
.icono {
width: 26px; height: 26px; flex: none;
fill: none; stroke: currentColor;
stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}
.icono--sm { width: 20px; height: 20px; }
/* Los logotipos de terceros (WhatsApp) son macizos, no de trazo. */
.icono--relleno { fill: currentColor; stroke: none; }
.icono--lg { width: 32px; height: 32px; stroke-width: 1.4; }
/* La caja de icono es naranja: #A85410 sobre #fdf0e0 da 4,75:1. */
.caja-icono {
display: inline-flex; align-items: center; justify-content: center;
width: 54px; height: 54px; margin-bottom: var(--e4);
border-radius: 14px;
background: var(--naranja-tenue); color: var(--naranja-texto);
transition: background-color .2s ease, color .2s ease;
}
.tarjeta:hover .caja-icono { background: var(--naranja-fuerte); color: var(--blanco); }
.seccion--alterna .caja-icono { background: var(--naranja-tenue); }
.seccion--oscura .caja-icono {
background: rgba(225, 133, 58, .18); color: var(--naranja-claro);
}
/* ==========================================================================
9. LISTA DE DATOS (identidad legal, contacto)
--------------------------------------------------------------------------
Texto seleccionable, nunca una imagen: los verificadores necesitan leerlo.
========================================================================== */
.datos { margin: 0; padding: 0; max-width: 660px; }
.datos div {
display: grid; grid-template-columns: minmax(9rem, 13rem) 1fr;
gap: var(--e2) var(--e4);
padding: var(--e3) 0; border-bottom: var(--borde-fino);
}
.datos div:first-child { border-top: var(--borde-fino); }
.datos dt { font-weight: 700; color: var(--verde-marca); font-size: var(--t-sm); }
.datos dd { margin: 0; }
@media (max-width: 560px) {
.datos div { grid-template-columns: 1fr; gap: 2px; padding: var(--e4) 0; }
}
/* ==========================================================================
10. MARCADORES PENDIENTES {{...}}
--------------------------------------------------------------------------
Amarillo a propósito: tienen que doler a la vista hasta reemplazarlos.
========================================================================== */
.pendiente {
background: #fff3cd; color: #6b4e00;
border: 1px dashed #c99a00; border-radius: 4px;
padding: 0 .35em; font-size: .92em; font-weight: 600;
font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
}
.seccion--oscura .pendiente, .pie .pendiente {
background: rgba(255, 255, 255, .12); color: #ffe08a; border-color: #ffe08a;
}
.aviso-borrador {
background: #fff8ec; border: 1px solid #d9a441;
border-left: 5px solid var(--naranja-fuerte);
border-radius: var(--radio-sm);
padding: var(--e4) var(--e5); margin-bottom: var(--e6);
color: #4d3406; font-size: var(--t-sm); max-width: var(--ancho-texto);
}
.aviso-borrador strong { color: #3d2905; }
.aviso-borrador p { max-width: none; }
/* ==========================================================================
11. MARCO DE TELÉFONO para las capturas de la aplicación
--------------------------------------------------------------------------
★ LISTO PARA ACOPLAR. Cuando lleguen las capturas reales, dentro de
.telefono__pantalla se sustituye el contenido por:
La imagen se recorta sola (object-fit: cover) y no hay que tocar el CSS.
========================================================================== */
.telefono {
position: relative;
width: 100%; max-width: 272px; margin-inline: auto;
/* El ratio es el de las capturas reales (578 × 1142 tras quitarles las barras
de Android), no el de un teléfono genérico. Antes era 9/19.5, y con ese valor
el object-fit: cover recortaba 25 px por cada lado de la captura, comiéndose el
borde de las tarjetas. Se ajusta el marco a la imagen, no al revés. */
aspect-ratio: 578 / 1142;
background: var(--verde-profundo);
border-radius: 36px;
padding: 9px;
box-shadow: var(--sombra-alta);
}
/* El altavoz: un detalle que convierte el rectángulo en un teléfono. */
.telefono::before {
content: ""; position: absolute; z-index: 2;
top: 17px; left: 50%; transform: translateX(-50%);
width: 62px; height: 5px; border-radius: 3px;
background: rgba(255, 255, 255, .22);
}
.telefono--inclinado { transform: rotate(-1.6deg); }
.telefono--inclinado-der { transform: rotate(1.6deg); }
.telefono__pantalla {
width: 100%; height: 100%;
border-radius: 28px; overflow: hidden;
background: var(--blanco);
display: flex; align-items: center; justify-content: center;
}
.telefono__pantalla img,
.telefono__pantalla svg { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
/* Hueco visible mientras no exista la captura real.
Se dibuja como un CONTENEDOR DE IMAGEN a la espera, con su marco de trazos
y su etiqueta: así se lee como una pieza reservada a propósito y no como
una página a medio hacer. */
.telefono__hueco {
position: relative;
width: 100%; height: 100%;
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: var(--e3); padding: var(--e5); text-align: center;
background: var(--verde-suave); color: var(--verde-marca);
font-size: var(--t-xs); line-height: 1.5;
}
.telefono__hueco::before {
content: ""; position: absolute; inset: 11px;
border: 2px dashed var(--verde-sage); border-radius: 20px;
}
.telefono__hueco > * { position: relative; }
.telefono__hueco span {
font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
font-size: 11px;
background: var(--naranja-tenue); color: var(--naranja-texto);
padding: .3rem .7rem; border-radius: 999px;
}
.telefono__hueco em { font-style: normal; color: var(--verde-accion); font-size: 11px; }
.par-telefonos {
display: flex; gap: var(--e5); justify-content: center; align-items: flex-start;
flex-wrap: wrap;
}
.par-telefonos .telefono { max-width: 240px; }
/* ==========================================================================
11b. BLOQUE A DOS COLUMNAS (texto + teléfono)
========================================================================== */
.bloque-doble {
display: grid; gap: clamp(2.5rem, 5vw, 4.5rem);
grid-template-columns: 1fr; align-items: center;
}
@media (min-width: 900px) {
.bloque-doble { grid-template-columns: 1.05fr .95fr; }
}
/* Lista de puntos con icono al costado. Sin viñetas. */
.lista-puntos {
list-style: none; padding: 0; margin: var(--e6) 0 0; max-width: none;
display: grid; gap: var(--e5);
}
.lista-puntos li {
display: grid; grid-template-columns: auto 1fr; gap: var(--e4);
margin: 0; align-items: start;
}
.lista-puntos h3 { margin: 0 0 2px; font-size: var(--t-base); }
.lista-puntos p { margin: 0; font-size: var(--t-sm); max-width: 46ch; }
/* El icono va dentro de un disco naranja: es el acento que rompe el verde
de la sección oscura. #E1853A sobre #233b29 da 4,41:1, suficiente para un
componente y para un icono. */
.lista-puntos .icono {
box-sizing: content-box; flex: none;
width: 22px; height: 22px; padding: 9px; border-radius: 50%;
background: var(--naranja-tenue); color: var(--naranja-texto);
}
.seccion--oscura .lista-puntos .icono {
background: var(--naranja); color: var(--verde-profundo);
}
.seccion--oscura .lista-puntos p { color: #d0dfd2; }
/* Pasos numerados, unidos por una línea */
.pasos {
position: relative;
list-style: none; padding: 0; margin: 0; max-width: none;
display: grid; gap: var(--e6);
grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
}
.pasos li { position: relative; margin: 0; }
.paso__numero {
position: relative; z-index: 1;
display: inline-flex; align-items: center; justify-content: center;
width: 52px; height: 52px; margin-bottom: var(--e4);
border-radius: 50%;
background: var(--naranja-fuerte); color: var(--blanco);
font-weight: 800; font-size: 1.25rem;
box-shadow: var(--sombra-naranja);
}
/* La línea que une un paso con el siguiente. Decorativa: se corta en el
último y desaparece cuando la rejilla se apila en el celular.
Va en el , no en el número, y SIN z-index negativo: la sección es
position:relative, así que un -1 la mandaba detrás del fondo de la sección
y la línea no se veía. El número se pone por encima con z-index 1. */
@media (min-width: 780px) {
.pasos li:not(:last-child)::after {
content: ""; position: absolute;
top: 25px; left: 60px; right: calc(var(--e6) * -1 - 8px);
height: 2px; border-radius: 2px; background: var(--verde-sage);
}
}
.pasos h3 { margin-bottom: var(--e2); }
.pasos p { font-size: var(--t-sm); max-width: 42ch; }
.seccion--oscura .paso__numero { background: var(--naranja); color: var(--verde-profundo); box-shadow: none; }
.seccion--oscura .pasos li:not(:last-child)::after { background: rgba(255, 255, 255, .2); }
.seccion--oscura .pasos p { color: #d0dfd2; }
/* ==========================================================================
11c. TIRA DE CAPTURAS
--------------------------------------------------------------------------
En pantalla ancha, tres teléfonos en fila. En el celular se convierte en
una tira que se arrastra con el dedo: tres teléfonos apilados serían dos
mil píxeles de scroll.
========================================================================== */
.tira-telefonos {
display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--e5); margin-top: var(--e7);
}
.tira-telefonos figure { margin: 0; }
.tira-telefonos figcaption {
margin-top: var(--e4); text-align: center;
font-size: var(--t-sm); color: var(--verde-accion);
}
.tira-telefonos figcaption strong { display: block; color: var(--verde-marca); }
@media (max-width: 760px) {
.tira-telefonos {
display: flex; gap: var(--e4);
overflow-x: auto; scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
padding-bottom: var(--e4);
/* se sale hasta el borde de la pantalla, sin desbordar la página */
margin-inline: calc(clamp(1.25rem, 4vw, 2rem) * -1);
padding-inline: clamp(1.25rem, 4vw, 2rem);
}
.tira-telefonos figure { flex: 0 0 68%; scroll-snap-align: center; }
.telefono--inclinado, .telefono--inclinado-der { transform: none; }
}
/* ==========================================================================
12. PLANES Y PRECIOS
========================================================================== */
.planes {
display: grid; gap: var(--e5);
grid-template-columns: repeat(auto-fit, minmax(266px, 1fr));
align-items: stretch; margin-bottom: var(--e5);
}
.plan {
position: relative;
background: var(--blanco);
border: var(--borde-fino); border-radius: var(--radio-lg);
padding: var(--e6) var(--e5) var(--e5);
display: flex; flex-direction: column; gap: var(--e3);
box-shadow: var(--sombra-sutil);
transition: transform .2s ease, box-shadow .2s ease;
}
.plan:hover { transform: translateY(-4px); box-shadow: var(--sombra-media); }
.plan--destacado {
border: 2px solid var(--naranja-fuerte);
box-shadow: var(--sombra-naranja);
}
/* La etiqueta va FUERA del flujo y montada sobre el borde superior: así los
tres precios quedan a la misma altura en las tres tarjetas. */
.plan__etiqueta {
position: absolute; top: -.85rem; left: 50%; transform: translateX(-50%);
white-space: nowrap;
background: var(--naranja-fuerte); color: var(--blanco);
font-size: var(--t-xs); font-weight: 700; letter-spacing: .05em;
text-transform: uppercase;
padding: .35rem 1rem; border-radius: 999px;
box-shadow: var(--sombra-naranja);
}
.plan__nombre {
font-size: var(--t-xs); font-weight: 800; letter-spacing: .1em;
text-transform: uppercase; color: var(--verde-accion); margin: 0;
}
.plan--destacado .plan__nombre { color: var(--naranja-texto); }
/* El precio: la moneda y los céntimos en pequeño, la cifra enorme. */
.plan__precio {
display: flex; align-items: baseline; gap: .12em;
color: var(--verde-profundo); margin: 0;
line-height: 1;
}
.plan__moneda { font-size: 1.25rem; font-weight: 700; }
.plan__monto {
font-size: var(--t-cifra); font-weight: 800; letter-spacing: -.04em;
}
.plan__centavos { font-size: 1.1rem; font-weight: 700; color: var(--verde-accion); }
.plan__periodo { font-size: var(--t-sm); color: var(--naranja-texto); font-weight: 700; margin: 0; }
.plan__equivalente { font-size: var(--t-sm); color: var(--texto); margin: 0; }
.plan__dispositivos {
margin: 0; padding-top: var(--e4); border-top: var(--borde-fino);
font-size: var(--t-sm);
}
.plan__dispositivos strong { display: block; color: var(--verde-marca); font-size: var(--t-base); }
.plan .boton { margin-top: auto; }
.nota-precios {
font-size: var(--t-sm); color: var(--verde-accion);
max-width: var(--ancho-texto); margin: 0;
}
.nota-precios strong { color: var(--naranja-texto); }
/* ==========================================================================
13. PREGUNTAS FRECUENTES — nativo, sin JavaScript
========================================================================== */
.faq { max-width: 820px; }
.faq details {
background: var(--blanco);
border: var(--borde-fino); border-radius: var(--radio-sm);
margin-bottom: var(--e3);
transition: border-color .2s ease;
}
.faq details:hover { border-color: var(--naranja-medio); }
.faq details[open] { border-color: var(--naranja-medio); }
.faq summary {
display: flex; align-items: center; justify-content: space-between; gap: var(--e4);
padding: var(--e4) var(--e5); cursor: pointer; list-style: none;
font-weight: 700; color: var(--verde-profundo); font-size: var(--t-h3);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
content: ""; flex: none; width: 12px; height: 12px;
border-right: 2.5px solid var(--naranja-texto);
border-bottom: 2.5px solid var(--naranja-texto);
transform: rotate(45deg) translate(-3px, -3px);
transition: transform .2s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg) translate(-3px, -3px); }
.faq details > *:not(summary) { padding: 0 var(--e5) var(--e5); }
.faq summary:hover { color: var(--naranja-texto); }
/* ==========================================================================
14. BARRA SUPERIOR
--------------------------------------------------------------------------
Cuatro enlaces, sin menú desplegable y sin JavaScript: caben en un
teléfono de 320 px y es lo más rápido posible.
========================================================================== */
.barra {
position: sticky; top: 0; z-index: 50;
background: var(--fondo); /* opaco a propósito: un backdrop-filter
en un elemento fijo cuesta caro al
hacer scroll en un Android modesto */
border-bottom: var(--borde-fino);
}
.barra__interior {
display: flex; align-items: center; justify-content: space-between;
gap: var(--e4); padding-block: var(--e3); flex-wrap: wrap;
}
/* --- La marca en la barra --------------------------------------------------
Es el LOGOTIPO de verdad, no el nombre escrito con la tipografía del sitio.
El wordmark es blanco con el trazo del «AR» en #9FBF88, así que solo funciona
sobre fondo oscuro: va sobre una placa en --verde-profundo, que es como se
presenta la marca. Así la barra usa exactamente los mismos dos colores del
logotipo, sin reinterpretarlos.
Alternativa preparada, por si algún día se prefiere sin placa: existe
assets/img/logo-carthen-verde.png, el mismo arte recoloreado para fondo claro
(letras en #34583E, trazo en #4f7a5d, porque el #9FBF88 sobre claro da
1,99:1). Cambiar el src y quitar el fondo de .marca; nada más. */
.marca {
display: inline-flex; align-items: center;
padding: .5rem .85rem;
background: var(--verde-profundo);
border-radius: 11px;
text-decoration: none;
transition: background-color .18s ease;
}
.marca img { width: auto; height: 23px; }
.marca:hover { background: var(--verde-marca); }
.navegacion { display: flex; align-items: center; gap: clamp(.75rem, 3vw, 1.6rem); flex-wrap: wrap; }
.navegacion a {
position: relative;
color: var(--verde-marca); text-decoration: none;
font-size: var(--t-sm); font-weight: 600; padding-block: var(--e1);
}
.navegacion a:hover { color: var(--naranja-texto); }
.navegacion a[aria-current="page"] { color: var(--verde-profundo); }
.navegacion a[aria-current="page"]::after {
content: ""; position: absolute; left: 0; right: 0; bottom: -2px;
height: 2px; border-radius: 2px; background: var(--naranja-fuerte);
}
/* «Iniciar sesión» es un botón, no un enlace de menú: los estilos de
.navegacion a son más específicos y le pisarían el relleno y el color. */
.navegacion .boton { color: var(--blanco); font-weight: 700; padding: .7rem 1.15rem; }
.navegacion .boton:hover { color: var(--blanco); text-decoration: none; }
.navegacion .boton::after { content: none; }
@media (max-width: 640px) {
.barra { position: static; }
.barra__interior { justify-content: center; gap: var(--e2); padding-block: var(--e3) var(--e2); }
.marca { padding: .45rem .7rem; }
.marca img { height: 18px; }
.navegacion { justify-content: center; gap: var(--e4); }
.navegacion a { font-size: .875rem; }
}
/* ==========================================================================
15. PIE DE PÁGINA
========================================================================== */
.pie {
background: var(--verde-profundo); color: #c3d5c6;
padding-block: var(--e8) var(--e6);
font-size: var(--t-sm); line-height: 1.7;
border-top: 4px solid var(--naranja-fuerte);
}
.pie a { color: #d0dfd2; text-decoration: none; }
.pie a:hover { color: var(--naranja-claro); text-decoration: underline; }
.pie__rejilla {
display: grid; gap: var(--e6);
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
padding-bottom: var(--e6);
border-bottom: 1px solid rgba(255, 255, 255, .14);
}
.pie__razon {
color: var(--blanco); font-weight: 700; font-size: var(--t-base);
margin: 0 0 var(--e2); letter-spacing: .01em;
}
.pie h2 {
color: var(--naranja-claro); font-size: var(--t-xs); font-weight: 700;
letter-spacing: .09em; text-transform: uppercase; margin: 0 0 var(--e3);
}
.pie ul { list-style: none; padding: 0; margin: 0; }
.pie li { margin: 0 0 var(--e2); }
.pie li::marker { color: transparent; }
.pie p { max-width: 38ch; margin: 0 0 var(--e2); }
.pie__cierre {
display: flex; flex-wrap: wrap; gap: var(--e3) var(--e5);
justify-content: space-between; align-items: center;
padding-top: var(--e5); font-size: var(--t-xs); color: #a9bfae;
}
/* ==========================================================================
15b. AVISO DEL LIBRO DE RECLAMACIONES
--------------------------------------------------------------------------
El artículo 9 del Reglamento (D.S. 011-2011-PCM, texto sustituido por el
D.S. 006-2014-PCM) exige a los proveedores virtuales «un aviso fácilmente
identificable en la página de inicio» con un vínculo al Libro, usando el
formato del ANEXO III —el Anexo II es el letrero del local físico y no
aplica aquí—. La norma solo pide que sea «legible y visible de acuerdo al
diseño de la página web de inicio»: no fija medidas en centímetros.
★ Este bloque es PROVISIONAL hasta que se descargue la imagen oficial del
Anexo III del INDECOPI. Ver PENDIENTES.md §4.9.
========================================================================== */
.aviso-libro {
display: flex; align-items: center; justify-content: center;
flex-wrap: wrap; gap: var(--e3) var(--e5);
margin: 0 auto; padding: var(--e4) var(--e5);
max-width: 720px;
border: 2px solid var(--verde-marca); border-radius: var(--radio-sm);
background: var(--blanco);
text-align: center;
}
.aviso-libro strong {
font-size: var(--t-base); color: var(--verde-profundo);
letter-spacing: .01em;
}
.aviso-libro span { font-size: var(--t-sm); color: var(--verde-accion); }
.franja--libro { background: var(--verde-suave); padding-block: var(--e5); }
/* ==========================================================================
16. UTILIDADES
========================================================================== */
.centro { text-align: center; }
.centro p, .centro .entradilla { margin-inline: auto; }
.centro .rotulo, .centro .filete { margin-inline: auto; }
.sin-margen { margin: 0; }
.mt-4 { margin-top: var(--e4); }
.mt-5 { margin-top: var(--e5); }
.mt-6 { margin-top: var(--e6); }
.mt-7 { margin-top: var(--e7); }
.ancho-texto { max-width: var(--ancho-texto); }
/* Naranja como texto suelto, en fondo claro. 5,19:1 sobre el fondo. */
.detalle-naranja { color: var(--naranja-texto); font-weight: 700; }
.seccion--oscura .detalle-naranja { color: var(--naranja-claro); }
/* ==========================================================================
16b. PÁGINAS LEGALES (privacidad, términos, eliminar cuenta)
--------------------------------------------------------------------------
Texto largo: columna estrecha, secciones separadas por una regla fina y un
índice arriba para poder saltar. Nada de tarjetas ni adornos.
========================================================================== */
.legal { max-width: 780px; }
.legal .fecha {
font-size: var(--t-sm); color: var(--verde-accion);
margin: 0 0 var(--e6);
}
.legal h2 {
font-size: clamp(1.25rem, 2.2vw, 1.5rem);
margin: var(--e8) 0 var(--e4);
padding-top: var(--e5); border-top: var(--borde-fino);
color: var(--verde-profundo);
}
/* El número de cláusula, en naranja, es lo que hace legible un documento
largo de un vistazo. Se aplica al del propio encabezado. */
.legal h2 .n {
display: inline-block; margin-right: .5rem;
color: var(--naranja-texto); font-weight: 800;
}
.legal h2:first-of-type { border-top: 0; padding-top: 0; margin-top: var(--e6); }
.legal h3 { font-size: var(--t-base); margin: var(--e5) 0 var(--e2); }
.legal p, .legal li, .legal ul, .legal ol { max-width: none; }
.legal li { margin: var(--e3) 0; }
.legal dl.datos { margin-block: var(--e4); }
/* Recuadro para lo que el lector tiene que ver sí o sí dentro del texto
legal: un derecho suyo, un plazo, una vía de reclamo. */
.destacado-legal {
background: var(--verde-suave);
border-left: 5px solid var(--naranja-fuerte);
border-radius: var(--radio-sm);
padding: var(--e4) var(--e5); margin: var(--e5) 0;
}
.destacado-legal p { max-width: none; }
.destacado-legal > :last-child { margin-bottom: 0; }
/* Índice de la página legal */
.indice {
background: var(--verde-suave);
border-radius: var(--radio); padding: var(--e5);
margin-bottom: var(--e6);
}
.indice h2 {
font-size: var(--t-xs) !important; font-weight: 700;
letter-spacing: .09em; text-transform: uppercase;
color: var(--naranja-texto);
margin: 0 0 var(--e3) !important; padding: 0 !important; border: 0 !important;
}
.indice ol {
margin: 0; padding-left: 1.2rem;
columns: 2; column-gap: var(--e6);
font-size: var(--t-sm);
}
.indice li { margin: .3rem 0; break-inside: avoid; }
.indice a { color: var(--verde-marca); }
.indice a:hover { color: var(--naranja-texto); }
@media (max-width: 620px) { .indice ol { columns: 1; } }
/* ==========================================================================
16c. FORMULARIO DEL LIBRO DE RECLAMACIONES
--------------------------------------------------------------------------
El único formulario del sitio. Existe porque el art. 4-B del Reglamento del
Libro de Reclamaciones obliga a que el consumidor pueda registrar su reclamo
EN la propia web, no solo leer cómo hacerlo. Lo recibe reclamo.php.
Es un formulario para un trámite legal, no para captar clientes: por eso va
sobrio, con etiquetas siempre visibles (nada de `placeholder` haciendo de
etiqueta, que desaparece al escribir y deja al usuario sin saber qué pedía
ese campo) y con los obligatorios marcados con un asterisco explicado.
Los campos táctiles miden 48 px de alto: el mínimo recomendado es 44, y el
comerciante peruano llega a esta página desde un Android modesto.
========================================================================== */
.formulario {
display: flex; flex-direction: column; gap: var(--e6);
max-width: var(--ancho-texto);
margin-top: var(--e6);
}
.formulario fieldset {
border: var(--borde-fino);
border-radius: var(--radio);
padding: var(--e5);
margin: 0;
background: var(--blanco);
}
.formulario legend {
padding-inline: var(--e3);
font-weight: 700;
color: var(--verde-marca);
font-size: var(--t-h3);
}
.campo { display: flex; flex-direction: column; gap: var(--e2); margin: 0 0 var(--e5); }
.campo:last-child { margin-bottom: 0; }
.campo label { font-weight: 600; color: var(--verde-profundo); font-size: var(--t-sm); }
.campo abbr {
color: var(--naranja-texto); /* 5,33:1 sobre blanco: legible, no decorativo */
text-decoration: none; font-weight: 700;
}
.ayuda { font-size: var(--t-xs); color: var(--verde-accion); }
.campo input, .campo select, .campo textarea {
font-family: inherit; font-size: var(--t-base); color: var(--texto);
background: var(--blanco);
border: 1px solid var(--verde-sage);
border-radius: var(--radio-sm);
padding: .7rem .85rem;
min-height: 48px;
width: 100%;
transition: border-color .15s ease, box-shadow .15s ease;
}
.campo textarea { min-height: auto; resize: vertical; line-height: 1.55; }
.campo input:hover, .campo select:hover, .campo textarea:hover { border-color: var(--naranja-medio); }
.campo input:focus-visible, .campo select:focus-visible, .campo textarea:focus-visible {
/* El contorno se deja TRANSPARENTE en vez de en `none`. En el modo de alto
contraste de Windows el navegador tira los box-shadow y repinta los
outline: con `none` el campo enfocado se quedaba sin ninguna marca. Así el
foco se ve siempre, con sombra o sin ella. */
outline: 2px solid transparent;
outline-offset: 2px;
border-color: var(--naranja-fuerte);
box-shadow: 0 0 0 3px var(--naranja-tenue);
}
/* El navegador marca en rojo lo inválido; aquí se le da el rojo de la marca,
no el del sistema, y solo DESPUÉS de que el usuario haya escrito algo. */
.campo input:user-invalid, .campo textarea:user-invalid { border-color: #b3261e; }
.campo-doble { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e4); }
@media (max-width: 560px) { .campo-doble { grid-template-columns: 1fr; } }
/* --- Reclamo o queja: dos tarjetas, no dos círculos sueltos --------------- */
.opciones { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e4); }
@media (max-width: 560px) { .opciones { grid-template-columns: 1fr; } }
.opcion {
display: flex; align-items: flex-start; gap: var(--e3);
padding: var(--e4);
border: 1px solid var(--verde-sage);
border-radius: var(--radio-sm);
cursor: pointer;
font-size: var(--t-sm);
transition: border-color .15s ease, background-color .15s ease;
}
.opcion:hover { border-color: var(--naranja-medio); background: var(--naranja-tenue); }
.opcion input { accent-color: var(--naranja-fuerte); margin-top: .2rem; flex: none; }
.opcion:has(input:checked) { border-color: var(--naranja-fuerte); background: var(--naranja-tenue); }
.opcion:has(input:focus-visible) { box-shadow: 0 0 0 3px var(--naranja-tenue); }
.opcion strong { color: var(--verde-profundo); }
/* --- Campo trampa para robots -------------------------------------------
No lleva `display:none` ni el atributo `hidden`: muchos robots saltan lo que
está marcado como oculto, y entonces la trampa no atrapa nada. Se saca de la
pantalla y se le quita del recorrido del teclado y del árbol de
accesibilidad, así que ningún lector de pantalla lo anuncia. */
.trampa {
position: absolute !important;
left: -9999px; top: auto;
width: 1px; height: 1px; overflow: hidden;
}
/* --- Aviso de tratamiento de datos, dentro del propio formulario ---------
Va aquí y no solo en la política porque el art. 18 de la Ley N.º 29733 pide
informar EN EL MOMENTO de recoger los datos. */
.aviso-datos {
background: var(--verde-suave);
border-left: 3px solid var(--verde-accion);
border-radius: var(--radio-sm);
padding: var(--e4) var(--e5);
}
.aviso-datos p { font-size: var(--t-sm); max-width: none; margin: 0; }
kbd {
font-family: inherit; font-size: .85em; font-weight: 600;
background: var(--verde-suave); border: var(--borde-fino);
border-radius: 5px; padding: .1rem .35rem;
}
/* ==========================================================================
17. IMPRESIÓN — que la ficha legal salga limpia en papel o PDF
========================================================================== */
@media print {
.barra, .salto, .telefono, .boton, .franja, .franja--libro { display: none !important; }
/* El formulario y los avisos de pantalla no pintan nada en papel; la HOJA
de reclamación sí, y es justo lo que el art. 4-B obliga a poder imprimir. */
.formulario, .aviso-datos, .no-imprimir, .indice { display: none !important; }
body { background: #fff; color: #000; font-size: 11pt; }
.seccion, .hero { padding-block: 1rem; background: #fff !important; }
.seccion--oscura, .pie { background: #fff !important; color: #000 !important; }
.seccion--oscura h2, .pie__razon, .pie h2 { color: #000 !important; }
.rotulo { background: none !important; color: #000 !important; padding: 0 !important; }
.legal h2 .n { color: #000 !important; }
a { color: #000; text-decoration: underline; }
a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}