/* ekaitz.es — web de servicios, v3 (2026-10-09; tarjeta de quién soy en crema desde el 12-10, probada en la v4).
   Lo mejor de la v1 y la v2 sobre el mismo sistema de estilo-webia.css (papel,
   tinta, granate, Newsreader + Noto Serif). Sin colores ni tipos nuevos.
   Inicio: titular de sección grande (v1), pasos con número a la altura del título,
   cartas de la v2, tarjetas con imagen de la v1, condiciones con icono. */

[hidden] { display: none !important; } /* .boton y los enlaces de contacto pisaban el hidden */

/* modo tinta, contraste revisado (09-10, aprobado por Ekaitz). El granate claro
   #c86f65 se veía salmón: el texto granate pasa a un rojo más vivo (#da645c, 5,1:1
   sobre el fondo y 4,8:1 sobre la tarjeta) y los botones rellenos usan el granate
   de verdad con texto crema (8:1). Las rayas suben de 1,3:1 a 1,7:1 (finas) y de
   1,8:1 a 2,5:1 (gruesas). */
:root { --granate-fondo: #7b1e1e; --sobre-granate: #f4efe4; }
[data-tema="tinta"] {
  --granate: #da645c;
  --hilo: rgba(234, 227, 210, 0.32);
  --hilo-fino: rgba(234, 227, 210, 0.2);
}
.boton-granate { background: var(--granate-fondo); border-color: var(--granate-fondo); color: var(--sobre-granate); }
.boton-granate:hover { background: transparent; color: var(--granate); }
/* fotos claras: un 10 % menos de brillo en tinta para que no deslumbren */
[data-tema="tinta"] main img { filter: brightness(0.9); }

/* párrafos: el navegador evita la última línea corta donde sabe (Chrome, Safari);
   main-webia.js repasa cada párrafo y corrige solo las huérfanas que se notan */
p, li, h3, figcaption { text-wrap: pretty; }

/* título de sección: texto, raya y marca de registro (2026-10-09, Ekaitz).
   Texto en tinta plena; raya y marca en tinta suave, las dos del mismo color para
   que la marca no pese más que la raya (Ekaitz, 09-10). Las demás rayas de la web
   siguen en hilo: la del título de sección es la única fuerte.
   La marca mide 17 px de alto, con trazos de 1 px como la raya. El círculo mide 11 px por fuera (opción C de la
   lámina): un poco más que las mayúsculas (8,57 px), porque con trazo fino un
   círculo a la altura exacta se veía pequeño; los brazos lo sobrepasan y caben en
   el alto de línea. La raya va a media altura de las mayúsculas para que siga en
   el brazo horizontal de la marca. */
.folio { color: var(--tinta); }
.folio::after {
  height: 17px;
  align-self: baseline;
  transform: translateY(4px);
  transform: translateY(round(calc(8.5px - 0.357em), 1px)); /* centro de la marca = mitad de la altura de mayúsculas */
  --marca: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 17'%3E%3Cg fill='none' stroke='%23000' stroke-width='1'%3E%3Ccircle cx='8.5' cy='8.5' r='5'/%3E%3Cpath d='M8.5 0v17M0 8.5h17'/%3E%3C/g%3E%3C/svg%3E");
  background: var(--tinta-suave);
  -webkit-mask: var(--marca) right center / 17px 17px no-repeat, linear-gradient(#000 0 0) left center / calc(100% - 17px - 0.5em) 1px no-repeat;
  mask: var(--marca) right center / 17px 17px no-repeat, linear-gradient(#000 0 0) left center / calc(100% - 17px - 0.5em) 1px no-repeat;
}

/* titular de sección (el folio va encima) */
.titular {
  font-family: var(--display);
  font-weight: 460;
  font-size: clamp(1.9rem, 4.2vw, 3.1rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  max-width: 20em;
  text-wrap: balance;
}

/* entradilla de sección: primera frase a cuerpo grande, en la voz del texto */
.entradilla {
  font-family: var(--display);
  font-weight: 420;
  font-size: clamp(1.45rem, 2.6vw, 2rem);
  line-height: 1.3;
  max-width: 26em;
  text-wrap: pretty;
}
.texto-largo { max-width: 36em; margin-top: 1.4rem; color: var(--tinta-suave); }
.texto-largo + .texto-largo { margin-top: 1rem; }
.texto-largo b { color: var(--tinta); font-weight: 600; }

/* cabecera de página interior (sin la escenografía del cuentahílos) */
.hero-simple { padding-top: clamp(7rem, 14vw, 10rem); }
.hero-simple h1 { font-size: clamp(2.3rem, 4.4vw, 3.4rem); }
h1 .frase { display: block; }
.portada-texto { max-width: min(62rem, 100%); }
/* el titular de la v3 es corto: en móvil puede crecer (antes 28 px a 360) */
@media (max-width: 860px) { .portada-texto h1 { font-size: clamp(2.1rem, 9.6vw, 2.8rem); } }
.hero-simple-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.hero-simple-fig { margin: 0; }
.hero-simple-fig img { width: 100%; height: auto; display: block; aspect-ratio: 4 / 3; object-fit: cover; box-shadow: var(--sombra-papel); }
@media (max-width: 860px) {
  .hero-simple-grid { grid-template-columns: 1fr; }
  .hero-simple h1 { font-size: clamp(2.1rem, 9vw, 2.8rem); }
}

/* botones de contacto directo (portada): icono de línea + texto */
.boton svg {
  width: 1.35em;
  height: 1.35em;
  margin-right: 0.65em;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* móvil: «WhatsApp» y «Email» a secas, para que quepan en una fila y no choquen con «Desliza» */
@media (max-width: 480px) {
  .hero-cta .solo-ancho { display: none; }
  .hero-cta { gap: 0.7rem; }
}

/* pasos: el número va a la altura y al cuerpo del título, colgado a la izquierda;
   título y texto alineados entre sí */
.pasos-lista {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.4rem, 3vw, 2.5rem);
  margin-top: clamp(2rem, 4vw, 3rem);
  counter-reset: paso;
}
.pasos-lista li {
  display: grid;
  grid-template-columns: 1.2em minmax(0, 1fr);
  column-gap: 0.5rem;
  align-content: start;
  border-top: 1px solid var(--hilo);
  padding-top: 1.1rem;
  counter-increment: paso;
}
.pasos-lista li::before,
.pasos-lista h3 {
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.35rem;
  line-height: 1.2;
}
.pasos-lista li::before {
  content: counter(paso);
  grid-column: 1;
  grid-row: 1;
  color: var(--granate);
  font-variant-numeric: lining-nums tabular-nums;
}
.pasos-lista h3 { grid-column: 2; margin-bottom: 0.5rem; }
.pasos-lista p { grid-column: 2; font-size: 0.94rem; color: var(--tinta-suave); }
@media (max-width: 860px) { .pasos-lista { grid-template-columns: 1fr; } }

/* condiciones: título en granate con icono, texto debajo; filete solo entre filas */
.condiciones {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(1.5rem, 4vw, 3.5rem);
}
.condiciones li { padding: 1.3rem 0; border-top: 1px solid var(--hilo-fino); font-size: 0.97rem; color: var(--tinta-suave); }
.condiciones li:nth-child(-n+2) { border-top: 0; padding-top: 0; }
.condiciones h3 {
  /* bloque y no flex: el punto rojo final tiene que ir pegado a la última palabra */
  font-family: var(--display);
  font-weight: 540;
  font-size: 1.3rem;
  line-height: 1.2;
  color: var(--granate);
  margin-bottom: 0.35rem;
}
.condiciones h3 svg {
  display: inline-block;
  vertical-align: -0.16em;
  margin-right: 0.55rem;
  width: 1.05em;
  height: 1.05em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@media (max-width: 720px) {
  .condiciones { grid-template-columns: 1fr; }
  .condiciones li:nth-child(2) { border-top: 1px solid var(--hilo-fino); padding-top: 1.3rem; }
}

/* lo que hace el sistema, en frases: una por línea, con filete, sin negritas de etiqueta */
.lista-frases {
  list-style: none;
  max-width: 40em;
  margin-top: clamp(1.6rem, 3vw, 2.4rem);
}
.lista-frases li {
  padding: 0.85rem 0 0.85rem 1.4em;
  border-top: 1px solid var(--hilo-fino);
  position: relative;
}
.lista-frases li:last-child { border-bottom: 1px solid var(--hilo-fino); }
.lista-frases li::before { content: "·"; position: absolute; left: 0.3em; color: var(--granate); font-weight: 700; }
.lista-frases a { color: var(--granate); }

/* aplicaciones en filas: nombre a la izquierda, explicación a la derecha (como la trayectoria) */
.filas { list-style: none; margin-top: clamp(2.4rem, 5vw, 3.5rem); }
.filas li {
  display: grid;
  grid-template-columns: minmax(10rem, 15rem) 1fr;
  gap: 0.4rem clamp(1.5rem, 4vw, 3rem);
  padding: 1.4rem 0;
  border-top: 1px solid var(--hilo-fino);
}
.filas li:last-child { border-bottom: 1px solid var(--hilo-fino); }
.filas h3 { font-family: var(--display); font-weight: 500; font-size: 1.4rem; line-height: 1.2; }
.filas p { max-width: 36em; color: var(--tinta-suave); }
@media (max-width: 720px) { .filas li { grid-template-columns: 1fr; } }

/* la pieza destacada en el inicio (cartas): papel con texto e imagen */
.destacado-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.6rem, 4vw, 3rem);
  align-items: center;
}
.destacado-grid .pieza-fig { margin: 0; }
.destacado-grid .pieza-fig img { aspect-ratio: 3 / 2; object-position: 72% 50%; }
@media (max-width: 860px) { .destacado-grid { grid-template-columns: 1fr; } }

/* tarjetas bajo la pieza: separación de la pieza */
.pieza + .tarjetas { margin-top: clamp(2.5rem, 5vw, 4rem); }

.acciones { margin-top: 1.8rem; display: flex; flex-wrap: wrap; gap: 0.9rem; align-items: center; }
.enlace-flecha { font-size: 0.9rem; color: var(--granate); display: inline-flex; align-items: center; min-height: 44px; }
.filas .enlace-flecha, .tarjeta .enlace-flecha { margin-top: 0.2rem; }

/* quién soy, versión corta: la tarjeta de la trayectoria con solo texto */
.quien-carta { min-height: clamp(300px, 32vw, 400px); display: flex; align-items: center; }
.quien-carta .tray-lista p { max-width: 30em; color: var(--tinta-suave); }
.quien-carta .tray-lista p + p { margin-top: 0.9rem; }
.quien-carta .acciones { margin-top: 1.4rem; }
@media (max-width: 860px) { .quien-carta { display: block; } }

/* contacto: frase de apoyo bajo el titular */
.contacto-intro { max-width: 34em; margin: 1.2rem auto 0; color: var(--tinta-suave); }

/* nota al pie de un bloque (sin cursiva: ya hay bastantes en la web) */
.nota { margin-top: 1.4rem; max-width: 40em; font-size: 0.9rem; color: var(--tinta-suave); }
.nota a { color: var(--granate); display: inline-block; padding: 0.85em 0; margin: -0.85em 0; } /* área táctil 44 px */


/* ---------- versión definitiva (09-10): lo aprobado por Ekaitz ---------- */

/* titulares de dos frases: cada una empieza línea (se corta por el sentido, no por el ancho) */
.titular .frase { display: block; }

/* condiciones que van después de un titular o un texto (agencias, cartas) */
.titular + .condiciones, .texto-largo + .condiciones { margin-top: clamp(2rem, 4vw, 3rem); }

/* menú del móvil: en elementos.css */

/* ---------- vídeo: fotograma con play; YouTube solo se carga al hacer clic ---------- */
.video {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #020204;
  box-shadow: var(--sombra-papel);
  overflow: hidden;
}
.video-play {
  appearance: none;
  border: 0;
  padding: 0;
  margin: 0;
  display: block;
  width: 100%;
  height: 100%;
  background: none;
  cursor: pointer;
  position: relative;
}
.video-play:disabled { cursor: default; }
.video-play img { width: 100%; height: 100%; object-fit: cover; display: block; }
.video-icono {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 76px;
  height: 76px;
  margin: -38px 0 0 -38px;
  border-radius: 50%;
  background: var(--granate-fondo);
  color: var(--sobre-granate);
  display: grid;
  place-items: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  transition: transform 0.2s ease;
}
.video-icono svg { width: 28px; height: 28px; margin-left: 4px; fill: currentColor; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.video-play:hover .video-icono { transform: scale(1.06); }
.video-play:focus-visible { outline: 2px solid var(--granate); outline-offset: 4px; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
/* sin enlace de YouTube, la sección del vídeo no se enseña (nada de huecos en la web publicada) */
#video:has(.video[data-youtube=""]) { display: none; }
/* solo en la web de prueba, mientras no haya enlace de YouTube */
.video-pendiente { display: none; }
.video[data-youtube=""] .video-pendiente {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0.6rem 1rem;
  background: rgba(2, 2, 4, 0.7);
  color: #eae3d2;
  font-size: 0.85rem;
  text-align: center;
}
@media (prefers-reduced-motion: reduce) { .video-icono { transition: none; } }

/* ---------- formulario (demo de cartas) ---------- */
.demo-grid { align-items: start; }
.formulario { display: grid; gap: 1.1rem; }
.campo label { display: block; font-size: 0.85rem; font-weight: 600; color: var(--tinta); margin-bottom: 0.35rem; }
.campo input, .campo textarea {
  width: 100%;
  min-height: 48px;
  padding: 0.7em 0.9em;
  font: 400 1rem/1.4 var(--texto); /* 16 px: el móvil no hace zoom al escribir */
  color: var(--tinta);
  background: var(--papel);
  border: 1px solid var(--tinta-suave);
  border-radius: 0;
}
.campo input:focus-visible, .campo textarea:focus-visible { outline: 2px solid var(--granate); outline-offset: 2px; }
.campo [aria-invalid="true"] { border-color: var(--granate); box-shadow: inset 0 0 0 1px var(--granate); }
.campo-error { margin-top: 0.35rem; font-size: 0.85rem; color: var(--granate); }
.campo-trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formulario .boton { justify-self: start; cursor: pointer; }
.formulario .boton:disabled { opacity: 0.6; cursor: wait; transform: none; }
.formulario-alt { font-size: 0.9rem; color: var(--tinta-suave); }
.formulario-alt a { color: var(--granate); display: inline-block; padding: 0.7em 0; margin: -0.7em 0; }
.formulario-privacidad { font-size: 0.8rem; line-height: 1.55; color: var(--tinta-suave); }
.formulario-privacidad a { color: inherit; }
.formulario-estado:empty { display: none; }
.formulario-estado { font-size: 0.95rem; color: var(--tinta); }
.formulario-estado.error { color: var(--granate); }
.formulario-hecho { font-family: var(--display); font-size: 1.35rem; line-height: 1.3; }
.pieza .nota + .boton { margin-top: 0.6rem; }
.pieza .nota { margin-top: 2rem; }

/* ---------- aviso legal y privacidad ---------- */
.legal { max-width: 40em; }
.legal h2 { font-family: var(--display); font-weight: 500; font-size: 1.45rem; line-height: 1.2; margin-top: 2.6rem; }
.legal p { margin-top: 0.8rem; color: var(--tinta-suave); }
.legal a { color: var(--granate); }
/* aviso legal: datos del titular en dos columnas */
.legal-datos { margin-top: 1.2rem; border-top: 1px solid var(--hilo-fino); }
.legal-datos div { display: grid; grid-template-columns: 8rem 1fr; gap: 1rem; padding: 0.6rem 0; border-bottom: 1px solid var(--hilo-fino); }
.legal-datos dt { font-size: 0.85rem; font-weight: 600; color: var(--tinta); }
.legal-datos dd { color: var(--tinta-suave); }
@media (max-width: 480px) { .legal-datos div { grid-template-columns: 1fr; gap: 0.1rem; } }
.pendiente { background: color-mix(in srgb, var(--granate) 18%, transparent); color: var(--tinta); padding: 0 0.25em; }

/* ---------- tarjeta de quién soy y de la trayectoria, en crema (v4, 12-10, Ekaitz) ----------
   Era negra solo porque la foto vieja tenía el fondo negro: así la foto parecía recortada
   dentro. La foto nueva tiene el fondo crema, así que la tarjeta toma ese color y lleva los
   colores del tema claro en los dos temas. Al cambiar de foto: medir su fondo y poner aquí
   --fondo-foto (y en tinta, ese color al 90 %, porque las fotos van al 90 % de brillo). */
.tray-carta {
  --fondo-foto: #f0e6d6;
  --pad-carta: clamp(1.6rem, 3.5vw, 3rem);
  --papel: var(--fondo-foto);
  --papel-carta: rgba(29, 29, 27, 0.04);
  --tinta: #1d1d1b;
  --tinta-suave: #57534a;
  --granate: #7b1e1e;
  --hilo: rgba(29, 29, 27, 0.16);
  --hilo-fino: rgba(29, 29, 27, 0.09);
  background: var(--fondo-foto);
  padding: var(--pad-carta);
}
[data-tema="tinta"] .tray-carta { --fondo-foto: #d8cfc1; }

/* la foto, anclada abajo a la derecha: su borde derecho y el de abajo son los de la
   tarjeta (el brazo cortado por el encuadre coincide con el canto). Cabe entera en su
   columna, a lo sumo el 90 % del alto: ya no se recorta contra el borde, porque en los
   encuadres cerrados el corte caía en la cara. Arriba y a la izquierda se funde con la
   tarjeta para que no se vea el corte del fondo. */
.tray-foto { right: 0; }
.tray-foto img {
  position: absolute;
  right: 0;
  bottom: 0;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 2.5%), linear-gradient(to bottom, transparent, #000 6%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, #000 2.5%), linear-gradient(to bottom, transparent, #000 6%);
  mask-composite: intersect;
}

@media (max-width: 860px) {
  /* en el móvil la foto va al final de la tarjeta, pegada al canto derecho y al de abajo;
     en la trayectoria, después del botón */
  .tray-carta { display: flex; flex-direction: column; }
  .tray-grid { display: contents; }
  .tray-lista { order: 1; }
  .tray-boton { order: 2; }
  .tray-foto {
    order: 3;
    align-self: stretch; /* en el inicio la tarjeta centra a sus hijos */
    display: flex;
    justify-content: flex-end;
    max-width: none;
    margin: 1.4rem calc(-1 * var(--pad-carta)) calc(-1 * var(--pad-carta)) 0;
  }
  .tray-foto img { position: static; max-height: 26rem; }
}