/* Tema de Patricia Tenazoa. Se carga DESPUÉS de estilos.css (motor de la
   plantilla, no se edita). Los nombres de las variables vienen del caso base
   (--verde-*, --amarillo…); aquí solo cambian sus valores.
   Manual de marca: terracota #DD6B4D (principal), melocotón #E8A882, arena
   #E1CAB8, crema #F5F1EC (base), carbón #333333 (textos e íconos).
   Títulos en Newsreader recta (manual: "Newsreader 36pt – Títulos"); la
   cursiva solo como acento en una frase puntual (.acento) y en los números.
   Cuerpo, etiquetas y botones en Montserrat. */
:root {
  --verde-bosque: #B9502F;     /* terracota oscura: textos y botones con buen contraste */
  --verde-medio: #DD6B4D;      /* terracota de marca */
  --verde-texto: #A6472A;
  --verde-claro: #E8A882;      /* melocotón */
  --lima: #E1CAB8;             /* arena */
  --azul: #333333;
  --azul-texto: #333333;
  --amarillo: #DD6B4D;         /* botón principal: terracota */
  --amarillo-hover: #C95C3F;
  --amarillo-tenue: #FBEDE6;
  --fondo: #F5F1EC;            /* crema */
  --fondo-alt: #EFE6DD;
  --fondo-oscuro: #333333;     /* pie: carbón */
  --texto: #333333;
  --texto-2: #5E5753;
  --borde: #E1CAB8;
  --font-titulo: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-cuerpo: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Newsreader', Georgia, 'Times New Roman', serif;
}

body { font-size: 15.5px; }
h1, h2 { font-family: var(--font-display); font-style: normal; font-weight: 500; letter-spacing: -0.005em; }

/* Acento: una idea puntual en Newsreader cursiva, nunca un título grande. */
.acento { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: 1.18em; line-height: 1.4; color: var(--texto); }
.sub.acento { font-size: 20px; }
h1 { font-size: clamp(28px, 8vw, 34px); line-height: 1.15; }
h2 { font-size: 26px; }
@media (min-width: 768px) { h1 { font-size: 44px; } h2 { font-size: 32px; } }

/* Botón principal: terracota con texto blanco (texto grande y en negrita). */
.btn-cta { color: #FFFFFF; }
.btn-cta:hover { color: #FFFFFF; }
.btn-secundario { color: var(--texto); border-color: var(--texto); }

/* Cabecera: solo la isotipo PT (el nombre ya va en la línea superior).
   Pie: imagotipo versión oscura. Ambos respetan el mínimo de 120 px del manual. */
.cabecera .contenedor { min-height: 72px; padding-top: 10px; padding-bottom: 10px; }
.cabecera img.cabecera-isotipo { width: 120px; }
.pie-fm { width: 170px; }
.pie-legal { color: #E1CAB8; }
.pie-legal a { color: #F5F1EC; }

/* Línea superior: etiqueta en mayúsculas espaciadas (manual de marca) */
.linea-superior {
  margin: 0 0 10px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--verde-texto);
}
.antetitulo { letter-spacing: 0.14em; text-transform: uppercase; font-size: 11.5px; }

/* Portada del video: capa carbón suave y duración */
.portada::after { background: rgba(51, 51, 51, 0.38); }
.portada-titulo { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: 22px; }
.video-pendiente { background: #333333; }
.portada-duracion {
  position: absolute; right: 12px; top: 12px; z-index: 2; padding: 2px 8px; border-radius: 6px;
  background: rgba(0, 0, 0, 0.6); color: #FFFFFF; font-size: 13px; font-weight: 600;
}

/* L1: "Así trabajo" debajo del botón */
.p1-pasos { margin-top: 28px; }
.p1-pasos h2 { font-size: 24px; margin-bottom: 14px; }
.pasos { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 14px; }
.pasos li { display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: start; line-height: 1.5; }
.pasos .num {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: var(--amarillo); color: #FFFFFF; font-family: var(--font-display); font-style: italic; font-size: 19px;
}
.pasos strong { display: block; font-weight: 600; }
@media (min-width: 960px) { .p1-pasos { grid-column: 1 / -1; max-width: 760px; } }

.hoja-texto { margin: 0 0 14px; color: var(--texto-2); }

/* Recuadros (L2, L4, L5) */
.recuadro {
  background: #FFFFFF; border: 1px solid var(--borde); border-radius: var(--radio-tarjeta);
  padding: 20px; margin: 22px 0; text-align: left;
}
.recuadro h2 { font-size: 24px; margin-bottom: 12px; }
.recuadro-titulo { font-weight: 600; margin: 0 0 10px; }
.recuadro .btn { margin-top: 16px; width: 100%; }
.recuadro .chico { margin-top: 10px; }
.lista-check { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 10px; }
.lista-check li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; line-height: 1.5; }
.lista-check .ico { color: var(--verde-medio); width: 20px; height: 20px; margin-top: 2px; }
.lista-numerada { margin: 0; padding-left: 22px; display: grid; gap: 8px; line-height: 1.5; }
.lista-numerada li::marker { color: var(--verde-medio); font-weight: 700; }

/* Antes y después: dos fotos del mismo tamaño */
.fotos.fotos-dos li:first-child { grid-column: auto; }
.fotos.fotos-dos .foto-marco { aspect-ratio: 4 / 5; }

/* Pantallas de salida de la encuesta */
.salida-cuerpo { max-width: 520px; margin: 0 auto 20px; text-align: left; }
.salida-cuerpo .sub { margin: 12px 0 0; }
.salida-lista { list-style: none; margin: 14px 0; padding: 0; display: grid; gap: 10px; }
.salida-lista li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; line-height: 1.5; }
.salida-lista .ico { color: var(--verde-medio); width: 20px; height: 20px; margin-top: 2px; }
.gracias h1 { max-width: 560px; margin: 0 auto; }
#salida-despues { max-width: 520px; margin: 16px auto 0; }

/* L5 */
.confirmacion .btn-secundario { margin-top: 8px; }
.centrado { text-align: center; }

/* Política de privacidad */
.legal-pagina { padding: 32px 0 48px; }
.legal-pagina h2 { font-size: 22px; margin: 28px 0 8px; }
.legal-pagina ul { padding-left: 20px; }

/* Permiso de WhatsApp: letra pequeña debajo del botón, sin competir con él. */
.legal-permiso { margin-top: 12px; font-size: 12.5px; line-height: 1.45; text-align: center; }
.legal-permiso a { color: inherit; }