/* formacion-online.es — hoja de estilos de la web nueva
   ---------------------------------------------------------------------------
   Movil primero. Todo lo que se ve de escritorio va dentro de @media (min-width).
   Los colores salen de la marca de la web vieja: el rojo #e50317 y el azul
   #001930 son los suyos, no se inventan. El rojo se usa POCO y a proposito:
   es el color de «esto se pulsa».
   ---------------------------------------------------------------------------*/

/* ---------------------------------------------------------------- 1. fichas */
:root {
  color-scheme: light;

  /* marca */
  --rojo:        #e50317;
  --rojo-vivo:   #ff1f33;
  --tinta:       #0b1b2b;

  /* papel y superficies, con una pizca de azul: un gris puro se ve sucio */
  --papel:       #f7f8fa;
  --papel-alto:  #ffffff;
  --papel-hondo: #eceef2;
  --borde:       #dfe3ea;
  --borde-fino:  #e9ecf1;

  /* texto */
  --letra:       #16222f;
  --letra-suave: #55636f;
  --letra-tenue: #5a6573;   /* 01/10/2026: era #7b8794, 3,15:1 sobre el pie; ahora 5,1:1 */

  /* tipos */
  --fuente: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
            'Helvetica Neue', Arial, sans-serif;
  --fuente-dato: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Consolas,
                 'Liberation Mono', monospace;

  /* ritmo */
  --ancho:       1180px;
  --ancho-texto: 68ch;
  --canal:       clamp(16px, 5vw, 48px);
  --alto-barra:  76px;

  --curva: cubic-bezier(.22, 1, .36, 1);
  --sombra:      0 1px 2px rgba(11, 27, 43, .05), 0 8px 24px rgba(11, 27, 43, .06);
  --sombra-alta: 0 2px 4px rgba(11, 27, 43, .06), 0 18px 48px rgba(11, 27, 43, .12);
}

/* SIN TEMA OSCURO desde el 14/09/2026. Pedro quiere el logo EN SU COLOR
   ORIGINAL (azul y rojo sobre transparente), y sobre fondo oscuro desaparece:
   habia que invertirlo. La web es clara siempre; lo oscuro queda solo para el
   «estudio» de la tarjeta TPC (.taller), que es donde luce. */
:root { --azul-tpc: #1563c8; }

/* ------------------------------------------------------------- 2. cimientos */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--papel);
  color: var(--letra);
  font-family: var(--fuente);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
[hidden] { display: none !important; }

:focus-visible {
  outline: 2px solid var(--rojo);
  outline-offset: 3px;
  border-radius: 3px;
}

.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;
}

/* Saltar al contenido: lo primero que encuentra quien va con teclado */
.saltar {
  position: absolute; left: var(--canal); top: -100px; z-index: 999;
  background: var(--rojo); color: #fff; padding: 12px 18px;
  border-radius: 8px; text-decoration: none; font-weight: 600;
  transition: top .2s var(--curva);
}
.saltar:focus { top: 12px; }

.contenedor {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: var(--canal);
}

/* -------------------------------------------------------------- 3. tipografia */
h1, h2, h3, h4, h5, h6 {
  margin: 0 0 .5em;
  line-height: 1.15;
  font-weight: 650;
  letter-spacing: -.022em;
  text-wrap: balance;
  color: var(--tinta);
}
h1 { font-size: clamp(2rem, 6.2vw, 3.6rem); letter-spacing: -.035em; }
h2 { font-size: clamp(1.5rem, 4vw, 2.3rem); letter-spacing: -.028em; }
h3 { font-size: clamp(1.22rem, 3vw, 1.55rem); }
h4 { font-size: 1.1rem; }
h5, h6 { font-size: 1rem; font-weight: 600; }

p { margin: 0 0 1.15em; max-width: var(--ancho-texto); }
p:last-child { margin-bottom: 0; }

.contenido a:not(.boton) {
  color: var(--rojo);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--rojo) 35%, transparent);
  transition: text-decoration-color .18s var(--curva);
}
.contenido a:not(.boton):hover { text-decoration-color: var(--rojo); }

.contenido ul, .contenido ol {
  margin: 0 0 1.3em; padding-left: 1.1em; max-width: var(--ancho-texto);
}
.contenido li { margin-bottom: .45em; }
.contenido ul { list-style: none; padding-left: 0; }
.contenido ul > li {
  position: relative; padding-left: 1.6em;
}
.contenido ul > li::before {
  content: ''; position: absolute; left: .35em; top: .62em;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--rojo); opacity: .75;
}

.contenido > * + h2 { margin-top: 2.4em; }
.contenido > * + h3 { margin-top: 1.9em; }

/* Una tabla nunca desborda la pagina: se desplaza dentro de su caja */
.tabla-caja { overflow-x: auto; margin: 0 0 1.5em; }
.contenido table {
  width: 100%; border-collapse: collapse; font-size: .95rem;
  font-variant-numeric: tabular-nums;
}
.contenido th, .contenido td {
  padding: .7em .9em; text-align: left;
  border-bottom: 1px solid var(--borde-fino);
}
.contenido th { font-weight: 620; color: var(--tinta); }

