/* =========================================================
   Estilos de Sensak
   Un solo archivo para todas las páginas y los dos idiomas.
   El diseño viene del paquete de Claude Design del 12 de octubre de 2026:
   las medidas y los colores están en Developer/sensak-diseno/design_handoff_web_sensak/README.md
   ========================================================= */

/* 1. Letras, alojadas en nuestra propia web.
   @font-face le dice al navegador cómo se llama una letra y dónde está su archivo.
   Como no las cargamos desde Google Fonts, las visitas no envían su IP a Google (RGPD).
   Las rutas empiezan por ../ porque se cuentan desde este archivo, que está en css/.
   font-display: swap enseña el texto con la letra del sistema mientras se descarga la nuestra. */
@font-face {
  font-family: "Hanken Grotesk";
  /* Letra "variable": un solo archivo con todos los grosores, del 100 al 900 */
  src: url("../fonts/hanken-grotesk-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

/* IBM Plex Sans no es variable: un archivo por grosor. Solo usamos el normal y la negrita */
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/ibm-plex-sans-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/ibm-plex-sans-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

/* 2. Variables: colores, letras y medidas definidos una sola vez.
   Si mañana quieres otro color, solo lo cambias aquí. */
:root {
  --burdeos: #8A1820;
  /* marca: botones, enlaces, números, viñetas, el punto del logo */
  --burdeos-hover: #6E1219;
  /* fondo del botón al pasar el ratón */
  --marino: #1C2333;
  /* texto principal y títulos */
  --tinta-suave: #4B5263;
  /* texto secundario */
  --rosa: #F7EDED;
  /* fondo de las fichas y del bloque de contacto */
  --blanco: #FFFFFF;
  --borde-campo: #6B7280;
  /* borde de los campos del formulario */

  /* Si una letra no carga, el navegador usa la siguiente de la lista */
  --letra-titulos: "Hanken Grotesk", system-ui, sans-serif;
  --letra-texto: "IBM Plex Sans", system-ui, sans-serif;

  --ancho-maximo: 1120px;
  --margen-lateral: clamp(20px, 4vw, 40px);
  --espacio-seccion: clamp(64px, 9vw, 120px);
  --radio: 10px;
  /* esquinas de botones y campos */
  --radio-ficha: 14px;
  /* esquinas de fichas y del bloque de contacto */
}

/* 3. Base */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* El body va en columna y mide como mínimo toda la pantalla:
   así el pie queda abajo aunque la página sea corta, como la de gracias */
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--blanco);
  color: var(--marino);
  font-family: var(--letra-texto);
  /* Los tamaños de letra van en rem para respetar el tamaño que cada persona
     haya elegido en su navegador. Normalmente, 1rem = 16px */
  font-size: 1.125rem;
  /* 18px */
  line-height: 1.6;
}

/* main ocupa todo el espacio que sobra entre la cabecera y el pie */
main {
  flex: 1;
}

/* Pespunte: la costura burdeos arriba y abajo de cada página.
   ::before y ::after crean un elemento al principio y al final del body sin tocar el HTML,
   así que sale en todas las páginas con una sola regla.
   El dibujo es una puntada de 16×16 px que se repite en horizontal (repeat-x) */
body::before,
body::after {
  content: "";
  flex: none;
  height: 16px;
  background: url("../img/pespunte.svg") repeat-x left center;
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--letra-titulos);
  font-weight: 800;
  text-wrap: balance;
}

/* clamp(mínimo, ideal, máximo): el tamaño se adapta al ancho de la pantalla.
   letter-spacing negativo junta un poco las letras, que en tamaños grandes se ven separadas */
h1 {
  font-size: clamp(2.5rem, 6.4vw, 4.5rem);
  /* de 40 a 72px */
  line-height: 1.03;
  letter-spacing: -0.03em;
}

h2 {
  font-size: clamp(1.875rem, 4vw, 2.5rem);
  /* de 30 a 40px */
  line-height: 1.1;
  letter-spacing: -0.025em;
}

h3 {
  font-size: 1.4375rem;
  /* 23px */
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  text-wrap: pretty;
}

/* Sin márgenes por defecto: cada bloque decide el espacio que deja */
p {
  margin: 0;
  text-wrap: pretty;
}

a {
  color: var(--burdeos);
  text-underline-offset: 3px;
}

a:hover {
  color: var(--marino);
}

/* Contorno visible al navegar con el teclado (tabulador) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--marino);
  outline-offset: 2px;
}

/* Desplazamiento suave al pulsar "Cuéntanos...", salvo si el usuario prefiere menos movimiento */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* 4. Contenedor: centra el contenido y limita el ancho para que se lea bien */
.contenedor {
  max-width: var(--ancho-maximo);
  margin: 0 auto;
  padding: 0 var(--margen-lateral);
}

