/* =========================================================================
   curso-tpc.es — hoja de estilos única.

   POR QUÉ ESTE ASPECTO Y NO OTRO
   ------------------------------
   Pedro pidió «diseño moderno diferente a las demás». prevencionmadrid.es es
   azul corporativo (#14477D) con tipografía del sistema. Esta va por el lado
   contrario y por el que le corresponde al negocio: gris de hormigón y
   ÁMBAR DE SEÑALIZACIÓN, el amarillo de los chalecos y las cintas de obra.
   Se reconoce de un vistazo que no es la misma web, y el color viene del
   sector, no de un catálogo de plantillas.

   Un solo fichero, sin dependencias, sin fuentes de fuera. Una web que se
   queda coja porque Google Fonts va lento es una web más lenta a cambio de
   nada.
   ========================================================================= */

:root {
  --obra:      #191817;   /* casi negro, tirando a cálido */
  --obra-2:    #232120;
  --hormigon:  #f4f2ef;   /* el fondo claro */
  --hormigon-2:#e7e3dd;
  --papel:     #ffffff;
  --texto:     #1c1a18;
  --tenue:     #5f5952;
  --ambar:     #f2a516;   /* señalización */
  --ambar-osc: #b3760a;   /* el mismo, con contraste suficiente sobre blanco */
  --linea:     #d6d0c8;
  --linea-osc: #3a3634;
  --tipo: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ancho: 1180px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--tipo);
  font-size: 17px;
  line-height: 1.6;
  color: var(--texto);
  background: var(--papel);
  -webkit-font-smoothing: antialiased;
}

.envoltorio { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 20px; }
.envoltorio.estrecho { max-width: 760px; }

img { max-width: 100%; height: auto; }

a { color: var(--ambar-osc); }
a:hover { color: var(--obra); }

h1, h2, h3 { line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 .5em; }
h1 { font-size: clamp(2rem, 5vw, 3.1rem); font-weight: 800; }
h2 { font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 700; margin-top: 1.6em; }
h3 { font-size: 1.15rem; font-weight: 700; }
p { margin: 0 0 1em; }
.grande { font-size: 1.15rem; color: var(--tenue); }
.apunte { font-size: .92rem; color: var(--tenue); }
.opcional { font-weight: 400; color: var(--tenue); font-size: .85em; }

.saltar {
  position: absolute; left: -9999px; top: 0; background: var(--ambar);
  color: var(--obra); padding: 10px 16px; z-index: 100; font-weight: 700;
}
.saltar:focus { left: 0; }

/* ------------------------------------------------------------- cabecera */