/* ---------------------------------------------------------------- 4. barra */
.barra {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--papel) 82%, transparent);
  backdrop-filter: saturate(1.6) blur(14px);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s var(--curva), background .25s var(--curva);
}
.barra.pegada {
  border-bottom-color: var(--borde-fino);
  background: color-mix(in srgb, var(--papel) 94%, transparent);
}
.barra__fila {
  display: flex; align-items: center; gap: 10px;
  min-height: var(--alto-barra);
}
.barra__logo { display: flex; align-items: center; flex: 0 0 auto; }
/* 48 -> 65 px: +35% (Pedro, 14/09). En su color original, sin filtros.
   En el movil se queda en 48 para que quepa junto al boton del menu. */
.barra__logo img { height: 48px; width: auto; }
@media (min-width: 1000px) { .barra__logo img { height: 65px; } }

.barra__menu { margin-left: auto; display: none; }
.barra__menu ul {
  display: flex; align-items: center; gap: 2px;
  list-style: none; margin: 0; padding: 0;
}
.barra__menu a {
  display: block; padding: 8px 6px; border-radius: 8px;   /* 8 -> 6: con el logo +35% la barra se salia 10 px */
  white-space: nowrap;   /* «Curso de TPC» se partia en dos lineas a 1440 px */
  font-size: .865rem; font-weight: 520; text-decoration: none;
  color: var(--letra-suave);
  transition: color .18s var(--curva), background .18s var(--curva);
}
.barra__menu a:hover { color: var(--tinta); background: var(--papel-hondo); }
.barra__menu a[aria-current="page"] { color: var(--tinta); font-weight: 620; }

.barra__acciones { margin-left: auto; display: flex; align-items: center; gap: 8px; }
@media (min-width: 1000px) { .barra__acciones { margin-left: 14px; } }

.tel-barra {
  display: none; align-items: center; gap: 7px;
  font-family: var(--fuente-dato); font-size: .84rem; font-weight: 500;
  white-space: nowrap;   /* se partia en «630 / 29 25 / 16» */
  text-decoration: none; color: var(--tinta);
  padding: 7px 10px; border-radius: 9px; border: 1px solid var(--borde);
  transition: border-color .18s var(--curva), transform .18s var(--curva);
}
.tel-barra:hover { border-color: var(--rojo); transform: translateY(-1px); }

.abrir-menu {
  margin-left: auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; padding: 0;
  background: none; border: 1px solid var(--borde); border-radius: 10px;
  color: var(--tinta); cursor: pointer;
}
.abrir-menu span {
  display: block; width: 17px; height: 1.5px; background: currentColor;
  position: relative; transition: background .2s var(--curva);
}
.abrir-menu span::before, .abrir-menu span::after {
  content: ''; position: absolute; left: 0; width: 17px; height: 1.5px;
  background: currentColor; transition: transform .28s var(--curva);
}
.abrir-menu span::before { top: -5.5px; }
.abrir-menu span::after  { top:  5.5px; }
.abrir-menu[aria-expanded="true"] span { background: transparent; }
.abrir-menu[aria-expanded="true"] span::before { transform: translateY(5.5px) rotate(45deg); }
.abrir-menu[aria-expanded="true"] span::after  { transform: translateY(-5.5px) rotate(-45deg); }

@media (min-width: 1000px) {
  .barra__menu { display: block; }
  .abrir-menu  { display: none; }
  .tel-barra   { display: inline-flex; }
}

/* menu de movil */
.menu-movil {
  position: fixed; inset: var(--alto-barra) 0 0; z-index: 55;
  background: var(--papel);
  padding: 18px var(--canal) 40px;
  overflow-y: auto;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .28s var(--curva), transform .28s var(--curva),
              visibility .28s;
}
.menu-movil.abierto { opacity: 1; visibility: visible; transform: none; }
.menu-movil ul { list-style: none; margin: 0; padding: 0; }
.menu-movil a {
  display: block; padding: 15px 4px; text-decoration: none;
  font-size: 1.18rem; font-weight: 560; color: var(--tinta);
  border-bottom: 1px solid var(--borde-fino);
}
@media (min-width: 1000px) { .menu-movil { display: none; } }

