@charset "UTF-8";
/* ============================================================================
   ClubDesk sobre el template Domex.

   Domex viene en coral (#f85e62). El logotipo de ClubDesk lleva un degradado
   magenta -> naranja, así que el acento se cambia a ese magenta y el naranja
   queda de apoyo: mismo esquema —acento caliente sobre casi negro— pero con
   los colores de la marca, no con los de la demo.

   Aquí sólo va lo que el template no trae: el panel de puerta, la línea de
   tiempo, la tabla comparativa y las fichas de módulo. La retícula, la
   tipografía y el patrón de cabecera de sección salen de Bootstrap y de
   style.css.
   ========================================================================= */

:root {
  --cd-fondo:    #1c1c1c;
  --cd-fondo-2:  #232323;
  --cd-fondo-3:  #151515;
  --cd-acento:   #ff2e7e;   /* magenta del logotipo */
  --cd-acento-2: #ff7a2f;   /* naranja del logotipo */
  --cd-texto:    #ffffff;
  --cd-gris:     #9a9a9a;
  --cd-linea:    rgba(255, 255, 255, .09);
  --cd-verde:    #00c766;
  --cd-rojo:     #ef2b3f;
}

/* ── Base ─────────────────────────────────────────────────────────────── */

body.cd-tema {
  background: var(--cd-fondo);
  color: var(--cd-gris);
  font-family: 'Lato', sans-serif;
  font-size: 16px;
  line-height: 1.75;
  overflow-x: hidden;
}

.cd-tema h1, .cd-tema h2, .cd-tema h3, .cd-tema h4 {
  font-family: 'Poppins', sans-serif;
  color: var(--cd-texto);
  margin: 0 0 18px;
  line-height: 1.15;
}

.cd-tema a { color: var(--cd-acento); text-decoration: none; }
.cd-tema a:hover { color: var(--cd-acento-2); }