/* 5. Cabecera */
/* flex coloca los hijos en fila: el logo a un lado y los idiomas al otro.
   flex-wrap: wrap los pasa a dos líneas si no caben */
.cabecera__fila {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding-block: 20px;
}

/* El logo es texto: «sensak» en marino y el punto (el <span>) en burdeos */
.logo {
  font-family: var(--letra-titulos);
  font-size: 1.875rem;
  /* 30px */
  font-weight: 850;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--marino);
  text-decoration: none;
}

.logo:hover {
  color: var(--marino);
}

.logo span {
  color: var(--burdeos);
}

/* El logo del pie, más pequeño */
.logo--pie {
  font-size: 1.375rem;
  /* 22px */
}

.idiomas {
  display: flex;
  gap: 18px;
  font-size: 1rem;
}

.idiomas a {
  color: var(--marino);
}

/* El idioma en el que estás aparece en negrita y sin subrayar */
.idiomas a[aria-current="page"] {
  font-weight: 700;
  text-decoration: none;
}

/* 6. Portada */
.portada {
  padding-top: clamp(48px, 8vw, 104px);
  padding-bottom: clamp(56px, 8vw, 112px);
}

/* Título, entradilla y botón en columna, con 24px entre ellos.
   gap pone el espacio entre los hijos sin tener que dar márgenes a cada uno */
.portada .contenedor {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}

.portada h1 {
  max-width: 820px;
}

/* Cada frase del título en su propia línea; la segunda, en burdeos */
.portada h1 span {
  display: block;
}

.portada h1 span+span {
  color: var(--burdeos);
}

.entradilla {
  max-width: 640px;
  color: var(--tinta-suave);
  font-size: clamp(1.125rem, 1.6vw, 1.25rem);
  /* de 18 a 20px */
}

/* 7. Botones */
.boton {
  display: inline-block;
  padding: 16px 26px;
  border: 0;
  border-radius: var(--radio);
  background: var(--burdeos);
  color: var(--blanco);
  font: inherit;
  font-size: 1.125rem;
  /* 18px */
  font-weight: 700;
  line-height: 1.3;
  text-decoration: none;
  cursor: pointer;
}

.boton:hover {
  background: var(--burdeos-hover);
  color: var(--blanco);
}

/* Botón secundario: solo el borde, para acciones menos importantes */
.boton--secundario {
  padding: 10px 18px;
  border: 2px solid var(--marino);
  background: transparent;
  color: var(--marino);
  font-size: 1rem;
}

.boton--secundario:hover {
  background: var(--marino);
  color: var(--blanco);
}

/* 8. Secciones: se separan solo con espacio, sin líneas ni fondos alternos */
.seccion {
  padding-bottom: var(--espacio-seccion);
}

/* Las fichas se reparten solas en columnas según el ancho de la pantalla:
   en el móvil, una debajo de otra; en el ordenador, de dos en dos.
   Cada columna mide como mínimo 420px (o todo el ancho, si la pantalla es más estrecha) */
.tarjetas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: 12px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

.tarjeta {
  padding: 28px 28px 30px;
  border-radius: var(--radio-ficha);
  background: var(--rosa);
}

.tarjeta p {
  margin-top: 10px;
  color: var(--tinta-suave);
  font-size: 1.0625rem;
  /* 17px */
}

/* Cómo trabajamos: los números grandes los pone el CSS con un "contador".
   counter-reset lo pone a cero al empezar la lista y counter-increment suma 1 en cada paso */
.pasos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 36px 40px;
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: paso;
}