/* ----------------------------------------------------------------- 5. botones */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px 24px; border-radius: 11px;
  font-size: .97rem; font-weight: 600; letter-spacing: -.01em;
  text-decoration: none; border: 1px solid transparent; cursor: pointer;
  transition: transform .2s var(--curva), box-shadow .2s var(--curva),
              background .2s var(--curva), border-color .2s var(--curva);
}
.boton--primario {
  background: linear-gradient(165deg,
              color-mix(in srgb, var(--rojo) 88%, #fff) 0%,
              var(--rojo) 45%,
              color-mix(in srgb, var(--rojo) 88%, #000) 100%);
  color: #fff;
  box-shadow: 0 1px 2px rgba(229, 3, 23, .3),
              0 10px 26px rgba(229, 3, 23, .26),
              inset 0 1px 0 rgba(255, 255, 255, .28);
}
/* el brillo que cruza el boton al pasar por encima */
.boton { position: relative; overflow: hidden; }
.boton--primario::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 38%,
              rgba(255, 255, 255, .3) 50%, transparent 62%);
  transform: translateX(-120%);
  transition: transform .65s var(--curva);
}
.boton--primario:hover::after { transform: translateX(120%); }
@media (prefers-reduced-motion: reduce) { .boton--primario::after { display: none; } }
.boton--primario:hover {
  background: var(--rojo-vivo); transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(229, 3, 23, .3), 0 18px 38px rgba(229, 3, 23, .3);
}
.boton--secundario {
  background: linear-gradient(180deg, var(--papel-alto) 0%,
              color-mix(in srgb, var(--papel-alto) 92%, var(--papel)) 100%);
  color: var(--tinta); border-color: var(--borde);
  box-shadow: 0 1px 2px rgba(11, 27, 43, .05), inset 0 1px 0 rgba(255, 255, 255, .5);
}
.boton--secundario:hover { border-color: var(--tinta); transform: translateY(-2px); }
.boton:active { transform: translateY(0); }

/* ------------------------------------------------------------------ 6. hero */
.hero {
  position: relative; overflow: hidden; isolation: isolate;
  padding: clamp(40px, 6vw, 84px) 0 clamp(32px, 4.5vw, 60px);   /* menos aire: Pedro, 14/09 */
}

/* CAPA 1 - la foto de obra (cascos, gruas, andamios). Es una foto SUYA, de
   /wp-content/uploads/, no de un banco de imagenes. Se mueve mas despacio que
   la pagina y por eso se nota el relieve. */
.hero__foto {
  position: absolute; inset: -25% 0 auto; height: 150%;
  /* 01/10/2026: la misma foto en WebP a medida (era el JPG de 295 KB); el HTML las precarga */
  background: url('hero-800.webp') center 30% / cover no-repeat;
  will-change: transform; pointer-events: none; z-index: -2;
  opacity: .55;
}
@media (min-width: 900px) { .hero__foto { background-image: url('hero-1600.webp'); } }

/* CAPA 2 - el degradado, que es lo que hace legible el texto encima de la
   foto y lo que Pedro queria ver por defecto. */
.hero__fondo {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(62% 58% at 18% 12%, color-mix(in srgb, var(--rojo) 22%, transparent) 0%, transparent 64%),
    radial-gradient(52% 50% at 88% 2%, color-mix(in srgb, var(--tinta) 26%, transparent) 0%, transparent 60%),
    linear-gradient(180deg,
      color-mix(in srgb, var(--papel) 55%, transparent) 0%,
      color-mix(in srgb, var(--papel) 88%, transparent) 62%,
      var(--papel) 100%);
  will-change: transform; pointer-events: none;
}
.hero__migas {
  font-size: .82rem; color: var(--letra-tenue); margin-bottom: 18px;
}
.hero__migas a { color: inherit; text-decoration: none; }
.hero__migas a:hover { color: var(--rojo); }
.hero__migas span { margin: 0 7px; opacity: .5; }
.hero h1 { margin-bottom: .35em; }
.hero__entradilla {
  font-size: clamp(1.06rem, 2.2vw, 1.24rem);
  color: var(--letra-suave); max-width: 62ch; margin-bottom: 30px;
}
.hero__acciones { display: flex; flex-wrap: wrap; gap: 12px; }

/* LOS BOTONES NO SE MUEVEN AL CAMBIAR DE PAGINA (Pedro, 14/09). Debajo del
   titulo bailaban: cada pagina tiene un H1 y una entradilla de largo distinto.
   En escritorio van en su propia columna, arriba a la derecha, siempre a la
   misma altura; debajo, la homologacion. En el movil van debajo del texto. */
.hero__rejilla { display: grid; gap: 22px 56px; }
.hero__lado { display: flex; flex-direction: column; gap: 14px; }
@media (min-width: 900px) {
  .hero__rejilla { grid-template-columns: minmax(0, 1fr) 300px; align-items: start; }
  .hero__lado { padding-top: 6px; }
  .hero__lado .hero__acciones { flex-direction: column; }
  .hero__lado .boton { width: 100%; }
}
.hero__homologacion {
  font-size: .9rem; color: var(--letra-suave); text-decoration: none; line-height: 1.4;
}
.hero__homologacion strong { color: var(--rojo); }
.hero__homologacion:hover { color: var(--tinta); text-decoration: underline; }

/* --------------------------------------------------------------- 7. secciones */
.seccion { padding: clamp(26px, 4vw, 52px) 0; }
.seccion--alta { background: var(--papel-alto); border-block: 1px solid var(--borde-fino); }

/* Aqui habia una colision: `.contenido` se declaraba DESPUES de `.contenedor`
   y su `max-width: 100%` le ganaba por orden, asi que el cuerpo de la pagina
   empezaba 130 px a la izquierda del hero. No fallaba nada; solo quedaba
   descuadrado, que es como se cuelan estas cosas. `.contenido` ya no toca el
   ancho: solo pone el ritmo del texto. */
.contenido figure {
  /* 560 -> 392 px: otro 30% menos (Pedro, 14/09). En escritorio van a la
     derecha con el texto rodeandolas: menos hueco en blanco. En el movil,
     centradas y al ancho de la pantalla, que ahi no hay sitio para rodear. */
  margin: 1.4em auto;
  max-width: min(100%, 392px);
}
/* En el movil la foto de .fila-foto va ENCIMA de su texto, como antes. */
.contenido > .fila-foto { display: flex; flex-direction: column; }
.contenido > .fila-foto > figure { order: -1; }
@media (min-width: 900px) {
  .contenido > .fila-foto > figure { order: 0; }
  .contenido figure {
    float: right; clear: right;
    margin: .35em 0 1.2em 2.2em;
    width: min(392px, var(--w, 392px));   /* 01/10/2026: --w lo pone generar.py; con el ancho dicho, el texto no salta al cargar la foto (CLS) */
  }
  /* Los TITULOS NO se bajan por debajo de la foto: en la portada cada foto va
     antes de su titulo, y con `clear` en los h2 el titulo caia bajo la foto y
     dejaba un hueco de 250 px en blanco junto al texto anterior. Solo bajan
     los bloques anchos, que no caben al lado de una foto. */
  .contenido > .conv, .contenido > #contacto, .contenido > .firma,
  .contenido > .taller, .contenido > .tabla-caja { clear: both; }
  /* Foto + texto corto + otra foto (los cursos de la portada): en fila, texto
     a la izquierda centrado a la altura de SU foto. Flotando se apilaban y
     dejaban hueco a la izquierda (15/09). */
  .contenido > .fila-foto {
    clear: both; display: grid; grid-template-columns: minmax(0, 1fr) 392px;
    gap: 2.2em; align-items: center; margin-block: 1.2em;
  }
  .contenido > .fila-foto > figure { float: none; margin: 0; }
  .contenido > .fila-foto > div > :first-child { margin-top: 0; }
}
.contenido figure img {
  border-radius: 14px; box-shadow: var(--sombra-alta); width: 100%;
  border: 1px solid var(--borde-fino);
}
.contenido > * + h2 { margin-top: 1.7em; }
.contenido > * + h3 { margin-top: 1.3em; }

/* La firma del autor: es la senal E-E-A-T, no un parrafo mas */
.firma {
  display: flex; gap: 16px; align-items: flex-start;
  margin: 3em 0 0; padding: 22px;
  background: var(--papel-alto); border: 1px solid var(--borde-fino);
  border-radius: 14px;
}
.firma img {
  width: 62px; height: 62px; border-radius: 50%; flex: 0 0 auto;
  object-fit: cover;
}
.firma__nombre { font-weight: 650; color: var(--tinta); margin-bottom: 2px; }
.firma__texto { font-size: .94rem; color: var(--letra-suave); margin: 0; }

/* --------------------------------------------------- 8. tarjetas y rejillas */
.rejilla {
  display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
  margin: 0; padding: 0; list-style: none;
}
.tarjeta {
  display: flex; flex-direction: column; position: relative;
  background: linear-gradient(180deg, var(--papel-alto) 0%,
              color-mix(in srgb, var(--papel-alto) 94%, var(--papel)) 100%);
  border: 1px solid var(--borde-fino); border-radius: 16px;
  overflow: hidden; text-decoration: none; color: inherit;
  transition: transform .25s var(--curva), box-shadow .25s var(--curva),
              border-color .25s var(--curva);
}
.tarjeta:hover {
  transform: translateY(-3px);
  box-shadow: var(--sombra-alta); border-color: var(--borde);
}
.tarjeta img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.tarjeta__cuerpo { padding: 18px 18px 20px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.tarjeta__fecha {
  font-family: var(--fuente-dato); font-size: .76rem;
  color: var(--letra-tenue); text-transform: uppercase; letter-spacing: .04em;
}
.tarjeta__titulo { font-size: 1.06rem; font-weight: 620; color: var(--tinta); line-height: 1.3; margin: 0; }
.tarjeta__resumen { font-size: .92rem; color: var(--letra-suave); margin: 0; }

/* ------------------------------------------------------------ 9. formulario */
.formulario {
  background: var(--papel-alto); border: 1px solid var(--borde-fino);
  border-radius: 16px; padding: clamp(20px, 4vw, 32px);
  max-width: 640px;
}
.campo { margin-bottom: 15px; }
.campo label {
  display: block; font-size: .88rem; font-weight: 560;
  color: var(--letra-suave); margin-bottom: 6px;
}
.campo input, .campo textarea {
  width: 100%; padding: 12px 14px;
  font-family: inherit; font-size: 1rem; color: var(--letra);
  background: var(--papel); border: 1px solid var(--borde); border-radius: 10px;
  transition: border-color .18s var(--curva), box-shadow .18s var(--curva);
}
.campo input:focus, .campo textarea:focus {
  outline: none; border-color: var(--rojo);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--rojo) 15%, transparent);
}
.campo textarea { min-height: 118px; resize: vertical; }
.campo--acepta { display: flex; gap: 10px; align-items: flex-start; font-size: .87rem; color: var(--letra-suave); }
.campo--acepta input { width: auto; margin-top: 3px; flex: 0 0 auto; }