.cd-tema ::selection { background: var(--cd-acento); color: #fff; }

.cd-tema :focus-visible {
  outline: 2px solid var(--cd-acento);
  outline-offset: 3px;
}

.cd-saltar {
  position: absolute; left: -9999px; top: 0; z-index: 300;
  background: var(--cd-acento); color: #fff;
  padding: 14px 24px; font-weight: 700;
}
.cd-saltar:focus { left: 0; color: #fff; }

.cd-vo {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* ── Secciones ────────────────────────────────────────────────────────── */

.cd-sec { padding: 100px 0; position: relative; }
.cd-sec--alt   { background: var(--cd-fondo-2); }
.cd-sec--hondo { background: var(--cd-fondo-3); }
@media (max-width: 767px) { .cd-sec { padding: 64px 0; } }

/* Cabecera de sección: el patrón del template — título en el color de acento
   con las barras de ecualizador debajo. */
.cd-cab { text-align: center; margin-bottom: 60px; }
.cd-cab--izq { text-align: left; }

.cd-cab__icono {
  font-size: 38px; color: var(--cd-acento);
  display: block; margin-bottom: 16px; line-height: 1;
}
/* flaticon.css fija font-size:16px en el pseudoelemento y aplastaba todos los
   iconos al mismo tamaño. Que hereden el del elemento que los pinta. */
.cd-cab__icono::before,
.cd-ficha__icono::before,
.cd-campo__i::before,
.cd-topbar i::before,
.cd-pie i::before { font-size: inherit; }
.cd-cab h2 {
  font-size: clamp(24px, 3.2vw, 34px);
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--cd-acento);
  margin-bottom: 18px;
}
.cd-cab__lead {
  max-width: 620px; margin: 18px auto 0;
  color: var(--cd-gris);
}
.cd-cab--izq .cd-cab__lead { margin-left: 0; }

/* Barras de ecualizador: la firma del template */
.cd-barras {
  display: flex; align-items: flex-end; justify-content: center;
  gap: 3px; height: 18px; margin: 0 auto;
}
.cd-cab--izq .cd-barras { justify-content: flex-start; }
.cd-barras span {
  display: block; width: 3px; height: 6px;
  background: var(--cd-acento);
}
.cd-barras span:nth-child(2), .cd-barras span:nth-child(8)  { height: 14px; }
.cd-barras span:nth-child(3), .cd-barras span:nth-child(7)  { height: 18px; }
.cd-barras span:nth-child(4), .cd-barras span:nth-child(6)  { height: 10px; }
.cd-barras span:nth-child(5) { height: 16px; }

@media (prefers-reduced-motion: no-preference) {
  .cd-barras span { animation: cd-eq .9s ease-in-out infinite alternate; }
  .cd-barras span:nth-child(2) { animation-delay: .1s }
  .cd-barras span:nth-child(3) { animation-delay: .2s }
  .cd-barras span:nth-child(4) { animation-delay: .3s }
  .cd-barras span:nth-child(5) { animation-delay: .15s }
  .cd-barras span:nth-child(6) { animation-delay: .25s }
  .cd-barras span:nth-child(7) { animation-delay: .05s }
  .cd-barras span:nth-child(8) { animation-delay: .35s }
  @keyframes cd-eq { to { height: 4px; } }
}

/* ── Botones ──────────────────────────────────────────────────────────── */

/* .cd-tema a tiene más especificidad que .cd-btn y le ganaba el color: el
   texto salía rosa sobre fondo rosa, o sea invisible. Se iguala el peso. */
.cd-tema .cd-btn,
.cd-btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: 'Poppins', sans-serif;
  font-size: 14px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .06em;
  padding: 14px 32px;
  border-radius: 40px;
  border: 1px solid var(--cd-acento);
  background: var(--cd-acento);
  color: #fff;
  transition: .25s;
  cursor: pointer;
  white-space: nowrap;
}
.cd-tema .cd-btn:hover, .cd-tema .cd-btn:focus-visible,
.cd-btn:hover, .cd-btn:focus-visible {
  background: transparent; color: var(--cd-acento);
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(255, 46, 126, .28);
}
.cd-tema .cd-btn--linea { background: transparent; color: var(--cd-texto); border-color: rgba(255,255,255,.35); }
.cd-tema .cd-btn--linea:hover { border-color: var(--cd-acento); color: var(--cd-acento); box-shadow: none; }
.cd-tema .cd-btn--wa { background: #25d366; border-color: #25d366; }
.cd-tema .cd-btn--wa:hover { background: transparent; color: #25d366; box-shadow: 0 10px 26px rgba(37,211,102,.25); }
.cd-btn--grande { padding: 17px 40px; font-size: 15px; }
.cd-btn--bloque { width: 100%; justify-content: center; }

/* ── Barra de navegación ──────────────────────────────────────────────── */

.cd-topbar {
  background: var(--cd-fondo-3);
  border-bottom: 1px solid var(--cd-linea);
  font-size: 13px;
  /* Con 10px la línea de separación quedaba pegada al logo de abajo. */
  padding: 15px 0;
}
.cd-topbar ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 26px; flex-wrap: wrap; align-items: center; }
.cd-topbar li { color: var(--cd-gris); }
.cd-topbar i { color: var(--cd-acento); margin-right: 7px; }
.cd-topbar .cd-topbar__der { margin-left: auto; }
.cd-topbar__in { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
@media (max-width: 767px) { .cd-topbar { display: none; } }

.cd-nav {
  position: sticky; top: 0; z-index: 200;
  /* Un punto más clara que el hero. Antes era el MISMO color (#1c1c1c), así
     que la barra no se distinguía del fondo y el logo parecía flotar sobre
     la portada en vez de estar dentro de una barra. */
  background: rgba(37, 37, 37, .97);
  border-bottom: 1px solid rgba(255, 255, 255, .14);
  backdrop-filter: blur(8px);
  /* La altura va en el <header>, no sólo en el div de dentro: si el interior
     mide más que su contenedor, el logo asoma por debajo del fondo de la
     barra, que es lo que se veía. */
  height: 105px;
}
/* El alto tiene que bajar por toda la cadena: header -> .container -> .cd-nav__in.
   Sin la regla del contenedor intermedio, el interior medía lo que el logo (46px)
   y todo quedaba pegado arriba, con 59px de aire muerto debajo. */
.cd-nav > .container { height: 100%; }
.cd-nav__in { display: flex; align-items: center; height: 100%; gap: 24px; }
.cd-nav__logo img { height: 46px; width: auto; }
@media (max-width: 575px) { .cd-nav__logo img { height: 36px; } }

.cd-nav__menu { display: flex; gap: 26px; margin: 0 auto; padding: 0; list-style: none; }
@media (max-width: 1439px) { .cd-nav__menu { gap: 18px; } }
.cd-tema .cd-nav__menu a {
  font-family: 'Poppins', sans-serif;
  font-size: 14px; font-weight: 400;
  text-transform: uppercase; letter-spacing: .04em;
  color: var(--cd-texto);
  padding: 6px 0;
  position: relative;
  /* Sin esto "LA NOCHE" se parte en dos líneas en cuanto la barra se llena. */
  white-space: nowrap;
}
.cd-nav__menu a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0;
  height: 2px; background: var(--cd-acento); transition: right .25s;
}
.cd-nav__menu a:hover, .cd-nav__menu a[aria-current="true"] { color: var(--cd-acento); }
.cd-nav__menu a:hover::after, .cd-nav__menu a[aria-current="true"]::after { right: 0; }

.cd-nav__acc { display: flex; gap: 10px; align-items: center; margin-left: auto; }

/* En la barra los botones van más discretos: a tamaño de hero comían
   demasiado espacio y competían con el menú. */
.cd-tema .cd-nav__acc .cd-btn {
  font-size: 12px;
  letter-spacing: .08em;
  padding: 10px 20px;
}
.cd-tema .cd-nav__acc .cd-btn:hover { transform: none; box-shadow: 0 6px 16px rgba(255,46,126,.25); }
.cd-nav__movil { display: none; }

/* El de WhatsApp es el primero que sobra cuando aprieta el espacio: ya está
   en la barra superior y en el botón flotante. El CTA principal se queda. */
@media (max-width: 1399px) {
  .cd-tema .cd-nav__acc .cd-btn--wa { display: none; }
}
@media (max-width: 1199px) {
  .cd-nav__menu { display: none; }
  .cd-nav__movil { display: inline-flex; }
  .cd-nav__acc .cd-btn { display: none; }
}

.cd-menum > summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 9px;
  font-family: 'Poppins', sans-serif; font-size: 13px;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--cd-texto);
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 40px; padding: 10px 18px;
}
.cd-menum > summary::-webkit-details-marker { display: none; }
.cd-menum[open] > summary { border-color: var(--cd-acento); color: var(--cd-acento); }
.cd-menum__panel {
  position: fixed; inset: 105px 0 0 0;
  background: var(--cd-fondo);
  padding: 40px 24px; overflow-y: auto; z-index: 199;
}
.cd-tema .cd-menum__panel a {
  display: block;
  font-family: 'Poppins', sans-serif; font-weight: 500;
  font-size: clamp(20px, 6vw, 26px);
  text-transform: uppercase;
  color: var(--cd-texto);
  padding: 16px 0;
  border-bottom: 1px solid var(--cd-linea);
}
.cd-menum__panel a:hover { color: var(--cd-acento); }
.cd-menum__panel .cd-btn { margin-top: 26px; }

