/* landing.css — Landing chatgpt-ads (spec chatgpt-ads/001). Aspecto de la versión original (H31, plan.md §13):
   crema, tinta casi negra, naranja solo para la acción, titulares grandes con una frase en cursiva serif, botones en
   píldora y la demo como un chat oscuro. Contrastes medidos en spec CA31.2. */

/* Tipografías de la versión original (H31), alojadas en el dominio, subconjunto latino, OFL 1.1 (licencias junto a
   los woff2). Inter Tight variable 400-800 para todo; Instrument Serif solo en cursiva, para las frases destacadas. */
@font-face {
  font-family: 'Inter Tight';
  src: url('/chatgpt-ads/assets/fonts/inter-tight-latin-wght.woff2') format('woff2');
  font-weight: 400 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Instrument Serif';
  src: url('/chatgpt-ads/assets/fonts/instrument-serif-latin-italic.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
}

:root {
  /* Paleta (H31, contrastes en spec CA31.2). --borde y --linea NUNCA como color de texto (tests/chatgpt-ads-paleta) */
  --fondo: #F3EFE6;          /* crema: página y caja del formulario */
  --fondo-2: #EAE4D7;        /* píldoras y bloques secundarios */
  --tarjeta: #FFFFFF;        /* tarjetas, campos y opciones */
  --tinta: #0F0F12;          /* 16,68:1 sobre crema; bloques oscuros */
  --tinta-2: #2A2A30;        /* 12,43:1 sobre crema */
  --gris: #62616A;           /* notas: 5,32:1 sobre crema, 4,82:1 sobre --fondo-2 */
  --accion: #E32E00;         /* botón principal (blanco encima 4,51:1) y texto grande naranja sobre claro (3,93:1) */
  --accion-texto: #FFFFFF;
  --accion-oscuro: #FF4A1C;  /* naranja sobre fondos oscuros: 5,61:1 sobre el chat, 5,69:1 sobre tinta */
  --error: #B42318;          /* solo errores: 6,57:1 sobre tarjeta, 5,73:1 sobre crema */
  --borde: #8A7B5C;          /* borde de campos y opciones: 4,14:1 sobre tarjeta, 3,61:1 sobre crema */
  --linea: #DCD5C6;          /* separadores decorativos; nunca borde de un control */
  --chat: #111114;
  --chat-2: #1E1E24;
  --chat-3: #2A2A31;
  --chat-linea: #2C2C33;
  --lima: #C9F24D;           /* marcadores y foco sobre oscuro: 14,85:1 sobre tinta */
  --violeta: #5B3DF5;        /* foco sobre claro: 5,33:1 sobre crema */

  --letra: 'Inter Tight', system-ui, sans-serif;
  --serif: 'Instrument Serif', Georgia, serif;
  --ancho: 74rem;
  --radio: 18px;
  --sombra: 0 1px 0 rgb(0 0 0 / 0.04), 0 20px 50px -20px rgb(20 15 5 / 0.25);
  --ease: cubic-bezier(0.22, 1, 0.36, 1); /* salida exponencial */
}

*, *::before, *::after { box-sizing: border-box; }
/* hidden siempre oculta, aunque la clase del elemento fije display (botones, pasos, avisos) */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 5rem; }
body {
  margin: 0; background: var(--fondo); color: var(--tinta);
  font-family: var(--letra); font-size: 1.0625rem; line-height: 1.55; -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
::selection { background: var(--tinta); color: var(--fondo); }
:focus-visible { outline: 3px solid var(--violeta); outline-offset: 3px; border-radius: 4px; }

.contenedor { width: min(100% - 2rem, var(--ancho)); margin-inline: auto; }
.salto {
  position: absolute; left: 1rem; top: -4rem; z-index: 60; padding: 0.6rem 1rem;
  background: var(--tinta); color: var(--fondo); text-decoration: none;
}
.salto:focus { top: 1rem; }
.visualmente-oculto {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------- Tipografía ---------- */
h1, h2, h3 { margin: 0; line-height: 1.02; letter-spacing: -0.035em; font-weight: 700; text-wrap: balance; }
h1 { font-size: clamp(2.5rem, 5.2vw, 4.5rem); max-width: 14ch; }
/* Frase destacada: Instrument Serif cursiva, un poco más grande para igualar el ojo de Inter Tight */
.serif { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -0.01em; }
h1 .serif { color: var(--accion); font-size: 1.08em; }
/* Los H2 cambian de tratamiento según su papel (CA9.3): grande con cursiva, medio sin ella, rótulo en mayúsculas */
h2 { font-size: clamp(2.1rem, 4.6vw, 3.6rem); }
h2 .serif { color: var(--accion); }
h2.ancho { font-size: clamp(1.6rem, 2.8vw, 2.2rem); font-weight: 600; letter-spacing: -0.02em; }
h2.tabla { font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; line-height: 1.4; color: var(--tinta-2); }
h3 { font-size: 1.3rem; line-height: 1.2; letter-spacing: -0.02em; }
p { margin: 0; max-width: 65ch; }
.entrada { font-size: clamp(1.1rem, 1.6vw, 1.3rem); color: var(--tinta-2); max-width: 44ch; }
.nota { font-size: 0.875rem; color: var(--gris); }

/* ---------- Cabecera y pie ---------- */
.cabecera {
  position: sticky; top: 0; z-index: 50; border-bottom: 1px solid var(--linea);
  background: rgb(243 239 230 / 0.85); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px);
}
.cabecera .contenedor { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4.25rem; }
.marca { font-weight: 800; font-size: 1.3rem; letter-spacing: -0.04em; text-decoration: none; }
/* El punto del logo, en naranja (parte del logotipo; el nombre lo da aria-label) */
.marca .punto { color: var(--accion); }
.cabecera nav ul { display: flex; gap: 1.75rem; margin: 0; padding: 0; list-style: none; font-size: 0.95rem; font-weight: 500; }
.cabecera nav a { text-decoration: none; color: var(--tinta-2); }
.cabecera nav a:hover { color: var(--tinta); text-decoration: underline; }
.pie { background: var(--tinta); color: #9D9A93; padding-block: 2.5rem 3rem; font-size: 0.9rem; }
.pie .contenedor { display: grid; gap: 1rem; }
.pie ul { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin: 0; padding: 0; list-style: none; }
.pie a, .pie .boton-texto { color: var(--fondo); }
.pie :focus-visible { outline-color: var(--lima); }
.boton-texto { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 0.2em; }

/* ---------- Botones en píldora: una sola acción naranja por pantalla (CA9.1) ---------- */
.accion, .secundario {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; min-height: 3.25rem;
  padding: 0.9rem 1.6rem; border-radius: 999px; font: inherit; font-weight: 600; font-size: 1rem;
  text-decoration: none; cursor: pointer; transition: transform 200ms var(--ease), box-shadow 200ms var(--ease), background-color 200ms var(--ease), color 200ms var(--ease);
}
.accion {
  background: var(--accion); color: var(--accion-texto); border: 0;
  box-shadow: 0 10px 30px -10px rgb(227 46 0 / 0.7);
}
.accion:hover { transform: translateY(-2px); box-shadow: 0 16px 36px -12px rgb(227 46 0 / 0.8); }
.accion:active { transform: translateY(0); }
.accion[disabled] { opacity: 0.6; cursor: progress; transform: none; }
/* Secundario: contorno de tinta (16,68:1 sobre crema) */
.secundario { background: transparent; color: var(--tinta); border: 0; box-shadow: inset 0 0 0 1.5px var(--tinta); }
.secundario:hover { background: var(--tinta); color: var(--fondo); }
.riesgo { font-size: 0.9rem; color: var(--gris); }
.riesgo strong { color: var(--tinta); font-weight: 600; }

/* ---------- Hero: titular, dos botones y la demo como chat oscuro (CA31.4) ---------- */
.hero { padding-block: 3.5rem 6rem; }
.hero-rejilla { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 3.5rem; align-items: center; }
.hero h1 { margin-bottom: 1.4rem; max-width: none; text-wrap: wrap; }
.hero .entrada { margin-bottom: 2rem; }
.hero-acciones { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1.1rem; }

/* Demo (CA2): recreación de una conversación con el anuncio debajo. Mismo marcado de pestañas que antes (CA2.4) */
.demo {
  background: var(--chat); color: #EDEDF0; border-radius: 26px; overflow: hidden; min-width: 0;
  box-shadow: 0 40px 80px -30px rgb(15 15 18 / 0.55); transform: rotate(0.6deg);
  display: flex; flex-direction: column;
}
.demo-pestanas { display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0.9rem 1.1rem; border-bottom: 1px solid var(--chat-linea); }
.demo-pestanas [role='tab'] {
  font: inherit; font-size: 0.8rem; font-weight: 500; padding: 0.35rem 0.8rem; cursor: pointer; border-radius: 999px;
  background: transparent; color: #B9B9C2; border: 1px solid var(--chat-linea);
}
.demo-pestanas [role='tab']:hover { color: #EDEDF0; }
.demo-pestanas [role='tab'][aria-selected='true'] { background: #EDEDF0; color: var(--chat); border-color: #EDEDF0; }
.demo :focus-visible { outline-color: var(--lima); }
.demo-panel { padding: 1.4rem 1.25rem 1.5rem; display: grid; gap: 1rem; align-content: start; flex: 1; }
.demo-panel[hidden] { display: none; }
.burbuja { justify-self: end; max-width: 88%; background: var(--chat-3); border-radius: 18px 18px 4px 18px; padding: 0.75rem 1rem; font-size: 0.95rem; }
.respuesta { font-size: 0.92rem; color: #CFCFD6; line-height: 1.6; }
.respuesta ul { margin: 0.4rem 0 0; padding-left: 1.1rem; }
.anuncio {
  display: grid; grid-template-columns: 3.5rem 1fr; gap: 0.9rem; padding: 0.9rem; margin-top: 0.75rem;
  border: 2px solid var(--accion-oscuro); border-radius: 16px; background: var(--chat-2); position: relative;
}
.anuncio-marca {
  width: 3.5rem; height: 3.5rem; border-radius: 10px; display: grid; place-items: center; font-weight: 800; color: #FFFFFF;
  background: linear-gradient(135deg, var(--violeta), var(--accion-oscuro));
}
.anuncio-meta { display: flex; gap: 0.5rem; align-items: center; font-size: 0.75rem; color: #9A9AA3; }
.patrocinado { border: 1px solid #45454E; border-radius: 4px; padding: 0 0.35rem; font-size: 0.7rem; letter-spacing: 0.04em; color: #B5B5BE; }
.anuncio h3 { font-size: 0.98rem; color: #FFFFFF; margin: 0.2rem 0; letter-spacing: -0.01em; }
.anuncio p { font-size: 0.85rem; color: #B5B5BE; line-height: 1.45; }
/* La llamada: naranja del chat con texto tinta (5,69:1; el blanco daba 3,36:1, CA31.2) */
.anuncio-llamada {
  position: absolute; top: -0.95rem; right: 0.9rem; background: var(--accion-oscuro); color: var(--tinta);
  font-size: 0.78rem; font-weight: 700; padding: 0.3rem 0.7rem; border-radius: 10px; transform: rotate(-3deg);
  box-shadow: 0 12px 24px -10px rgb(255 74 28 / 0.7);
}
.demo-pie { padding: 0.7rem 1.25rem 0.9rem; border-top: 1px solid var(--chat-linea); color: #B9B9C2; font-size: 0.8rem; text-align: right; max-width: none; }

/* ---------- Secciones (plan.md §13.3) ---------- */
.seccion { padding-block: 6.5rem 0; }
.seccion > .contenedor > h2 { margin-bottom: 1.25rem; max-width: 20ch; }
.seccion .entrada { margin-bottom: 3rem; }

/* Bloque oscuro de «coste de esperar» */
.oscura { background: var(--tinta); color: var(--fondo); padding-block: 6.5rem; margin-top: 6.5rem; }
.oscura .entrada { color: #C4C1B8; }
.oscura :focus-visible { outline-color: var(--lima); }

/* Búsqueda frente a conversación (CA3): dos tarjetas, la conversación en oscuro */
.contraste { display: grid; grid-template-columns: 1fr 1.4fr; gap: 1.4rem; }
.contraste > div { background: var(--tarjeta); border: 1px solid var(--linea); border-radius: 22px; padding: 2rem; box-shadow: var(--sombra); }
.contraste > div + div { background: var(--chat); border-color: var(--chat); color: #EDEDF0; }
.contraste h3 { font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--gris); margin-bottom: 1.25rem; }
.contraste > div + div h3 { color: #B9B9C2; }
.consulta { font-size: 1.6rem; font-weight: 600; letter-spacing: -0.02em; border: 1.5px solid var(--linea); border-radius: 14px; padding: 0.8rem 1.2rem; display: inline-block; }
.recuento { margin-top: 1.25rem; font-size: 0.95rem; }
.recuento strong { font-size: 2.2rem; font-weight: 700; letter-spacing: -0.03em; display: block; line-height: 1.1; }
.contraste > div + div .recuento { color: #CFCFD6; }
.contraste > div + div .recuento strong { color: #FFFFFF; }
.conversacion { font-size: 1.25rem; line-height: 1.6; letter-spacing: -0.01em; }
/* Señal de intención: subrayado lima y etiqueta numerada, no solo color (CA3.2) */
mark.senal { background: none; color: inherit; text-decoration: underline; text-decoration-color: var(--lima); text-decoration-thickness: 3px; text-underline-offset: 0.3em; }
mark.senal sup { font-size: 0.65em; font-weight: 700; color: var(--tinta); background: var(--lima); border-radius: 4px; padding: 0 0.3em; margin-left: 0.15em; }
.senales { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1.25rem 0 0; padding: 0; list-style: none; font-size: 0.85rem; }
.senales li { border: 1px solid #3A3A42; border-radius: 999px; padding: 0.25rem 0.75rem; color: #D6D6DC; }

/* Coste de esperar: filas en tarjeta oscura */
.lista-plan { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.9rem; }
.lista-plan li { display: grid; grid-template-columns: minmax(10rem, 20rem) 1fr; gap: 1.5rem; padding: 1.4rem 1.5rem; border: 1px solid var(--chat-linea); border-radius: 16px; background: #1B1B20; }
.lista-plan h3 { font-size: 1.15rem; color: #FFFFFF; }
.lista-plan li p { color: #C4C1B8; }

/* Método: tres tarjetas; la de la prueba, en tinta */
.fases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.fase { background: var(--tarjeta); border: 1px solid var(--linea); border-radius: 22px; padding: 2rem; box-shadow: var(--sombra); }
.fase::before { content: ''; display: block; width: 3rem; height: 0.4rem; margin-bottom: 1.4rem; border-radius: 999px; background: var(--fondo-2); }
.fase.prueba { background: var(--tinta); color: var(--fondo); border-color: var(--tinta); }
.fase.prueba::before { background: var(--accion); }
.fase h3 { font-size: 1.6rem; margin-bottom: 0.6rem; }
.fase p { color: var(--gris); font-size: 0.97rem; }
.fase.prueba p, .fase.prueba li { color: #C4C1B8; }
.fase ul { margin: 1.25rem 0 0; padding-left: 1.1rem; font-size: 0.95rem; display: grid; gap: 0.4rem; }

/* Encaje: el «sí» en lima; el «no» se distingue por icono, título y borde discontinuo, no solo por color (CA8.2) */
.encaje { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
.encaje section { border-radius: 22px; padding: 2rem; background: var(--lima); }
.encaje .no { background: var(--tarjeta); border: 1.5px dashed var(--borde); }
.encaje h3 { font-size: 1.5rem; }
.encaje ul { margin: 1.25rem 0 0; padding: 0; list-style: none; display: grid; gap: 0.8rem; }
.encaje li { display: grid; grid-template-columns: 1.25rem 1fr; gap: 0.6rem; align-items: start; }
.encaje li svg { width: 1.1rem; height: 1.1rem; margin-top: 0.2rem; }
.encaje .no li svg { color: var(--error); }

/* Lo que dice OpenAI: afirmación y fuente, en tabla sobre crema */
.fuentes { width: 100%; border-collapse: collapse; border-top: 1.5px solid var(--tinta); }
.fuentes th, .fuentes td { text-align: left; padding: 1.1rem 1rem 1.1rem 0; border-bottom: 1px solid var(--linea); vertical-align: top; }
.fuentes th { font-weight: 600; font-size: 1.05rem; width: 38%; letter-spacing: -0.01em; }
.fuentes td { color: var(--tinta-2); font-size: 0.97rem; }

/* Preguntas: filas con el signo + que gira al abrir */
.preguntas > .contenedor { max-width: 54rem; }
.preguntas details { border-bottom: 1px solid var(--linea); }
.preguntas summary {
  cursor: pointer; padding: 1.3rem 0; font-weight: 600; font-size: 1.15rem; letter-spacing: -0.015em;
  list-style: none; display: flex; justify-content: space-between; gap: 1.25rem; align-items: center;
}
.preguntas summary::-webkit-details-marker { display: none; }
.preguntas summary::after {
  content: '+'; flex: 0 0 1.9rem; height: 1.9rem; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--tinta);
  display: grid; place-items: center; font-weight: 500;
  transition: transform 300ms var(--ease), background-color 300ms var(--ease), color 300ms var(--ease);
}
.preguntas details[open] summary::after { transform: rotate(45deg); background: var(--tinta); color: var(--fondo); }
.preguntas details p { padding-bottom: 1.3rem; color: var(--tinta-2); }

/* ---------- Contacto y formulario: bloque tinta con la caja crema ---------- */
#contacto { background: var(--tinta); color: var(--fondo); border-radius: 36px 36px 0 0; margin-top: 6.5rem; padding-block: 6.5rem; }
#contacto h2 .serif { color: var(--accion-oscuro); }
#contacto h2 { margin-bottom: 1.25rem; }
#contacto .entrada { color: #C4C1B8; margin-bottom: 2.5rem; }
#contacto :focus-visible { outline-color: var(--lima); }
.contacto-rejilla { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 4rem; align-items: start; }
.pasos-previos { margin: 0; padding: 0; list-style: none; counter-reset: paso; display: grid; gap: 0.9rem; color: #E7E3D9; }
/* El número va fuera del flujo: el texto del paso mezcla <strong> y texto y no puede ser rejilla */
.pasos-previos li { counter-increment: paso; position: relative; padding-left: 3.1rem; min-height: 2.2rem; padding-top: 0.2rem; }
.pasos-previos li::before {
  content: counter(paso); position: absolute; left: 0; top: 0; width: 2.2rem; height: 2.2rem; border-radius: 10px;
  background: #24242A; color: var(--lima); display: grid; place-items: center; font-weight: 700; font-size: 0.9rem;
}
.pasos-previos strong { color: #FFFFFF; }
#contacto .contacto-directo { color: #A9A6A0; }
#contacto .contacto-directo a { color: #FFFFFF; }
.formulario {
  background: var(--fondo); color: var(--tinta); border-radius: 26px; padding: 2.1rem;
  box-shadow: 0 40px 80px -40px rgb(0 0 0 / 0.8);
}
#contacto .formulario :focus-visible { outline-color: var(--violeta); }
.progreso { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1.25rem; font-size: 0.85rem; font-weight: 600; color: var(--gris); }
.progreso-barra { display: flex; gap: 0.35rem; flex: 1; max-width: 14rem; }
.progreso-barra span { flex: 1; height: 0.3rem; border-radius: 999px; background: var(--linea); }
.progreso-barra span.hecho { background: var(--accion); }
.paso { border: 0; margin: 0; padding: 0; min-width: 0; }
.paso[hidden] { display: none; }
.paso legend { font-size: 1.6rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1.15; padding: 0; margin-bottom: 1.25rem; }
.opciones { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.opcion {
  display: flex; gap: 0.6rem; align-items: flex-start; padding: 0.9rem 1rem; background: var(--tarjeta);
  border: 1.5px solid var(--borde); border-radius: 14px; cursor: pointer; font-weight: 500;
  transition: border-color 180ms var(--ease), box-shadow 180ms var(--ease);
}
.opcion:has(input:checked) { border-color: var(--tinta); box-shadow: inset 0 0 0 1px var(--tinta); }
.opcion input { margin-top: 0.3rem; accent-color: var(--accion); }
.opcion small { display: block; color: var(--gris); font-weight: 400; }
.campo { display: grid; gap: 0.35rem; margin-bottom: 1rem; }
.campo label { font-weight: 600; font-size: 0.92rem; }
.campo input, .campo select {
  font: inherit; color: var(--tinta); background: var(--tarjeta); min-height: 3rem; padding: 0.7rem 0.9rem;
  border: 1.5px solid var(--borde); border-radius: 12px; width: 100%;
}
.campo input:focus-visible, .campo select:focus-visible { outline: 3px solid var(--violeta); outline-offset: 1px; }
.campo [aria-invalid='true'] { border: 2px solid var(--error); }
.error-campo { color: var(--error); font-size: 0.9rem; font-weight: 600; display: flex; gap: 0.35rem; align-items: center; }
.error-campo[hidden] { display: none; }
.error-campo svg { width: 1rem; height: 1rem; flex: none; }
.dos { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
.casilla { display: flex; gap: 0.6rem; align-items: flex-start; margin-bottom: 0.75rem; font-size: 0.92rem; color: var(--tinta-2); }
.casilla input { width: 1.15rem; height: 1.15rem; margin-top: 0.2rem; accent-color: var(--accion); flex: none; }
.navegacion { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 1.5rem; flex-wrap: wrap; }
.navegacion .accion { margin-left: auto; }
.aviso { margin-top: 1rem; padding: 0.75rem 1rem; border-radius: 12px; border: 1px solid var(--borde); background: var(--tarjeta); }
.aviso.error { border: 2px solid var(--error); color: var(--tinta); }
.aviso[hidden] { display: none; }
/* Información básica sobre protección de datos (H27): epígrafe a la izquierda; en móvil, encima del texto (CA27.5) */
/* Desplegable cerrado (CA27.7): el summary hace de título; el caption de la tabla queda solo para lectores */
.informacion-basica { margin-top: 1.25rem; border-top: 1px solid var(--linea); }
.informacion-basica summary {
  cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 0.8rem 0; font-size: 0.9rem; font-weight: 600; color: var(--tinta);
}
.informacion-basica summary::-webkit-details-marker { display: none; }
.informacion-basica summary::after {
  content: '+'; flex: 0 0 1.6rem; height: 1.6rem; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--tinta);
  display: grid; place-items: center; font-weight: 500; transition: transform 300ms var(--ease), background-color 300ms var(--ease), color 300ms var(--ease);
}
.informacion-basica[open] summary::after { transform: rotate(45deg); background: var(--tinta); color: var(--fondo); }
.informacion-basica .informacion-legal { margin-top: 0; }
.informacion-legal { margin-top: 1.25rem; width: 100%; border-collapse: collapse; font-size: 0.85rem; color: var(--tinta-2); }
.informacion-legal caption { text-align: left; font-weight: 600; color: var(--tinta); padding-bottom: 0.4rem; }
.informacion-legal th, .informacion-legal td { text-align: left; vertical-align: top; padding: 0.4rem 0; border-top: 1px solid var(--linea); overflow-wrap: anywhere; }
.informacion-legal th { width: 9rem; padding-right: 0.75rem; font-weight: 600; color: var(--tinta); }
@media (max-width: 30rem) {
  .informacion-legal th, .informacion-legal td { display: block; width: auto; }
  .informacion-legal td { border-top: 0; padding-top: 0; }
}
.hecho-formulario h3 { font-size: 1.6rem; margin-bottom: 0.5rem; }
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Movimiento: solo la entrada del anuncio al cargar (plan.md §13.3) ----------
   Se ve una vez y señala dónde aparece la marca. El estado final es el visible por defecto. */
@keyframes entra { from { opacity: 0; transform: translateY(0.5rem); } }
/* Solo el anuncio del primer panel, al cargar: cambiar de pestaña (también con teclado) no anima */
#panel-educacion .anuncio { animation: entra 320ms var(--ease) 900ms both; }

@media (prefers-reduced-motion: reduce) {
  .demo { transform: none; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}

/* ---------- Responsive ---------- */
@media (max-width: 60rem) {
  .hero-rejilla, .contacto-rejilla { grid-template-columns: 1fr; }
  .hero-rejilla { gap: 3rem; }
  .demo { transform: none; }
  .contraste, .fases, .encaje { grid-template-columns: 1fr; }
  .contacto-rejilla { gap: 3rem; }
}
@media (max-width: 40rem) {
  .cabecera nav { display: none; }
  .hero { padding-block: 2rem 4rem; }
  .hero-acciones > * { width: 100%; }
  .opciones, .dos { grid-template-columns: 1fr; }
  .lista-plan li { grid-template-columns: 1fr; gap: 0.35rem; }
  .fuentes th, .fuentes td { display: block; width: auto; }
  .fuentes th { padding-bottom: 0.3rem; border-bottom: 0; }
  .fuentes td { padding-top: 0; }
  .seccion { padding-top: 4rem; }
  .oscura, #contacto { margin-top: 4rem; padding-block: 4rem; }
  #contacto { border-radius: 26px 26px 0 0; }
  .contraste > div, .fase, .encaje section { padding: 1.5rem; }
  .formulario { padding: 1.5rem 1.1rem; }
  .consulta { font-size: 1.3rem; }
  .conversacion { font-size: 1.1rem; }
}
.contacto-directo { margin-top: 1.5rem; }
.riesgo-formulario { margin-top: 0.75rem; }

/* ---------- Panel de cookies (CookieConsent 3.1.0) con la paleta de la landing ---------- */
#cc-main {
  --cc-font-family: var(--letra);
  --cc-bg: var(--fondo);
  --cc-primary-color: var(--tinta);
  --cc-secondary-color: var(--tinta-2);
  --cc-btn-primary-bg: var(--accion);
  --cc-btn-primary-color: var(--accion-texto);
  --cc-btn-primary-border-color: var(--accion);
  --cc-btn-primary-hover-bg: var(--tinta);
  --cc-btn-primary-hover-color: var(--fondo);
  --cc-btn-primary-hover-border-color: var(--tinta);
  --cc-btn-secondary-bg: var(--accion);
  --cc-btn-secondary-color: var(--accion-texto);
  --cc-btn-secondary-border-color: var(--accion);
  --cc-btn-secondary-hover-bg: var(--tinta);
  --cc-btn-secondary-hover-color: var(--fondo);
  --cc-btn-secondary-hover-border-color: var(--tinta);
  --cc-separator-border-color: var(--linea);
  --cc-toggle-on-bg: var(--accion);
  --cc-cookie-category-block-bg: var(--tarjeta);
  --cc-footer-bg: var(--tarjeta);
  --cc-footer-color: var(--tinta-2);
  --cc-modal-border-radius: var(--radio);
  --cc-btn-border-radius: 999px;
}

/* Política de cookies (politica-de-cookies.html, T-26): texto largo, sin la cuadrícula de la landing */
.legal { max-width: 52rem; padding-block: 2.5rem 5rem; }
.legal h1 { font-size: clamp(2rem, 4vw, 3rem); max-width: none; }
.legal h2 { font-size: clamp(1.4rem, 2.4vw, 1.8rem); margin-top: 2.5rem; }
.legal p, .legal ul { margin: 1rem 0 0; }
.legal-fecha { color: var(--tinta-2); font-size: 0.95rem; }
.legal .aviso-borrador { padding: 0.75rem 1rem; border: 2px solid var(--tinta); border-radius: var(--radio); margin: 0 0 2rem; }
.legal-tabla { overflow-x: auto; margin-top: 1rem; position: relative; } /* relative: contiene los textos ocultos de los enlaces */
.legal-tabla table { width: 100%; min-width: 40rem; border-collapse: collapse; font-size: 0.9rem; }
.legal-tabla th, .legal-tabla td { text-align: left; vertical-align: top; padding: 0.6rem 0.75rem 0.6rem 0; border-bottom: 1px solid var(--linea); }
.legal-tabla thead th { color: var(--tinta-2); font-weight: 600; }
.legal-tabla tbody th { font-weight: 600; }