.cabecera {
  position: sticky; top: 0; z-index: 40;
  background: var(--obra); color: #fff;
  border-bottom: 3px solid var(--ambar);
}
.cabecera__fila { display: flex; align-items: center; gap: 16px; min-height: 68px; }
.marca { display: flex; align-items: center; gap: 11px; text-decoration: none; color: #fff; margin-right: auto; }
/* El logo es la propia tarjeta TPC, en png con el fondo transparente. Sustituye
   al chevron dibujado en CSS que habia antes. */
.marca__logo {
  width: 62px; height: auto; flex: none;
  transform-origin: left center;
  transition: transform .22s ease;
}
/* El zoom se dispara al pasar por encima de TODA la marca, no solo de la imagen:
   asi tambien funciona pasando el raton por «Curso TPC», que es lo pedido.
   Va en `transform` y sin animaciones de por medio: una animacion con
   `fill-mode: both` sobre la misma propiedad se come el :hover en silencio. */
.marca:hover .marca__logo,
.marca:focus-visible .marca__logo { transform: scale(1.28); }
@media (prefers-reduced-motion: reduce) {
  .marca__logo { transition: none; }
  .marca:hover .marca__logo { transform: none; }
}
.marca__texto { display: flex; flex-direction: column; line-height: 1.15; }
.marca__texto b { font-size: 1.12rem; font-weight: 800; letter-spacing: -0.02em; }
.marca__texto span { font-size: .72rem; color: #b8b1a8; letter-spacing: .02em; }

.menu { display: flex; gap: 4px; }
.menu a {
  color: #ddd8d1; text-decoration: none; font-size: .93rem; font-weight: 600;
  padding: 9px 12px; border-radius: 7px; white-space: nowrap;
}
.menu a:hover { background: var(--obra-2); color: #fff; }
.menu-boton { display: none; }
.cabecera__llamar { flex: none; }

/* ---------------------------------------------------------------- botones */

.boton {
  display: inline-block; text-decoration: none; font-weight: 700; font-size: .97rem;
  padding: 12px 20px; border-radius: 9px; border: 2px solid var(--linea);
  color: var(--texto); background: transparent; cursor: pointer;
  font-family: var(--tipo);
}
.boton:hover { border-color: var(--obra); color: var(--obra); }
.cabecera .boton { color: #fff; border-color: #4a4642; }
.cabecera .boton:hover { border-color: var(--ambar); color: var(--ambar); }
.boton--fuerte {
  background: var(--ambar); border-color: var(--ambar); color: var(--obra);
}
.boton--fuerte:hover { background: #ffb62e; border-color: #ffb62e; color: var(--obra); }
.cabecera .boton--fuerte { color: var(--obra); }
.cabecera .boton--fuerte:hover { color: var(--obra); }
.boton--wa { background: #25d366; border-color: #25d366; color: #06331a; }
.boton--wa:hover { background: #1fbe5a; border-color: #1fbe5a; color: #06331a; }
.boton.ancho { display: block; text-align: center; }

/* ---------------------------------------------------------------- portada */

.portada {
  background: var(--obra); color: #fff;
  /* Franja diagonal ámbar muy tenue: la cinta de obra, sin gritar. */
  background-image: repeating-linear-gradient(135deg,
    rgba(242,165,22,.055) 0 22px, transparent 22px 44px);
  padding: 60px 0 64px;
}
.portada__rejilla { display: grid; grid-template-columns: 1.35fr .95fr; gap: 44px; align-items: start; }
.portada h1 { color: #fff; }
.portada .grande { color: #cbc4bb; }
.portada .apunte { color: #a09990; }
.sello {
  display: inline-block; font-size: .78rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ambar);
  border: 1px solid rgba(242,165,22,.4); border-radius: 999px; padding: 5px 13px;
  margin: 0 0 18px;
}
.portada__botones { display: flex; gap: 12px; flex-wrap: wrap; margin: 26px 0 14px; }
.portada .boton { color: #fff; border-color: #4a4642; }
.portada .boton:hover { border-color: var(--ambar); color: var(--ambar); }
.portada .boton--fuerte, .portada .boton--fuerte:hover { color: var(--obra); }

.portada__caja {
  background: var(--papel); color: var(--texto); border-radius: 14px;
  padding: 26px; border-top: 6px solid var(--ambar);
}
.portada__caja-titulo {
  font-size: .76rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--tenue); margin: 0 0 6px;
}
.portada__precio { display: flex; align-items: baseline; gap: 10px; margin: 0 0 12px; }
.portada__precio b { font-size: 2.7rem; font-weight: 800; letter-spacing: -0.03em; }
.portada__precio span { font-weight: 700; color: var(--tenue); }

/* ---------------------------------------------------------------- franjas */

.franja { padding: 56px 0; }
.franja--clara { background: var(--hormigon); }
.franja--oscura { background: var(--obra); color: #fff; }
.franja--oscura h2 { color: #fff; }
.franja--oscura .grande, .franja--oscura .apunte { color: #b8b1a8; }
.franja h2:first-child { margin-top: 0; }

.dos-columnas { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; }

/* ---------------------------------------------------------------- precios */

.precios {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(205px, 1fr));
  gap: 14px; margin: 26px 0;
}
.precio {
  display: flex; flex-direction: column; gap: 3px; text-decoration: none;
  background: var(--papel); color: var(--texto); border: 1px solid var(--linea);
  border-radius: 12px; padding: 20px;
}
.precio:hover { border-color: var(--ambar); color: var(--texto); }
.precio--destacado { border: 2px solid var(--ambar); }
.precio__nombre {
  font-weight: 700; font-size: 1rem;
  /* Dos lineas de alto siempre: si un nombre ocupa dos lineas y otro una, los
     precios de la fila quedan a distinta altura y la tabla se lee mal. */
  min-height: 2.5em; display: flex; align-items: flex-start;
}
.precio__cifra { font-size: 2rem; font-weight: 800; letter-spacing: -0.03em; }
.precio__modo { font-size: .8rem; font-weight: 700; text-transform: uppercase;
                letter-spacing: .05em; color: var(--ambar-osc); }
.precio__detalle { font-size: .88rem; color: var(--tenue); margin-top: 4px; }

/* --------------------------------------------------------- avisos y cajas */

.aviso-caja {
  background: var(--papel); color: var(--texto);
  border-left: 5px solid var(--ambar); border-radius: 0 12px 12px 0;
  padding: 20px 24px; margin: 26px 0;
}
.aviso-caja p:last-child { margin-bottom: 0; }
.aviso-caja--sobria { background: var(--hormigon); border-left-color: var(--linea); }
.franja--clara .aviso-caja--sobria { background: var(--papel); }
.aviso-caja--fuerte { border-left-width: 6px; background: #fff8e9; }

/* ------------------------------------------------------- rejilla de cursos */

.rejilla-cursos {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
  gap: 12px; margin: 26px 0;
}
.tarjeta-curso {
  display: flex; flex-direction: column; gap: 4px; text-decoration: none;
  background: var(--papel); color: var(--texto);
  border: 1px solid var(--linea); border-left: 4px solid var(--linea);
  border-radius: 10px; padding: 15px 17px;
}
.tarjeta-curso:hover { border-left-color: var(--ambar); color: var(--texto); }
.tarjeta-curso b { font-size: .98rem; line-height: 1.25; }
.tarjeta-curso span { font-size: .82rem; color: var(--tenue); }
.tarjeta-curso--actual { border-left-color: var(--ambar); background: var(--hormigon); }

/* ---------------------------------------------------------- ficha de curso */

.cabecera-curso { padding: 42px 0 34px; border-bottom: 1px solid var(--linea); }
.migas { font-size: .84rem; color: var(--tenue); margin-bottom: 14px; }
.migas a { color: var(--tenue); }
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 20px 0 0; }
.chip {
  font-size: .85rem; font-weight: 700; padding: 7px 14px; border-radius: 999px;
  background: var(--hormigon); border: 1px solid var(--linea);
}
.chip--fuerte { background: var(--ambar); border-color: var(--ambar); color: var(--obra); }

.riesgos { margin: 0 0 1.4em; padding: 0; list-style: none; }
.riesgos li {
  position: relative; padding: 7px 0 7px 30px; border-bottom: 1px solid var(--linea);
}
.riesgos li:last-child { border-bottom: 0; }
.riesgos li::before {
  content: ''; position: absolute; left: 3px; top: 15px;
  width: 11px; height: 11px; background: var(--ambar);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.pasos { margin: 24px 0; padding-left: 0; list-style: none; counter-reset: paso; }
.pasos li {
  counter-increment: paso; position: relative; padding: 0 0 20px 54px;
  border-left: 2px solid var(--linea); margin-left: 17px;
}
.pasos li:last-child { border-left-color: transparent; padding-bottom: 0; }
.pasos li::before {
  content: counter(paso); position: absolute; left: -18px; top: -4px;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--ambar); color: var(--obra);
  font-weight: 800; display: grid; place-items: center;
}

.texto-legal h2 { font-size: 1.2rem; margin-top: 1.8em; }
.texto-legal p { font-size: .97rem; }

.gracias { text-align: center; padding: 30px 0 10px; }
.gracias__tic {
  width: 72px; height: 72px; margin: 0 auto 18px; border-radius: 50%;
  background: var(--ambar); color: var(--obra);
  font-size: 2.4rem; font-weight: 800; display: grid; place-items: center;
}
.gracias .portada__botones { justify-content: center; }

/* -------------------------------------------------------------- contacto */

.contacto { background: var(--obra); color: #fff; padding: 58px 0; }
.contacto h2 { color: #fff; margin-top: 0; }
.contacto .grande { color: #cbc4bb; }
.contacto .apunte { color: #a09990; }
.contacto__rejilla { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: start; }

.telefonos { list-style: none; padding: 0; margin: 22px 0; }
.telefonos li { padding: 9px 0; border-bottom: 1px solid var(--linea-osc); }
.telefonos a { color: #fff; text-decoration: none; font-size: 1.35rem; font-weight: 800; letter-spacing: -0.01em; }
.telefonos a:hover { color: var(--ambar); }
.telefonos span { color: #a09990; font-size: .85rem; margin-left: 10px; }

.formulario { background: var(--papel); color: var(--texto); border-radius: 14px; padding: 26px; }
.formulario__titulo { font-weight: 800; font-size: 1.15rem; margin: 0 0 14px; }
.formulario label { display: block; font-size: .87rem; font-weight: 600; margin: 12px 0 5px; }
.formulario input[type=text], .formulario input[type=tel],
.formulario input[type=email], .formulario textarea {
  width: 100%; font-family: var(--tipo); font-size: 1rem; padding: 11px 13px;
  border: 1px solid var(--linea); border-radius: 9px; background: #fff; color: var(--texto);
}
.formulario input:focus, .formulario textarea:focus {
  outline: 3px solid rgba(242,165,22,.45); outline-offset: 1px; border-color: var(--ambar);
}
.formulario textarea { resize: vertical; }
.formulario .acepto {
  display: flex; gap: 9px; align-items: flex-start; font-weight: 400;
  font-size: .87rem; margin: 16px 0 4px; color: var(--tenue);
}
.formulario .acepto input { margin-top: 3px; flex: none; }
.formulario .boton { width: 100%; margin-top: 14px; }
.formulario .apunte { text-align: center; margin: 10px 0 0; }
/* El campo trampa: invisible para una persona, presente para un robot.
   Con display:none algunos robots lo detectan; así queda fuera de pantalla. */
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* -------------------------------------------------------------------- pie */

.pie { background: var(--obra-2); color: #b8b1a8; padding: 48px 0 26px; font-size: .92rem; }
.pie a { color: #ddd8d1; text-decoration: none; }
/* `.apunte` esta pensado para fondo claro (--tenue, un gris oscuro). Dentro del
   pie, que es oscuro, se quedaba en 2.32 de contraste cuando WCAG pide 4.5:
   el aviso de la homologacion y el numero de registro casi no se leian. Lo mismo
   pasa en las franjas oscuras. */
.pie .apunte { color: #b8b1a8; }
.pie a:hover { color: var(--ambar); }
.pie__rejilla { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 36px; }
.pie__marca b { color: #fff; font-size: 1.1rem; }
.pie__titulo { color: #fff; font-weight: 700; margin: 0 0 8px; }
.pie__lista { list-style: none; padding: 0; margin: 0 0 20px; columns: 1; }
.pie__lista li { padding: 2px 0; font-size: .87rem; }
.pie__tels a { font-weight: 700; }
.pie__abajo {
  border-top: 1px solid var(--linea-osc); margin-top: 30px; padding-top: 18px;
  font-size: .84rem;
}

/* ----------------------------------------------------------------- móvil */

@media (max-width: 900px) {
  .portada__rejilla, .contacto__rejilla, .dos-columnas { grid-template-columns: 1fr; }
  .pie__rejilla { grid-template-columns: 1fr 1fr; }
  .portada { padding: 42px 0 46px; }
}

@media (max-width: 720px) {
  body { font-size: 16px; }
  .menu-boton {
    display: block; background: transparent; border: 2px solid #4a4642;
    color: #fff; font-family: var(--tipo); font-weight: 700; font-size: .9rem;
    padding: 9px 14px; border-radius: 8px; cursor: pointer; order: 3;
  }
  .menu {
    display: none; order: 4; width: 100%; flex-direction: column;
    padding: 6px 0 12px; gap: 0;
  }
  .menu--abierto { display: flex; }
  .menu a { padding: 12px 4px; border-bottom: 1px solid var(--linea-osc); border-radius: 0; }
  .cabecera__fila { flex-wrap: wrap; padding-top: 10px; padding-bottom: 10px; }
  .cabecera__llamar { order: 2; }
  .pie__rejilla { grid-template-columns: 1fr; gap: 26px; }
  .franja { padding: 40px 0; }
  .portada__botones .boton { flex: 1 1 100%; text-align: center; }
}

/* Quien haya elegido menos movimiento en su sistema, que no lo tenga. */
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

@media print {
  .cabecera, .contacto, .pie, .portada__botones { display: none; }
  body { font-size: 12pt; }
  a::after { content: " (" attr(href) ")"; font-size: .85em; color: #555; }
}

/* ===================================================== v2: laser y zoom ===
   Pedro pidio el 07/09/2026 «botones con efecto laser y algun efecto zoom en
   los cuadros». El laser es el mismo truco que en el Monitor: un hilo que
   recorre el borde, con pathLength="100" para que la vuelta dure lo mismo en
   un boton ancho que en uno estrecho.
   ========================================================================= */

.boton { position: relative; overflow: hidden; }
.laser {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; overflow: visible;
}
.laser rect {
  fill: none; stroke: var(--ambar); stroke-width: 3;
  /* Un trozo corto de trazo dando la vuelta a un perimetro de 100. */
  stroke-dasharray: 14 86; stroke-dashoffset: 100;
  opacity: 0; vector-effect: non-scaling-stroke;
}
.boton:hover .laser rect, .boton:focus-visible .laser rect {
  opacity: 1; animation: vuelta 1.5s linear infinite;
}
/* Sobre el boton ambar el hilo tiene que ser oscuro para que se vea. */
.boton--fuerte .laser rect { stroke: var(--obra); }
.boton--wa .laser rect { stroke: #06331a; }
@keyframes vuelta { to { stroke-dashoffset: 0; } }

/* ------------------------------------------------------- zoom de cuadros */
/* Dos momentos: al aparecer en pantalla (lo marca web.js) y al pasar por
   encima. Los dos suaves: un cuadro que da un salto se lee como un fallo. */
.precio, .tarjeta-curso, .portada__caja, .aviso-caja, .formulario {
  transition: transform .35s cubic-bezier(.22, 1, .36, 1),
              box-shadow .35s ease, border-color .2s ease, opacity .45s ease;
}
.precio:hover, .tarjeta-curso:hover {
  transform: translateY(-4px) scale(1.025);
  box-shadow: 0 14px 34px rgba(25, 24, 23, .13);
}
.portada__caja:hover, .formulario:hover { transform: scale(1.012); }
.aviso-caja:hover { transform: scale(1.006); }

.entra { opacity: 0; transform: scale(.965) translateY(10px); }
.entrada { opacity: 1; transform: none; }

/* --------------------------------------- las dos columnas, a la misma altura */
/* Pedro: «alinealo que esta uno mas alto que otro visualmente». Pasa porque
   una columna tiene una linea mas que la otra: al estirarlas las dos a la
   altura de la mas alta y separarlas con una linea, el desnivel desaparece. */
.dos-columnas--igualadas { align-items: stretch; }
.dos-columnas--igualadas > div {
  display: flex; flex-direction: column; justify-content: flex-start;
  padding: 22px 24px; background: var(--hormigon);
  border-radius: 12px; border-left: 4px solid var(--ambar);
}
.dos-columnas--igualadas > div > p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------ aviso de cookies */
.cookies {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: var(--obra); color: #fff;
  border-top: 3px solid var(--ambar);
  box-shadow: 0 -10px 30px rgba(0, 0, 0, .25);
}
.cookies__caja {
  display: flex; align-items: center; gap: 22px;
  padding-top: 16px; padding-bottom: 16px;
}
.cookies p { margin: 0; font-size: .93rem; color: #cbc4bb; }
.cookies p b { color: #fff; }
.cookies a { color: var(--ambar); }
.cookies__botones { display: flex; gap: 10px; flex: none; }
.cookies .boton { color: #fff; border-color: #4a4642; }
.cookies .boton:hover { border-color: var(--ambar); color: var(--ambar); }
.cookies .boton--fuerte, .cookies .boton--fuerte:hover { color: var(--obra); }
@media (max-width: 720px) {
  .cookies__caja { flex-direction: column; align-items: stretch; gap: 12px; }
  .cookies__botones .boton { flex: 1; text-align: center; }
}

/* ---- la tarjeta TPC al lado de «Te llamamos nosotros» ---- */
.formulario__cabecera {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin: 0 0 14px;
}
.formulario__cabecera .formulario__titulo { margin: 0; }
.formulario__tarjeta {
  width: 104px; height: auto; flex: none;
  filter: drop-shadow(0 2px 5px rgba(0,0,0,.18));
}
@media (max-width: 480px) {
  .formulario__tarjeta { width: 78px; }
}

/* La frase de las aulas, en su propia linea. No se pone `nowrap`: en un movil
   estrecho desbordaria y sacaria barra horizontal. */
.linea-entera { display: inline-block; }

/* Botones que van centrados en su parrafo */
.centrado { text-align: center; }