/* ── Hero ─────────────────────────────────────────────────────────────── */

.cd-hero {
  position: relative;
  padding: 96px 0 110px;
  background:
    radial-gradient(1100px 620px at 78% 12%, rgba(255,46,126,.20), transparent 62%),
    radial-gradient(760px 520px at 8% 88%, rgba(255,122,47,.13), transparent 60%),
    var(--cd-fondo);
  overflow: hidden;
}
.cd-hero::after {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size: 58px 58px;
  pointer-events: none;
}
.cd-hero > .container { position: relative; z-index: 2; }

.cd-hero__et {
  font-family: 'Poppins', sans-serif;
  font-size: 12px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .22em;
  color: var(--cd-acento);
  display: inline-flex; align-items: center; gap: 12px;
  margin-bottom: 22px;
}
.cd-hero__et::before { content: ""; width: 34px; height: 2px; background: var(--cd-acento); }

.cd-hero h1 {
  font-size: clamp(38px, 5.4vw, 74px);
  font-weight: 700;
  line-height: 1.03;
  letter-spacing: -.015em;
  margin-bottom: 26px;
}
.cd-hero h1 .cd-res {
  background: linear-gradient(100deg, var(--cd-acento) 15%, var(--cd-acento-2) 85%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--cd-acento);
}
.cd-hero__lead { font-size: 18px; max-width: 33em; }
.cd-hero__ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }

/* Hero a una columna, centrado. Sin el panel a la derecha el titular puede
   respirar más y el ancho de línea se controla con max-width, no con la
   retícula. */
.cd-hero--centro { padding: 120px 0 130px; text-align: center; }
.cd-hero--centro .cd-hero__et { justify-content: center; }
/* Dos líneas, y la primera entera: «Tu discoteca vende las entradas» arriba y
   «No la ticketera» debajo.

   El tamaño va en vw y no en px porque la línea tiene que caber SIN partirse:
   medida, ocupa 17 veces el tamaño de letra. Con el contenedor a un 79 % del
   ancho de pantalla, 4,4vw es lo que entra justo con holgura. El tope de 64px
   evita que en pantallas muy anchas crezca más que el contenedor, que se
   queda en 1140. */
.cd-hero--centro h1 {
  font-size: min(4.2vw, 60px);
  margin-inline: auto;
  max-width: none;
}

/* Ancho continuo: sin escalones no hace falta un tope por cada franja. */
.cd-hero__env {
  width: 100%;
  max-width: 1400px;
  margin-inline: auto;
  padding-inline: 24px;
}
.cd-hero__l1, .cd-hero__l2 { display: block; }
.cd-hero__l1 { white-space: nowrap; }
.cd-hero__l2 { margin-top: .04em; }

@media (max-width: 767px) {
  /* Por debajo de tablet la línea entera exigiría una letra ridícula: se deja
     partir y se recupera tamaño. */
  .cd-hero--centro h1 { font-size: clamp(30px, 7.6vw, 44px); }
  .cd-hero__l1 { white-space: normal; }
}
.cd-hero--centro .cd-hero__lead { margin-inline: auto; max-width: 46ch; }
.cd-hero--centro .cd-hero__ctas { justify-content: center; }
.cd-hero--centro .cd-hero__sellos { justify-content: center; margin-top: 46px; }
@media (max-width: 767px) {
  .cd-hero--centro { padding: 70px 0 80px; }
  .cd-hero--centro h1 { max-width: none; }
}

.cd-hero__sellos { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 40px; padding: 0; list-style: none; }
.cd-hero__sellos li {
  font-family: 'Poppins', sans-serif;
  font-size: 12px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .1em;
  color: var(--cd-texto);
  border: 1px solid var(--cd-linea);
  border-radius: 40px;
  padding: 8px 18px;
  background: rgba(255,255,255,.03);
}
.cd-hero__sellos i { color: var(--cd-acento); margin-right: 8px; }