.pasos li {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pasos li::before {
  counter-increment: paso;
  content: counter(paso);
  color: var(--burdeos);
  font-family: var(--letra-titulos);
  font-size: 2.5rem;
  /* 40px */
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
}

.pasos p {
  color: var(--tinta-suave);
  font-size: 1.0625rem;
}

/* IA con sentido común: el lema, grande y en burdeos */
.compromiso h2 {
  max-width: 860px;
  color: var(--burdeos);
  font-size: clamp(2.5rem, 6vw, 4rem);
  /* de 40 a 64px */
  line-height: 1.03;
  letter-spacing: -0.03em;
}

.compromiso p {
  max-width: 860px;
  margin-top: 18px;
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  /* de 20 a 24px */
  line-height: 1.5;
}

/* IA dentro de la ley: dos columnas en el ordenador y una en el móvil */
.ley {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: 24px 64px;
  align-items: start;
}

.ley p {
  margin-top: 16px;
  color: var(--tinta-suave);
  font-size: 1.0625rem;
}

.ley__lista {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Dejamos 28px a la izquierda de cada punto para la viñeta */
.ley__lista li {
  position: relative;
  padding: 10px 0 10px 28px;
  font-size: 1.0625rem;
  line-height: 1.55;
}

/* Viñeta: un cuadrado burdeos de 7×7px, como una puntada.
   position: absolute la coloca respecto al <li>, que tiene position: relative */
.ley__lista li::before {
  content: "";
  position: absolute;
  top: 20px;
  left: 0;
  width: 7px;
  height: 7px;
  background: var(--burdeos);
}

/* 9. Contacto */
.seccion--contacto {
  padding-bottom: clamp(56px, 8vw, 96px);
}

/* Bloque rosa en dos columnas: el texto a la izquierda y el formulario a la derecha */
.contacto {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: 32px 64px;
  align-items: start;
  padding: clamp(28px, 5vw, 56px);
  border-radius: var(--radio-ficha);
  background: var(--rosa);
}

.contacto__texto p {
  margin-top: 16px;
}

/* Enlace de correo, para quien prefiera no usar el formulario */
.otra-via {
  font-size: 1.0625rem;
}

/* 10. Formulario: todo en una columna, con 8px entre cada etiqueta y su campo */
.formulario {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.formulario label {
  font-size: 1rem;
  font-weight: 700;
}

.formulario input,
.formulario select,
.formulario textarea {
  width: 100%;
  min-height: 48px;
  margin-bottom: 12px;
  padding: 12px 14px;
  border: 1px solid var(--borde-campo);
  border-radius: var(--radio);
  background: var(--blanco);
  color: var(--marino);
  font: inherit;
  font-size: 1.0625rem;
}

/* El cuadro del mensaje solo se puede estirar hacia abajo */
.formulario textarea {
  resize: vertical;
}

.privacidad {
  margin-bottom: 8px;
  color: var(--tinta-suave);
  font-size: 0.90625rem;
  /* 14,5px */
  line-height: 1.55;
}

/* Casilla de privacidad: una columna de 24px para la casilla y otra para el texto */
.formulario .casilla {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  margin-bottom: 16px;
  font-weight: 400;
  line-height: 1.5;
}

/* accent-color pinta la casilla marcada con el color de la marca */
.formulario .casilla input {
  width: 22px;
  height: 22px;
  min-height: 0;
  margin: 1px 0 0;
  padding: 0;
  accent-color: var(--burdeos);
}

/* El botón usa el estilo de .boton; aquí solo cambia el relleno y que no ocupe todo el ancho */
.formulario button {
  align-self: flex-start;
  padding: 16px 30px;
}

/* Campo trampa: invisible para las personas */
.oculto {
  display: none;
}

/* 11. Página de gracias: una tarjeta blanca dentro de un bloque rosa */
.seccion--gracias {
  padding-top: clamp(48px, 8vw, 104px);
}

.gracias {
  padding: clamp(28px, 5vw, 56px);
  border-radius: var(--radio-ficha);
  background: var(--rosa);
}

.confirmacion {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  max-width: 560px;
  padding: 28px;
  border-radius: var(--radio-ficha);
  background: var(--blanco);
}

/* El cuadradito burdeos de arriba */
.confirmacion::before {
  content: "";
  width: 14px;
  height: 14px;
  background: var(--burdeos);
}

.confirmacion h1 {
  font-size: 1.75rem;
  /* 28px */
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.confirmacion p {
  color: var(--tinta-suave);
  font-size: 1.0625rem;
}

.confirmacion .boton {
  margin-top: 8px;
}

/* 12. Pie de página */
.pie__fila {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 16px 32px;
  padding-top: 24px;
  padding-bottom: 28px;
  color: var(--tinta-suave);
  font-size: 0.9375rem;
  /* 15px */
}

.pie__enlaces {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 24px;
}

.pie__enlaces a {
  color: var(--tinta-suave);
}

.pie__enlaces a:hover {
  color: var(--marino);
}
/* 13. Páginas legales (aviso legal y privacidad)
   Un solo texto en columna, más estrecho que el resto para que se lea cómodo */
.legal {
  display: flex;
  flex-direction: column;
  gap: 36px;
  /* espacio entre apartados */
  max-width: 760px;
  padding-top: clamp(48px, 8vw, 104px);
}

/* El título y la frase de debajo van juntos, más cerca entre sí */
.legal__titulo {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.legal h1 {
  font-size: clamp(2.25rem, 5vw, 3.25rem);
  /* de 36 a 52px */
  line-height: 1.06;
}

.legal h2 {
  font-size: 1.5rem;
  /* 24px */
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

/* Cada apartado: su título y sus párrafos */
.legal section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.legal section p {
  font-size: 1.0625rem;
  /* 17px */
  line-height: 1.65;
}

/* <mark> pinta de amarillo lo que falta por rellenar.
   Antes de publicar no debe quedar ninguno: búscalos con Ctrl+F */
mark {
  padding: 0 4px;
  border-radius: 3px;
  background: #FBE7A1;
  color: var(--marino);
}