/* EL AVISO DE ENVIADO. Su TEXTO no se toca: es lo que dispara la conversion de
   Google Ads (elemento visible que contiene «Gracias por tu mensaje. Ha sido
   enviado.»). Cambiar esa frase apaga la medicion sin que falle nada. */
.aviso-envio {
  margin-top: 14px; padding: 14px 16px; border-radius: 11px;
  font-size: .95rem; font-weight: 550;
}
.aviso-envio--bien {
  background: color-mix(in srgb, #10b981 12%, transparent);
  border: 1px solid color-mix(in srgb, #10b981 35%, transparent);
  color: #047857;
}
.aviso-envio--mal {
  background: color-mix(in srgb, var(--rojo) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--rojo) 32%, transparent);
  color: var(--rojo);
}

/* -------------------------------------------------------------- 10. el pie */
.pie {
  background: var(--papel-hondo);
  border-top: 1px solid var(--borde-fino);
  padding: clamp(40px, 6vw, 64px) 0 26px;
  margin-top: clamp(28px, 4vw, 48px);
}
.pie__rejilla {
  display: grid; gap: 30px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
}
.pie h2 {
  font-size: .8rem; font-weight: 650; text-transform: uppercase;
  letter-spacing: .07em; color: var(--letra-tenue); margin-bottom: 14px;
}
.pie ul { list-style: none; margin: 0; padding: 0; }
.pie li { margin-bottom: 9px; }
.pie a {
  font-size: .92rem; color: var(--letra-suave); text-decoration: none;
  transition: color .18s var(--curva);
}
.pie a:hover { color: var(--rojo); }
.pie__legal {
  margin-top: 34px; padding-top: 20px; border-top: 1px solid var(--borde-fino);
  display: flex; flex-wrap: wrap; gap: 8px 20px;
  font-size: .84rem; color: var(--letra-tenue);
}

/* ------------------------------------------------- 11. aparecer al desplazar
   Las piezas entran desde un estado VISIBLE, nunca desde opacity:0 a secas:
   si el JavaScript no llega a ejecutarse, la pagina tiene que leerse igual.
   Por eso la clase la pone el propio JS (.js-anima) y no el HTML.          */
.js-anima .aparece {
  opacity: 0; transform: translateY(18px);
  transition: opacity .7s var(--curva), transform .7s var(--curva);
}
.js-anima .aparece.dentro { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js-anima .aparece { opacity: 1 !important; transform: none !important; }
  *, *::before, *::after {
    animation-duration: .001ms !important; transition-duration: .001ms !important;
  }
}

/* ------------------------------------------------------------- 12. el cursor
   Solo en aparatos con raton de verdad. En un movil no hay cursor que seguir,
   y dibujarlo seria un circulo pegado en una esquina. */
.cursor, .cursor-halo { display: none; }
@media (hover: hover) and (pointer: fine) and (min-width: 1000px) {
  .cursor, .cursor-halo {
    display: block; position: fixed; top: 0; left: 0; z-index: 900;
    pointer-events: none; border-radius: 50%;
    will-change: transform;
  }
  .cursor {
    width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px;
    background: var(--rojo);
  }
  .cursor-halo {
    width: 34px; height: 34px; margin: -17px 0 0 -17px;
    border: 1px solid color-mix(in srgb, var(--rojo) 45%, transparent);
    transition: width .25s var(--curva), height .25s var(--curva),
                margin .25s var(--curva), background .25s var(--curva),
                border-color .25s var(--curva);
  }
  .cursor-halo.sobre {
    width: 52px; height: 52px; margin: -26px 0 0 -26px;
    background: color-mix(in srgb, var(--rojo) 9%, transparent);
    border-color: var(--rojo);
  }
}
@media (prefers-reduced-motion: reduce) {
  .cursor, .cursor-halo { display: none !important; }
}

/* ------------------------------------------------------- 13. convocatorias */
.conv { margin: 2em 0; }
.conv__cab { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 14px; margin-bottom: 16px; }
.conv__dato { font-family: var(--fuente-dato); font-size: .8rem; color: var(--letra-tenue); margin: 0; }
.conv__filtros { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 18px; }
.conv__filtro {
  padding: 7px 14px; font-size: .87rem; font-weight: 550;
  background: var(--papel-alto); color: var(--letra-suave);
  border: 1px solid var(--borde); border-radius: 999px; cursor: pointer;
  transition: all .18s var(--curva);
}
.conv__filtro[aria-pressed="true"] { background: var(--tinta); color: var(--papel); border-color: var(--tinta); }
.conv__semana { font-size: .82rem; font-weight: 650; text-transform: uppercase;
  letter-spacing: .05em; color: var(--letra-tenue); margin: 26px 0 12px; }
.conv__grupo {
  background: var(--papel-alto); border: 1px solid var(--borde-fino);
  border-radius: 13px; padding: 17px; margin-bottom: 11px;
}
.conv__linea { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 9px; }
.conv__horas, .conv__precio {
  font-family: var(--fuente-dato); font-size: .82rem; font-weight: 600;
  padding: 3px 9px; border-radius: 6px; background: var(--papel-hondo);
}
.conv__precio { color: var(--rojo); }
.conv__esp { font-weight: 600; color: var(--tinta); }
.conv__dias { font-size: .89rem; color: var(--letra-suave); }
.conv__dias div { font-variant-numeric: tabular-nums; }
.conv__aviso { font-size: .92rem; color: var(--letra-suave); }

/* ------------------------------------------------------------ 14. impresion */
@media print {
  .barra, .menu-movil, .cursor, .cursor-halo, .pie, .saltar { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .aparece { opacity: 1 !important; transform: none !important; }
}

/* ------------------------------------------------- 15. la tarjeta de curso */
a.conv__grupo { display: block; text-decoration: none; color: inherit; position: relative; }
a.conv__grupo:hover { border-color: var(--rojo); transform: translateY(-2px); box-shadow: var(--sombra); }
a.conv__grupo { transition: transform .22s var(--curva), box-shadow .22s var(--curva), border-color .22s var(--curva); }
.conv__grupos {
  font-size: .78rem; font-weight: 600; padding: 3px 9px; border-radius: 6px;
  background: color-mix(in srgb, var(--rojo) 10%, transparent); color: var(--rojo);
}
.conv__fechas { font-family: var(--fuente-dato); font-size: .84rem; color: var(--letra-suave); margin: 3px 0 8px; }
.conv__cta {
  display: inline-block; margin-top: 10px; font-size: .88rem; font-weight: 620;
  color: var(--rojo);
}
.conv__cta::after { content: ' →'; transition: margin .2s var(--curva); }
a.conv__grupo:hover .conv__cta::after { margin-left: 5px; }

/* ------------------------------------------------------- 16. las cookies */
.cookies {
  position: fixed; left: var(--canal); right: var(--canal); bottom: 16px;
  z-index: 800; max-width: 560px; margin-inline: auto;
  background: var(--papel-alto); border: 1px solid var(--borde);
  border-radius: 16px; padding: 20px; box-shadow: var(--sombra-alta);
  opacity: 0; transform: translateY(16px);
  transition: opacity .3s var(--curva), transform .3s var(--curva);
}
.cookies.dentro { opacity: 1; transform: none; }
.cookies p { font-size: .89rem; color: var(--letra-suave); margin: 0 0 14px; max-width: none; }
.cookies a { color: var(--rojo); }
.cookies__botones { display: flex; flex-wrap: wrap; gap: 9px; }
.cookies__botones .boton { padding: 10px 18px; font-size: .9rem; }
@media (prefers-reduced-motion: reduce) { .cookies { transition: none; opacity: 1; transform: none; } }

/* =================================================== 17. LAS TRES LINEAS
   El reclamo de la portada, partido como lo pidio Pedro: cada cosa en su
   linea y con su peso. En una sola linea se leia como un parrafo mas.     */
/* Pedro, 14/09: «Más de 100 Cursos…» en UNA linea, centrada y en negrita, y
   «Más de 250.000 visitas al año» centrada debajo. */
.hero__entradilla--tres {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  max-width: none; text-align: center;
}
.hero__entradilla--tres .linea1, .hero__entradilla--tres .linea2 { white-space: nowrap; }
.hero__entradilla--tres .linea1 {
  font-size: clamp(.95rem, 1.9vw, 1.2rem); font-weight: 700; color: var(--tinta);
}
@media (max-width: 560px) {
  /* en un movil estrecho no cabe en una linea: se permite partir antes que salirse */
  .hero__entradilla--tres .linea1 { white-space: normal; }
}
.hero__entradilla--tres .linea2 {
  font-size: clamp(1.24rem, 3.2vw, 1.75rem); font-weight: 650;
  color: var(--tinta); letter-spacing: -.02em;
}
.hero__entradilla--tres .linea3 {
  font-size: clamp(.94rem, 2vw, 1.08rem); font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--rojo);
}

/* ============================== 18. LOS BOTONES DE CONTACTO DEL FINAL
   Sustituyen a las tres IMAGENES que habia («Llámenos» x2 y «Escríbanos»).
   Mismo texto, mismo telefono y mismo correo; la diferencia es que ahora son
   enlaces de verdad: se pueden pulsar desde el movil, los lee un lector de
   pantalla, y pesan cero en vez de tres JPEG. Y a la mitad de tamano, que es
   lo que pidio Pedro.                                                      */
.contactar { padding: clamp(28px, 5vw, 48px) 0 0; }
.contactar__caja {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
}
.contactar__uno {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; border-radius: 12px; text-decoration: none;
  background: linear-gradient(180deg, var(--papel-alto) 0%,
              color-mix(in srgb, var(--papel-alto) 93%, var(--papel)) 100%);
  border: 1px solid var(--borde-fino); color: var(--letra);
  box-shadow: 0 1px 2px rgba(11, 27, 43, .04);
  transition: transform .2s var(--curva), border-color .2s var(--curva),
              box-shadow .2s var(--curva);
}
.contactar__uno:hover {
  transform: translateY(-2px); border-color: var(--rojo);
  box-shadow: var(--sombra);
}
.contactar__icono {
  display: grid; place-items: center; flex: 0 0 auto;
  width: 38px; height: 38px; border-radius: 10px;
  background: color-mix(in srgb, var(--rojo) 11%, transparent); color: var(--rojo);
}
.contactar__que { display: block; font-size: .95rem; font-weight: 620; color: var(--tinta); }
.contactar__dato {
  display: block; font-family: var(--fuente-dato); font-size: .8rem;
  color: var(--letra-suave); word-break: break-all;
}

/* ===================== 19. LOS BOTONES PEGAJOSOS DEL LATERAL IZQUIERDO
   Los mismos que ya tiene la web (movil y fijo), con sus colores, mas el de
   WhatsApp que pidio Pedro. El numero es wa.me/34630292516, el MISMO que ya
   usan tpc20horas.es, tarjeta-tpc.es y curso-tpc.es: no esta inventado.
   En el movil bajan a una barra abajo, que arriba taparian el contenido.  */
.lateral {
  position: fixed; left: 0; top: 50%; transform: translateY(-50%);
  z-index: 700; display: flex; flex-direction: column; gap: 2px;
}
.lateral__uno {
  display: flex; align-items: center; gap: 0;
  height: 46px; padding: 0 13px; max-width: 46px;
  color: #fff; text-decoration: none; overflow: hidden; white-space: nowrap;
  border-radius: 0 10px 10px 0;
  transition: max-width .32s var(--curva), box-shadow .2s var(--curva);
}
.lateral__uno svg { flex: 0 0 auto; }
.lateral__texto {
  font-size: .86rem; font-weight: 620; opacity: 0;
  padding-left: 10px;
  transition: opacity .24s var(--curva);
}
.lateral__uno:hover, .lateral__uno:focus-visible {
  max-width: 230px; box-shadow: 0 6px 22px rgba(0, 0, 0, .3);
}
.lateral__uno:hover .lateral__texto,
.lateral__uno:focus-visible .lateral__texto { opacity: 1; }
.lateral__uno--movil { background: #a00e09; }   /* el color que ya tenia */
.lateral__uno--fijo  { background: #d32626; }   /* el color que ya tenia */
.lateral__uno--wa    { background: #25d366; color: #06331a; }

@media (max-width: 999px) {
  .lateral {
    left: 0; right: 0; top: auto; bottom: 0; transform: none;
    flex-direction: row; gap: 0;
    border-top: 1px solid rgba(0, 0, 0, .15);
  }
  .lateral__uno {
    flex: 1; max-width: none; justify-content: center;
    border-radius: 0; height: 52px;
  }
  .lateral__texto { opacity: 1; padding-left: 8px; font-size: .82rem; }
  /* el aviso de cookies no se puede quedar debajo de esa barra */
  .cookies { bottom: 68px; }
  body { padding-bottom: 52px; }
}
@media (prefers-reduced-motion: reduce) {
  .lateral__uno { transition: none; }
}

/* el segundo telefono de la barra solo cabe en pantallas anchas */
/* El segundo telefono solo cuando cabe DE VERDAD. A 1240 px la barra se salia
   83 px por la derecha y el numero aparecia cortado: medido con medir.mjs. */
.tel-barra--fijo { display: none; }
@media (min-width: 1380px) { .tel-barra--fijo { display: inline-flex; } }

/* El campo trampa para robots. No se usa display:none a proposito: hay robots
   que lo detectan y lo esquivan. Se saca de la pantalla y se quita del paso
   del teclado y de los lectores. */
.campo--trampa {
  position: absolute; left: -9999px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}

/* ===========================================================================
   20. CAPA PREMIUM (14/09/2026)
   Los efectos del sistema de iarank.es (Desktop/CLAUDE/Web premium), llevados
   a una web clara de 94 paginas. Todo se apaga con prefers-reduced-motion.
   ===========================================================================*/

/* --- el laser en los titulares: un haz rojo fino que cruza y descansa.
       Con el haz fuera, el texto se ve exactamente igual que sin efecto. */
.contenido h2 {
  background: linear-gradient(100deg, var(--tinta) 0 42%,
              var(--rojo) 48%, #ff8a94 50%, var(--rojo) 52%, var(--tinta) 58% 100%);
  background-size: 260% 100%; background-position: 100% 0;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: laser 7s var(--curva) infinite;
}
@keyframes laser { 0%, 62% { background-position: 100% 0; } 100% { background-position: 0 0; } }
.contenido h2::after {
  content: ''; display: block; width: 44px; height: 3px; margin-top: .38em;
  border-radius: 3px; background: linear-gradient(90deg, var(--rojo), var(--azul-tpc));
}

/* --- las imagenes: entran con un barrido, flotan (dron) y reaccionan al raton */
.contenido figure { position: relative; perspective: 900px; }
.contenido figure img {
  transition: transform .5s var(--curva), box-shadow .5s var(--curva), filter .5s var(--curva);
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(var(--s, 1));
  will-change: transform;
}
.contenido figure:hover img {
  --s: 1.04; box-shadow: 0 20px 50px rgba(11, 27, 43, .22);
  filter: saturate(1.08) contrast(1.03);
}
/* el brillo que cruza la foto */
.contenido figure::after {
  content: ''; position: absolute; inset: 0; border-radius: 14px; pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .45) 50%, transparent 65%);
  transform: translateX(-120%); transition: transform .9s var(--curva);
}
.contenido figure:hover::after { transform: translateX(120%); }
/* la entrada: la foto se destapa de abajo arriba. El recorte va en la IMAGEN y
   no en la figura, que es lo que vigila el IntersectionObserver: una figura
   recortada al 100% cuenta como «no visible» y nunca se destapaba. */
.js-anima .contenido figure.aparece { opacity: 1; transform: none; }
.js-anima .contenido figure.aparece img {
  clip-path: inset(100% 0 0 0 round 14px);
  transition: clip-path .9s var(--curva), transform .5s var(--curva),
              box-shadow .5s var(--curva), filter .5s var(--curva);
}
.js-anima .contenido figure.aparece.dentro img { clip-path: inset(0 0 0 0 round 14px); }
/* el dron: un vaiven lento de pocos pixeles */
@keyframes dron {
  0%, 100% { translate: 0 0; } 33% { translate: 0 -5px; } 66% { translate: 3px 2px; }
}
.contenido figure.dentro { animation: dron 9s ease-in-out infinite; }
.contenido figure:nth-of-type(2n).dentro { animation-duration: 11s; animation-delay: -3s; }

/* --- la luz de vela del cursor: halo calido alargado, no un circulo */
.vela { display: none; }
@media (hover: hover) and (pointer: fine) and (min-width: 1000px) {
  .vela {
    display: block; position: fixed; top: 0; left: 0; z-index: 5;
    width: 520px; height: 420px; margin: -210px 0 0 -260px;
    pointer-events: none; will-change: transform; opacity: 0;
    background:
      radial-gradient(38% 46% at 50% 52%, rgba(255, 190, 120, .20), transparent 70%),
      radial-gradient(22% 30% at 46% 40%, rgba(255, 140, 90, .14), transparent 72%),
      radial-gradient(30% 22% at 58% 64%, rgba(229, 3, 23, .07), transparent 70%);
    transition: opacity .6s var(--curva);
    animation: parpadeo 3.4s ease-in-out infinite;
  }
  .vela.encendida { opacity: 1; }
}
@keyframes parpadeo { 0%, 100% { filter: brightness(1); } 47% { filter: brightness(.9); } 52% { filter: brightness(1.06); } }

/* --- EL ESTUDIO DE LA TARJETA TPC (vista explotada que se monta con el scroll)
   Seccion alta + bloque pegado (sticky), como en iarank.es. Las franjas salen
   de UNA imagen cortada por el medio de los huecos negros (medido con Python).
   Al terminar de montarse aparece la foto real, tpc-cursos.jpg, y gira. */
.taller {
  position: relative; clear: both; height: 240vh;
  /* a sangre, de borde a borde. 100vw cuenta la barra de desplazamiento y se
     salia 15 px: se usa el ancho real que JS deja en --ancho-util */
  margin: 1.6em calc(50% - var(--ancho-util, 100vw) / 2);
}
.taller__fijo {
  position: sticky; top: var(--alto-barra);
  height: calc(100svh - var(--alto-barra));
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 18px; overflow: hidden;
  /* fondo BLANCO desde el principio (Pedro, 14/09): las piezas llevan
     transparencia y la foto real trae fondo blanco, asi todo se funde */
  background: radial-gradient(80% 70% at 50% 50%, #fff 55%, #eef2f7 100%);
  color: var(--tinta);
}
.taller__rotulo, .taller__escena { position: relative; z-index: 1; }
.taller__rotulo {
  margin: 0; font-family: var(--fuente-dato); font-size: .78rem;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--letra-suave);
}
.direccion { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.direccion:hover { color: var(--rojo); }
.taller__escena { position: relative; width: min(92vw, 1100px); aspect-ratio: 1344 / 752; perspective: 1400px; }
.taller__lamina { position: absolute; inset: 0; }
.taller__franja {
  position: absolute; top: 0; height: 100%;
  /* la lamina lleva TRANSPARENCIA (fondo negro quitado con Python): se mezcla
     normal y las piezas se tapan de verdad al encajar. Con mix-blend screen,
     como en iarank.es, se transparentaban unas a traves de otras y, al
     aclararse el estudio, asomaban los rectangulos negros de cada franja. */
  background-image: var(--img); background-repeat: no-repeat;
  will-change: transform;
}
/* La foto real va DENTRO de .contenido, asi que hereda las reglas de las
   fotos normales (flotar a la derecha, 392 px, el barrido de entrada, el dron
   y el brillo). Aqui se anulan todas: el dron, por ejemplo, anima la
   propiedad `translate` y la sacaba del centro. */
.contenido .taller__foto {
  position: absolute; left: 50%; top: 50%; width: 62%; max-width: none;
  margin: 0; float: none; clip-path: none; animation: none;
  translate: -50% -52%; opacity: 0; pointer-events: none;
  transform: rotateY(var(--giro, 0deg));
}
.contenido .taller__foto::after { display: none; }
.contenido .taller__foto img {
  width: 100%; height: auto; border: 0; border-radius: 0; box-shadow: none;
  transform: none; transition: none; filter: none;
}
/* sin movimiento: la tarjeta montada y quieta, todo legible */
@media (prefers-reduced-motion: reduce) {
  .taller { height: auto; }
  .taller__fijo { position: relative; height: auto; padding: 40px 16px; }
  .taller__lamina { display: none; }
  .contenido .taller__foto { position: relative; left: auto; top: auto; translate: none; opacity: 1; transform: none; width: min(90%, 560px); }
  .contenido h2 { animation: none; -webkit-text-fill-color: currentColor; background: none; }
  .contenido figure.dentro { animation: none; }
  .vela { display: none !important; }
}
@media (max-width: 700px) { .taller { height: 190vh; } }