/* ── Marquesina ───────────────────────────────────────────────────────── */

.cd-marq {
  background: linear-gradient(90deg, var(--cd-acento) 0%, var(--cd-acento-2) 100%);
  overflow: hidden; white-space: nowrap; padding: 16px 0;
}
.cd-marq__pista { display: inline-flex; }
.cd-marq__gr { display: inline-flex; }
.cd-marq b {
  font-family: 'Poppins', sans-serif; font-weight: 600;
  font-size: clamp(14px, 1.5vw, 18px);
  text-transform: uppercase; letter-spacing: .1em;
  color: #fff; padding-inline: 30px;
}
.cd-marq b::after { content: "◆"; margin-left: 30px; opacity: .55; font-size: .7em; vertical-align: middle; }
@media (prefers-reduced-motion: no-preference) {
  .cd-marq__pista { animation: cd-correr 30s linear infinite; }
  .cd-marq:hover .cd-marq__pista { animation-play-state: paused; }
  @keyframes cd-correr { to { transform: translateX(-50%); } }
}

/* ── Fichas ───────────────────────────────────────────────────────────── */

.cd-ficha {
  height: 100%;
  background: var(--cd-fondo-2);
  border: 1px solid var(--cd-linea);
  border-radius: 12px;
  padding: 30px 26px;
  transition: .25s;
  position: relative;
  overflow: hidden;
}
.cd-sec--alt .cd-ficha { background: var(--cd-fondo); }
.cd-ficha::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(var(--cd-acento), var(--cd-acento-2));
  transform: scaleY(0); transform-origin: top; transition: transform .28s;
}
.cd-ficha:hover { transform: translateY(-5px); border-color: rgba(255,46,126,.4); }
.cd-ficha:hover::before { transform: scaleY(1); }
.cd-ficha__n {
  font-family: 'Poppins', sans-serif; font-size: 11px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--cd-acento); display: block; margin-bottom: 10px;
}
.cd-ficha__icono { font-size: 30px; color: var(--cd-acento); display: block; margin-bottom: 16px; line-height: 1; }
.cd-ficha h3 { font-size: 18px; font-weight: 600; text-transform: uppercase; margin-bottom: 10px; }
.cd-ficha p { font-size: 14px; margin: 0; }
.cd-ficha ul { list-style: none; margin: 16px 0 0; padding: 0; }
.cd-ficha li { font-size: 13px; padding-left: 20px; position: relative; margin-bottom: 6px; }
.cd-ficha li::before {
  content: "\f105"; font-family: "Font Awesome 5 Free"; font-weight: 900;
  position: absolute; left: 0; color: var(--cd-acento);
}

/* ── Sustituye ────────────────────────────────────────────────────────── */

.cd-sust { text-align: center; padding: 26px 18px; }
.cd-sust__no {
  display: block; font-size: 15px; color: #6e6e6e;
  text-decoration: line-through; text-decoration-color: var(--cd-rojo);
  text-decoration-thickness: 2px; margin-bottom: 14px;
}
.cd-sust__fl { color: var(--cd-acento); font-size: 20px; display: block; margin-bottom: 14px; }
.cd-sust__si {
  font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 17px;
  color: var(--cd-texto); line-height: 1.35;
}

/* ── La noche ─────────────────────────────────────────────────────────── */

.cd-noche { list-style: none; margin: 0; padding: 0; position: relative; }
.cd-noche::before {
  content: ""; position: absolute; left: 92px; top: 8px; bottom: 8px; width: 1px;
  background: linear-gradient(var(--cd-acento), rgba(255,122,47,.25), transparent);
}
.cd-noche li {
  display: grid; grid-template-columns: 92px 1fr; gap: 34px;
  padding: 20px 0; align-items: baseline; position: relative;
}
.cd-noche li::before {
  content: ""; position: absolute; left: 88px; top: 30px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--cd-acento); box-shadow: 0 0 0 4px rgba(255,46,126,.18);
}
.cd-noche__h {
  font-family: 'Poppins', sans-serif; font-weight: 700;
  font-size: 20px; color: var(--cd-texto); text-align: right;
}
.cd-noche__d { font-size: 16px; }
@media (max-width: 767px) {
  .cd-noche::before, .cd-noche li::before { display: none; }
  .cd-noche li { grid-template-columns: 1fr; gap: 4px; }
  .cd-noche__h { text-align: left; color: var(--cd-acento); }
}

/* ── Entrada de ejemplo ───────────────────────────────────────────────── */

.cd-stub {
  background: var(--cd-fondo-3);
  border: 1px solid var(--cd-linea);
  border-radius: 12px;
  padding: 26px;
  max-width: 330px;
  position: relative;
}
.cd-stub::before, .cd-stub::after {
  content: ""; position: absolute; top: 64%;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--cd-fondo-2);
}
.cd-sec--alt .cd-stub::before, .cd-sec--alt .cd-stub::after { background: var(--cd-fondo-2); }
.cd-stub::before { left: -12px; }
.cd-stub::after  { right: -12px; }
.cd-stub__et { font-size: 11px; text-transform: uppercase; letter-spacing: .16em; color: var(--cd-acento); }
.cd-stub__tit { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 21px; color: #fff; margin: 6px 0 18px; }
.cd-stub__qr {
  width: 104px; height: 104px; border-radius: 6px;
  background:
    conic-gradient(from 0deg, #fff 25%, transparent 0 50%, #fff 0 75%, transparent 0),
    conic-gradient(from 90deg, #fff 25%, transparent 0 50%, #fff 0 75%, transparent 0);
  background-size: 13px 13px, 21px 21px;
  border: 3px solid #fff;
}
.cd-stub__cod {
  font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 17px;
  letter-spacing: .08em; color: #fff;
  border-top: 1px dashed var(--cd-linea); margin-top: 20px; padding-top: 16px;
}
.cd-stub__pie { font-size: 12px; color: var(--cd-gris); }

.cd-punto { margin-bottom: 30px; }
.cd-punto h3 { font-size: 18px; font-weight: 600; margin-bottom: 8px; }
.cd-punto p { font-size: 15px; margin: 0; }
.cd-punto__i { color: var(--cd-acento); margin-right: 10px; }

/* ── Tablas ───────────────────────────────────────────────────────────── */

.cd-tabla-env { overflow-x: auto; }
.cd-tabla { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 480px; }
.cd-tabla th, .cd-tabla td { padding: 15px 14px; text-align: left; border-bottom: 1px solid var(--cd-linea); }
.cd-tabla thead th {
  font-family: 'Poppins', sans-serif; font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .12em; color: var(--cd-texto);
}
.cd-tabla tbody th { font-weight: 400; color: var(--cd-texto); }
.cd-tabla td.num, .cd-tabla th.num { text-align: right; font-family: 'Poppins', sans-serif; }
.cd-tabla tfoot td { font-weight: 700; color: #fff; border-bottom: 0; border-top: 2px solid var(--cd-acento); }
.cd-tabla--comp td:last-child, .cd-tabla--comp th:last-child { background: rgba(255,46,126,.09); color: #fff; }
.cd-si { color: var(--cd-verde); margin-right: 9px; }
.cd-no { color: var(--cd-rojo); margin-right: 9px; }

/* ── Cifras ───────────────────────────────────────────────────────────── */

.cd-cifra { text-align: center; padding: 26px 12px; border: 1px solid var(--cd-linea); border-radius: 12px; height: 100%; }
.cd-cifra__v {
  font-family: 'Poppins', sans-serif; font-weight: 700;
  font-size: clamp(22px, 2.6vw, 30px); color: #fff; display: block;
  font-variant-numeric: tabular-nums;
}
.cd-cifra__et { font-size: 11px; text-transform: uppercase; letter-spacing: .14em; color: var(--cd-gris); }
.cd-cifra--mal .cd-cifra__v { color: var(--cd-rojo); }

/* ── Sello grande ─────────────────────────────────────────────────────── */

.cd-sello {
  display: inline-block;
  font-family: 'Poppins', sans-serif; font-weight: 700;
  font-size: clamp(24px, 3.6vw, 40px);
  text-transform: uppercase; letter-spacing: -.01em;
  padding: 18px 34px; border-radius: 10px;
  border: 2px solid var(--cd-acento); color: var(--cd-acento);
  line-height: 1;
}

/* ── Tiras ────────────────────────────────────────────────────────────── */

.cd-tiras { display: flex; flex-wrap: wrap; gap: 12px; padding: 0; list-style: none; justify-content: center; }
.cd-tiras li {
  border: 1px solid var(--cd-linea); border-radius: 40px;
  padding: 10px 22px; font-size: 14px; color: var(--cd-texto);
  transition: .2s;
}
.cd-tiras li:hover { border-color: var(--cd-acento); color: var(--cd-acento); }

/* ── Pasos ────────────────────────────────────────────────────────────── */

.cd-paso { text-align: center; padding: 0 16px; }
.cd-paso__n {
  width: 62px; height: 62px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 22px;
  color: #fff; margin-bottom: 20px;
  background: linear-gradient(135deg, var(--cd-acento), var(--cd-acento-2));
}
.cd-paso h3 { font-size: 18px; font-weight: 600; }
.cd-paso p { font-size: 14px; }

/* ── FAQ ──────────────────────────────────────────────────────────────── */

.cd-faq details {
  border: 1px solid var(--cd-linea); border-radius: 10px;
  margin-bottom: 12px; background: var(--cd-fondo-2);
  transition: border-color .2s;
}
.cd-sec--alt .cd-faq details { background: var(--cd-fondo); }
.cd-faq details[open] { border-color: rgba(255,46,126,.45); }
.cd-faq summary {
  list-style: none; cursor: pointer; position: relative;
  padding: 18px 56px 18px 22px;
  font-family: 'Poppins', sans-serif; font-weight: 500; font-size: 16px;
  color: var(--cd-texto);
}
.cd-faq summary::-webkit-details-marker { display: none; }
.cd-faq summary::after {
  content: "\f067"; font-family: "Font Awesome 5 Free"; font-weight: 900;
  position: absolute; right: 22px; top: 50%; transform: translateY(-50%);
  color: var(--cd-acento); font-size: 13px;
}
.cd-faq details[open] summary::after { content: "\f068"; }
.cd-faq summary:hover { color: var(--cd-acento); }
.cd-faq__r { padding: 0 56px 20px 22px; font-size: 15px; }

/* ── Formulario ───────────────────────────────────────────────────────── */

.cd-form-caja {
  background: var(--cd-fondo-2);
  border: 1px solid var(--cd-linea);
  border-radius: 18px;
  padding: 42px;
}
@media (max-width: 767px) { .cd-form-caja { padding: 26px 20px; } }

.cd-campo { margin-bottom: 26px; position: relative; }
.cd-campo label {
  display: block;
  font-family: 'Poppins', sans-serif; font-size: 11px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .14em;
  color: var(--cd-gris); margin-bottom: 8px;
}
.cd-campo input, .cd-campo select, .cd-campo textarea {
  width: 100%;
  background: transparent;
  border: 0; border-bottom: 1px solid rgba(255,255,255,.22);
  color: #fff; font-family: 'Lato', sans-serif; font-size: 16px;
  padding: 10px 30px 10px 0;
  border-radius: 0;
  appearance: none;
  transition: border-color .2s;
}
.cd-campo textarea { min-height: 96px; resize: vertical; padding-right: 0; }
.cd-campo input:focus, .cd-campo select:focus, .cd-campo textarea:focus {
  outline: none; border-bottom-color: var(--cd-acento);
}
.cd-campo select option { background: var(--cd-fondo-2); color: #fff; }
.cd-campo__i {
  position: absolute; right: 4px; bottom: 14px;
  color: var(--cd-acento); pointer-events: none; font-size: 14px;
}
.cd-campo .cd-ayuda { font-size: 12px; color: var(--cd-gris); margin-top: 7px; display: block; }
.cd-campo--mal input, .cd-campo--mal select, .cd-campo--mal textarea { border-bottom-color: var(--cd-rojo); }
.cd-campo .cd-mal { font-size: 12px; color: var(--cd-rojo); margin-top: 7px; display: block; }

.cd-consent { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 26px; }
.cd-consent input { width: 20px; height: 20px; flex: none; margin-top: 3px; accent-color: var(--cd-acento); }
.cd-consent label { font-size: 14px; color: var(--cd-gris); text-transform: none; letter-spacing: 0; font-family: 'Lato', sans-serif; }

.cd-trampa { position: absolute !important; left: -9999px; opacity: 0; height: 0; width: 0; overflow: hidden; }

.cd-aviso-mal {
  border: 1px solid var(--cd-rojo); border-radius: 8px;
  background: rgba(239,43,63,.1); color: #ffb3bb;
  padding: 15px 18px; font-size: 14px; margin-bottom: 26px;
}

.cd-wa-caja {
  border: 1px solid var(--cd-linea); border-radius: 18px;
  padding: 34px; text-align: center; background: var(--cd-fondo-2);
}
.cd-wa-caja i { font-size: 42px; color: #25d366; margin-bottom: 16px; display: block; }
.cd-wa-caja h3 { font-size: 19px; }
.cd-wa-caja p { font-size: 14px; }

/* ── Pie ──────────────────────────────────────────────────────────────── */

.cd-pie { background: var(--cd-fondo-3); padding: 76px 0 0; border-top: 1px solid var(--cd-linea); }
.cd-pie h2 {
  font-family: 'Poppins', sans-serif; font-size: 13px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .14em; color: #fff;
  margin-bottom: 22px; position: relative; padding-bottom: 12px;
}
.cd-pie h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 34px; height: 2px; background: var(--cd-acento); }
.cd-pie ul { list-style: none; margin: 0; padding: 0; }
.cd-pie li { margin-bottom: 10px; font-size: 14px; }
.cd-tema .cd-pie a { color: var(--cd-gris); }
.cd-pie a:hover { color: var(--cd-acento); }
.cd-pie__logo img { height: 48px; width: auto; margin-bottom: 20px; }
.cd-pie__lema { font-size: 14px; max-width: 32ch; }
.cd-pie i { color: var(--cd-acento); width: 18px; margin-right: 8px; }
.cd-pie__abajo {
  border-top: 1px solid var(--cd-linea);
  margin-top: 56px; padding: 22px 0;
  font-size: 12.5px; color: #767676;
  display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between;
}

/* ── Pie geográfico (8.5) ────────────────────────────────────────────── */

/* <details> nativo: los enlaces estan en el HTML aunque el bloque este
   cerrado, que es justo lo que tiene que ver el rastreador. Sin JS. */

.cd-pie-geo { border-top: 1px solid var(--cd-linea); background: var(--cd-fondo-3); }

.cd-geo-caja { border-bottom: 1px solid var(--cd-linea); }
.cd-geo-caja:last-child { border-bottom: 0; }

.cd-geo-caja > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 2px; cursor: pointer;
  font-family: 'Poppins', sans-serif; font-size: 13px; font-weight: 600;
  color: var(--cd-gris); list-style: none;
}
/* El triangulo por defecto se quita en los dos motores: WebKit usa un
   pseudoelemento propio y el resto entiende list-style. */
.cd-geo-caja > summary::-webkit-details-marker { display: none; }
.cd-geo-caja > summary:hover { color: var(--cd-texto); }
.cd-geo-caja > summary i { color: var(--cd-acento); margin-right: 9px; }

.cd-geo-mas {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid var(--cd-linea);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; line-height: 1; transition: transform .2s, border-color .2s;
}
.cd-geo-caja[open] .cd-geo-mas { transform: rotate(45deg); border-color: var(--cd-acento); }
@media (prefers-reduced-motion: reduce) { .cd-geo-mas { transition: none; } }

.cd-geo-rejilla {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px 20px; padding: 4px 0 24px;
}
.cd-tema .cd-geo-rejilla a {
  color: #767676; font-size: 12.5px; line-height: 1.5;
  padding: 3px 0; overflow-wrap: anywhere;
}
.cd-tema .cd-geo-rejilla a:hover { color: var(--cd-acento); }

@media (max-width: 1199px) { .cd-geo-rejilla { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 767px) {
  .cd-geo-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 14px; }
  .cd-geo-caja > summary { font-size: 12.5px; padding: 16px 2px; }
}

/* ── Páginas geográficas ─────────────────────────────────────────────── */

.cd-miga { font-size: 12.5px; color: #767676; padding: 14px 0 0; }
.cd-tema .cd-miga a { color: #9a9a9a; }
.cd-tema .cd-miga a:hover { color: var(--cd-acento); }
.cd-miga span[aria-current] { color: var(--cd-texto); }

.cd-local__txt { max-width: 72ch; }
.cd-local__txt p { margin-bottom: 16px; }
.cd-local__h3 { font-size: 17px; margin: 34px 0 4px; }

.cd-cercanas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.cd-tema .cd-cercanas a {
  border: 1px solid var(--cd-linea); border-radius: 999px;
  padding: 8px 16px; font-size: 13px; color: var(--cd-gris);
}
.cd-tema .cd-cercanas a:hover { border-color: var(--cd-acento); color: var(--cd-acento); }

/* Cobertura: indice de las provincias */
.cd-cobertura { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 28px; }
.cd-cobertura__prov { border-bottom: 1px solid var(--cd-linea); padding-bottom: 12px; }
.cd-cobertura__prov b { display: block; font-size: 15px; }
.cd-cobertura__prov span { font-size: 12.5px; color: #767676; }
@media (max-width: 991px) { .cd-cobertura { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575px) { .cd-cobertura { grid-template-columns: 1fr; } }

/* ── WhatsApp flotante ────────────────────────────────────────────────── */

.cd-tema .cd-wa-flota {
  position: fixed; right: 20px; bottom: 20px; z-index: 190;
  width: 56px; height: 56px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #25d366; color: #fff; font-size: 26px;
  box-shadow: 0 10px 30px rgba(37,211,102,.4);
  opacity: 0; visibility: hidden; transition: .25s;
}
.cd-wa-flota.on { opacity: 1; visibility: visible; }
.cd-wa-flota:hover { color: #fff; transform: scale(1.06); }

/* ── Aviso de maqueta ─────────────────────────────────────────────────── */

.cd-maqueta {
  background: var(--cd-acento-2); color: #1c1c1c;
  font-family: 'Poppins', sans-serif; font-size: 12px; font-weight: 600;
  text-align: center; padding: 9px 16px; letter-spacing: .04em;
}
.cd-maqueta a { color: #1c1c1c; text-decoration: underline; }

/* ── Páginas de texto (legales) ───────────────────────────────────────── */

.cd-texto { max-width: 74ch; }
.cd-texto h2 {
  font-size: 19px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .02em; color: var(--cd-texto);
  margin: 40px 0 14px; padding-bottom: 10px;
  border-bottom: 1px solid var(--cd-linea);
}
.cd-texto h3 { font-size: 16px; font-weight: 600; margin: 26px 0 8px; }
.cd-texto p { margin-bottom: 16px; }
.cd-texto ul, .cd-texto ol { padding-left: 22px; margin-bottom: 18px; }
.cd-texto li { margin-bottom: 8px; }
.cd-texto code {
  font-family: ui-monospace, Consolas, monospace; font-size: .9em;
  background: rgba(255,255,255,.07); padding: 2px 6px; border-radius: 4px; color: #fff;
}
.cd-texto__fecha {
  font-family: 'Poppins', sans-serif; font-size: 11px;
  text-transform: uppercase; letter-spacing: .14em; color: var(--cd-acento);
}
.cd-texto .aviso {
  border: 1px solid var(--cd-acento-2); border-left-width: 4px;
  border-radius: 8px; background: rgba(255,122,47,.08);
  padding: 16px 20px; font-size: 14px; margin-bottom: 26px;
}
.cd-texto mark { background: var(--cd-acento-2); color: #1c1c1c; padding: 1px 6px; border-radius: 3px; }


/* ── Selector de idioma (§9.6 del brief) ──────────────────────────────────
   Cada lengua en su propio idioma, nunca traducida, y sin banderas: no hay
   bandera del gallego ni del aragonés, y la de España para "castellano"
   sobra. Las que aún no tienen traducción se ven pero no son enlace: llevar
   a una página a medio traducir es peor que no ofrecerla. */

.cd-idiomas { display: flex; flex-wrap: wrap; gap: 0; align-items: center; }
.cd-idiomas li { display: flex; align-items: center; }
.cd-idiomas li + li::before {
  content: "·";
  color: #6a6a6a;
  /* El punto separa, no aísla: 4px a cada lado. Con 9 parecían tres cosas
     distintas en vez de una lista. */
  margin: 0 4px;
  line-height: 1;
}
/* .cd-topbar ul le imponía 26px de hueco, que con el punto en medio dejaba
   los idiomas como tres cosas sueltas. Se iguala la especificidad. */
.cd-topbar .cd-idiomas { gap: 0; }
.cd-idioma {
  font-family: 'Poppins', sans-serif;
  font-size: 12px; letter-spacing: .04em;
  color: var(--cd-gris);
  white-space: nowrap;
}
.cd-tema a.cd-idioma:hover { color: var(--cd-acento); }
.cd-idioma--on { color: var(--cd-acento); font-weight: 600; }
 /* .cd-tema a pesa más que .cd-idioma--pronto y las pintaba a todas del color
   de acento, como si estuvieran traducidas. Se iguala la especificidad. */
.cd-tema a.cd-idioma--pronto { color: #6a6a6a; }
.cd-tema a.cd-idioma--pronto:hover { color: var(--cd-gris); }
.cd-idioma--pronto { color: #6a6a6a; }
@media (max-width: 991px) {
  .cd-idiomas li:nth-child(n+5) { display: none; }
}


/* ── Aviso de cookies ─────────────────────────────────────────────────────
   Informativo, no bloqueante: la única cookie del sitio es técnica y está
   exenta de consentimiento. Se apoya abajo y no tapa el contenido. */

.cd-cookies {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 195;
  background: var(--cd-fondo-2);
  border: 1px solid var(--cd-linea);
  border-left: 3px solid var(--cd-acento);
  border-radius: 12px;
  box-shadow: 0 20px 50px rgba(0,0,0,.55);
  opacity: 0; transform: translateY(14px);
  transition: opacity .3s, transform .3s;
}
.cd-cookies.on { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .cd-cookies { transition: none; }
}

.cd-cookies__in {
  display: flex; align-items: center; gap: 22px;
  padding: 18px 22px;
  max-width: var(--cd-ancho, 1140px); margin-inline: auto;
}
.cd-cookies__txt { margin: 0; font-size: 14px; line-height: 1.6; }
.cd-cookies__txt i { color: var(--cd-acento); margin-right: 9px; }
.cd-cookies__txt strong { color: var(--cd-texto); }
/* Aceptar y rechazar, del mismo tamaño y en el mismo sitio: si rechazar
   costase más que aceptar, el consentimiento no sería libre. */
.cd-cookies__acc { display: flex; flex: none; gap: 10px; }
.cd-tema .cd-cookies .cd-btn { flex: none; font-size: 12px; padding: 11px 24px; }
.cd-tema .cd-cookies .cd-btn--linea { padding: 11px 24px; }

/* Botón para revocar desde la política de cookies. Lo destapa el JS: sin JS no
   habría banner que devolver y sería un botón que no hace nada. */
.cd-revocar { margin-top: 6px; }

/* En móvil el flotante de WhatsApp le quitaría sitio */
@media (max-width: 767px) {
  .cd-cookies { left: 10px; right: 10px; bottom: 10px; }
  .cd-cookies__in { flex-direction: column; align-items: stretch; gap: 14px; padding: 16px 18px; }
  .cd-cookies__txt { font-size: 13px; }
  .cd-cookies__acc { gap: 8px; }
  .cd-tema .cd-cookies .cd-btn { flex: 1 1 0; width: auto; justify-content: center; padding: 12px 10px; }
  .cd-cookies.on ~ .cd-wa-flota { bottom: 150px; }
}

/* ── reCAPTCHA v3 ─────────────────────────────────────────────────────────
   La insignia flotante de Google se queda abajo a la derecha, justo encima
   del botón de WhatsApp. Se oculta, que Google lo permite expresamente a
   cambio de publicar el aviso con los dos enlaces junto al formulario: eso
   es lo que hace .cd-rc-aviso. */
.grecaptcha-badge { visibility: hidden; }

.cd-rc-aviso {
  margin-top: 10px;
  font-size: 11px;
  line-height: 1.6;
  color: var(--cd-gris);
  opacity: .75;
}
.cd-rc-aviso a { color: inherit; text-decoration: underline; }
.cd-rc-aviso a:hover, .cd-rc-aviso a:focus-visible { color: var(--cd-acento); }

/* Mientras se pide la ficha a Google el botón queda inerte. Sin esto no se
   ve nada y da la sensación de que el envío no ha hecho caso. */
.cd-btn--esperando { opacity: .6; cursor: progress; }