/* reskin.css — generado por aplicar_skin.py. NO editar a mano:
   se regenera desde _rediseno/tema/. Web: gggbis */


/* ===== hk-componentes.css ===== */
/* ==========================================================================
   SISTEMA DE DISEÑO "CLARO"  ·  componentes nuevos (prefijo .hk-)
   Inspirado en la arquitectura visual de henrykent.com:
   fondos claros alternos, titulares Playfair, cuerpo Poppins, botones píldora,
   bandas navy de contraste y tarjetas sobre bruma azulada.

   Los tokens (--hk-*) los define cada web en su bloque :root propio, para que
   cada una conserve su acento de marca. Ver tema/tokens-<web>.css
   ========================================================================== */

/* ---------- 1. Tokens por defecto (fallback) ---------- */
:root {
  --hk-navy:        #0B2B47;
  --hk-navy-soft:   #14395C;
  --hk-blue:        #0F6FA8;
  --hk-blue-dark:   #0B5684;
  --hk-accent:      #C9A227;
  --hk-accent-dark: #A8871A;

  --hk-mist:        #F2F7F9;   /* fondo de sección alterno */
  --hk-mist-2:      #E7EFF4;   /* bordes y separadores suaves */
  --hk-white:       #FFFFFF;
  --hk-text:        #4C5566;   /* cuerpo */
  --hk-text-soft:   #6D7486;   /* secundario */
  --hk-heading:     var(--hk-navy);
  --hk-ok:          #1F9D55;   /* checks del hero */

  --hk-serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --hk-sans:  "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --hk-container: 1140px;
  --hk-gutter: 24px;
  --hk-r-card: 12px;
  --hk-r-pill: 50px;
  --hk-shadow: 0 2px 4px rgba(11, 43, 71, .04), 0 12px 32px rgba(11, 43, 71, .06);
  --hk-shadow-hover: 0 4px 8px rgba(11, 43, 71, .06), 0 20px 48px rgba(11, 43, 71, .10);
  --hk-section-y: clamp(56px, 6vw, 96px);
}

/* ---------- 2. Rejilla base ---------- */
.hk-wrap {
  width: 100%;
  max-width: var(--hk-container);
  margin-inline: auto;
  padding-inline: var(--hk-gutter);
}

.hk-section { padding-block: var(--hk-section-y); background: var(--hk-white); }
.hk-section--mist { background: var(--hk-mist); }
.hk-section--navy { background: var(--hk-navy); color: rgba(255, 255, 255, .82); }
.hk-section--tight { padding-block: clamp(36px, 4vw, 56px); }

.hk-section--navy :is(h2, h3, h4) { color: #fff; }
.hk-section--navy p { color: rgba(255, 255, 255, .78); }

/* Cabecera de sección centrada */
.hk-head { max-width: 720px; margin-inline: auto; text-align: center; margin-bottom: clamp(32px, 4vw, 56px); }
.hk-head--left { margin-inline: 0; text-align: left; }
.hk-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--hk-sans); font-size: .78rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--hk-blue); margin: 0 0 14px;
}
.hk-eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--hk-accent); }
.hk-section--navy .hk-eyebrow { color: var(--hk-accent); }
.hk-head h2 { margin: 0 0 14px; }
.hk-head p  { margin: 0; font-size: 1.0625rem; color: var(--hk-text-soft); }

/* ---------- 3. Tipografía de los bloques nuevos ---------- */
.hk-h1, .hk-hero h1 {
  font-family: var(--hk-serif); font-weight: 400; color: var(--hk-heading);
  font-size: clamp(2.15rem, 1.15rem + 2.9vw, 3.25rem);
  line-height: 1.18; letter-spacing: -.005em; margin: 0 0 20px;
}
.hk-h2, .hk-section h2 {
  font-family: var(--hk-serif); font-weight: 400; color: var(--hk-heading);
  font-size: clamp(1.7rem, 1.05rem + 1.9vw, 2.5rem);
  line-height: 1.24; margin: 0 0 16px;
}
.hk-h3 {
  font-family: var(--hk-serif); font-weight: 400; color: var(--hk-heading);
  font-size: clamp(1.2rem, 1.05rem + .55vw, 1.4rem); line-height: 1.35; margin: 0 0 10px;
}
.hk-lead { font-size: clamp(1rem, .96rem + .22vw, 1.125rem); line-height: 1.7; color: var(--hk-text-soft); margin: 0 0 28px; }
.hk-em { font-family: var(--hk-serif); font-style: italic; color: var(--hk-accent); }

/* ---------- 4. Botones ---------- */
.hk-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--hk-sans); font-size: .95rem; font-weight: 600; line-height: 1;
  padding: 17px 32px; border-radius: var(--hk-r-pill); border: 1.5px solid transparent;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease,
              transform .18s ease, box-shadow .18s ease;
}
.hk-btn svg { width: 18px; height: 18px; flex: none; }
.hk-btn--primary { background: var(--hk-blue); color: #fff; box-shadow: 0 8px 20px rgba(15, 111, 168, .22); }
.hk-btn--primary:hover { background: var(--hk-blue-dark); transform: translateY(-2px); box-shadow: 0 12px 28px rgba(15, 111, 168, .28); color: #fff; }
.hk-btn--accent { background: var(--hk-accent); color: var(--hk-navy); box-shadow: 0 8px 20px rgba(0, 0, 0, .10); }
.hk-btn--accent:hover { background: var(--hk-accent-dark); transform: translateY(-2px); color: var(--hk-navy); }
.hk-btn--ghost { background: transparent; color: var(--hk-navy); border-color: var(--hk-mist-2); }
.hk-btn--ghost:hover { border-color: var(--hk-blue); color: var(--hk-blue); background: var(--hk-white); }
.hk-section--navy .hk-btn--ghost { color: #fff; border-color: rgba(255, 255, 255, .35); }
.hk-section--navy .hk-btn--ghost:hover { background: rgba(255, 255, 255, .10); border-color: #fff; color: #fff; }
.hk-btn--sm { padding: 12px 22px; font-size: .875rem; }

/* ---------- 5. Barra de anuncio (navy, arriba del todo) ---------- */
.hk-announce {
  background: var(--hk-navy); color: rgba(255, 255, 255, .92);
  font-family: var(--hk-sans); font-size: .875rem; text-align: center;
  padding: 12px var(--hk-gutter); line-height: 1.5;
}
.hk-announce a { color: #fff; text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }
.hk-announce a:hover { color: var(--hk-accent); }

/* ---------- 6. Barra de confianza (azul, 4 argumentos con icono) ---------- */
.hk-trust { background: var(--hk-blue); color: #fff; font-family: var(--hk-sans); }
.hk-trust .hk-wrap {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
  padding-block: 16px;
}
.hk-trust__item {
  display: flex; align-items: center; gap: 11px;
  font-size: .9375rem; font-weight: 600; line-height: 1.3;
}
.hk-trust__item svg { width: 22px; height: 22px; flex: none; opacity: .95; }
@media (max-width: 900px) {
  .hk-trust .hk-wrap { grid-template-columns: repeat(2, 1fr); }
  .hk-trust__item { font-size: .8125rem; }
}
@media (max-width: 520px) {
  .hk-trust .hk-wrap { grid-template-columns: 1fr; gap: 10px; padding-block: 12px; }
}

/* ---------- 7. Hero claro ---------- */
.hk-hero { background: var(--hk-mist); padding-block: clamp(48px, 5.5vw, 88px); overflow: hidden; }
.hk-hero__grid {
  display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  gap: clamp(32px, 5vw, 72px); align-items: center;
}
.hk-hero__media { position: relative; }
.hk-hero__media img, .hk-hero__media svg {
  display: block; width: 100%; height: auto;
  border-radius: 16px; box-shadow: var(--hk-shadow);
}
.hk-hero__checks { list-style: none; margin: 0 0 30px; padding: 0; display: grid; gap: 14px; }
.hk-hero__checks li {
  display: grid; grid-template-columns: 26px 1fr; gap: 13px; align-items: start;
  font-family: var(--hk-sans); font-size: 1rem; line-height: 1.55; color: var(--hk-text);
}
.hk-hero__checks li strong { color: var(--hk-navy); font-weight: 600; }
.hk-hero__checks svg { width: 26px; height: 26px; color: var(--hk-ok); margin-top: 1px; }
.hk-hero__cta { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.hk-hero__note { font-family: var(--hk-sans); font-size: .8125rem; color: var(--hk-text-soft); margin: 18px 0 0; }
@media (max-width: 880px) {
  .hk-hero__grid { grid-template-columns: 1fr; gap: 36px; }
  .hk-hero__media { order: -1; }
}

/* ---------- 8. Tira de credenciales / "Featured on" ---------- */
.hk-strip { background: var(--hk-mist); padding-block: 34px; border-top: 1px solid var(--hk-mist-2); }
.hk-strip__label {
  font-family: var(--hk-sans); font-size: .75rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--hk-text-soft); text-align: center; margin: 0 0 20px;
}
.hk-strip__row {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: clamp(24px, 4vw, 56px);
}
.hk-strip__item {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--hk-sans); font-size: .875rem; font-weight: 600; color: var(--hk-navy);
}
.hk-strip__item svg { width: 20px; height: 20px; color: var(--hk-blue); flex: none; }

/* ---------- 9. Tarjetas con icono ---------- */
.hk-grid { display: grid; gap: clamp(18px, 2vw, 26px); }
.hk-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hk-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hk-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 940px) { .hk-grid--3, .hk-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .hk-grid--2, .hk-grid--3, .hk-grid--4 { grid-template-columns: 1fr; } }

.hk-card {
  background: var(--hk-mist); border: 1px solid transparent; border-radius: var(--hk-r-card);
  padding: clamp(26px, 2.4vw, 36px); display: flex; flex-direction: column;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background-color .2s ease;
}
.hk-section--mist .hk-card { background: var(--hk-white); border-color: var(--hk-mist-2); }
.hk-section--navy .hk-card { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .12); }
.hk-card__icon { color: var(--hk-blue); margin-bottom: 18px; }
.hk-card__icon svg { width: 44px; height: 44px; }
.hk-section--navy .hk-card__icon { color: var(--hk-accent); }
.hk-card h3 { font-family: var(--hk-serif); font-weight: 400; font-size: 1.3125rem; line-height: 1.3; color: var(--hk-heading); margin: 0 0 10px; }
.hk-card p { font-family: var(--hk-sans); font-size: .9375rem; line-height: 1.7; color: var(--hk-text-soft); margin: 0; }
.hk-card__link {
  margin-top: auto; padding-top: 18px; display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--hk-sans); font-size: .875rem; font-weight: 600; color: var(--hk-blue); text-decoration: none;
}
.hk-card__link svg { width: 16px; height: 16px; transition: transform .18s ease; }
.hk-card:hover { transform: translateY(-3px); box-shadow: var(--hk-shadow-hover); }
.hk-card:hover .hk-card__link svg { transform: translateX(3px); }
a.hk-card { text-decoration: none; }

/* Tarjeta numerada (proceso / pasos) */
.hk-step { position: relative; }
.hk-step__n {
  font-family: var(--hk-serif); font-size: 2.25rem; line-height: 1;
  color: var(--hk-accent); margin-bottom: 14px; display: block;
}

/* ---------- 10. Banda navy con cifras ---------- */
.hk-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center; }
.hk-stats__n {
  font-family: var(--hk-serif); font-size: clamp(2rem, 1.3rem + 2vw, 3rem); line-height: 1;
  color: #fff; margin: 0 0 8px;
}
.hk-stats__l { font-family: var(--hk-sans); font-size: .8125rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .62); margin: 0; }
@media (max-width: 720px) { .hk-stats { grid-template-columns: repeat(2, 1fr); gap: 32px 18px; } }

/* ---------- 11. Bloque partido (texto + imagen) ---------- */
.hk-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 5vw, 72px); align-items: center; }
.hk-split--flip .hk-split__media { order: -1; }
.hk-split__media img, .hk-split__media svg { display: block; width: 100%; height: auto; border-radius: 14px; box-shadow: var(--hk-shadow); }
.hk-split__list { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 13px; }
.hk-split__list li {
  display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start;
  font-family: var(--hk-sans); font-size: .9375rem; line-height: 1.65; color: var(--hk-text);
}
.hk-split__list svg { width: 22px; height: 22px; color: var(--hk-ok); }
@media (max-width: 880px) {
  .hk-split { grid-template-columns: 1fr; gap: 32px; }
  .hk-split--flip .hk-split__media { order: 0; }
}

/* ---------- 12. FAQ acordeón ---------- */
.hk-faq { max-width: 860px; margin-inline: auto; display: grid; gap: 12px; }
.hk-faq details {
  background: var(--hk-white); border: 1px solid var(--hk-mist-2); border-radius: 10px;
  padding: 4px 22px; transition: border-color .18s ease, box-shadow .18s ease;
}
.hk-section--mist .hk-faq details { background: var(--hk-white); }
.hk-faq details[open] { border-color: color-mix(in srgb, var(--hk-blue) 35%, transparent); box-shadow: var(--hk-shadow); }
.hk-faq summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 18px;
  font-family: var(--hk-sans); font-size: 1rem; font-weight: 600; color: var(--hk-navy);
  padding-block: 20px;
}
.hk-faq summary::-webkit-details-marker { display: none; }
.hk-faq summary::after {
  content: ""; flex: none; width: 11px; height: 11px; margin-right: 3px;
  border-right: 2px solid var(--hk-blue); border-bottom: 2px solid var(--hk-blue);
  transform: rotate(45deg) translate(-2px, -2px); transition: transform .2s ease;
}
.hk-faq details[open] summary::after { transform: rotate(225deg) translate(-2px, -2px); }
.hk-faq__body { padding: 0 0 22px; font-family: var(--hk-sans); font-size: .9375rem; line-height: 1.75; color: var(--hk-text-soft); }
.hk-faq__body p:first-child { margin-top: 0; }
.hk-faq__body p:last-child { margin-bottom: 0; }

/* ---------- 13. Testimonios ---------- */
.hk-quote {
  background: var(--hk-white); border: 1px solid var(--hk-mist-2); border-radius: var(--hk-r-card);
  padding: clamp(26px, 2.4vw, 34px); display: flex; flex-direction: column; gap: 16px;
}
.hk-quote__mark { color: var(--hk-accent); }
.hk-quote__mark svg { width: 26px; height: 26px; }
.hk-quote p { font-family: var(--hk-sans); font-size: .9375rem; line-height: 1.75; color: var(--hk-text); margin: 0; }
.hk-quote__who { margin-top: auto; font-family: var(--hk-sans); font-size: .8125rem; color: var(--hk-text-soft); }
.hk-quote__who strong { display: block; color: var(--hk-navy); font-size: .875rem; }

/* ---------- 14. Rejilla de artículos ---------- */
.hk-post {
  display: flex; flex-direction: column; background: var(--hk-white);
  border: 1px solid var(--hk-mist-2); border-radius: var(--hk-r-card); overflow: hidden;
  text-decoration: none; transition: transform .2s ease, box-shadow .2s ease;
}
.hk-post:hover { transform: translateY(-3px); box-shadow: var(--hk-shadow-hover); }
.hk-post__thumb { aspect-ratio: 16 / 9; background: var(--hk-mist); overflow: hidden; }
.hk-post__thumb img, .hk-post__thumb svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.hk-post__body { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.hk-post__tag { font-family: var(--hk-sans); font-size: .6875rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--hk-blue); }
.hk-post h3 { font-family: var(--hk-serif); font-weight: 400; font-size: 1.1875rem; line-height: 1.35; color: var(--hk-heading); margin: 0; }
.hk-post p { font-family: var(--hk-sans); font-size: .875rem; line-height: 1.65; color: var(--hk-text-soft); margin: 0; }

/* ---------- 15. CTA final ---------- */
.hk-cta { background: var(--hk-mist); }
.hk-cta__box {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(32px, 5vw, 64px); align-items: center;
}
.hk-cta__panel {
  background: var(--hk-white); border: 1px solid var(--hk-mist-2); border-radius: 16px;
  padding: clamp(28px, 3vw, 40px); box-shadow: var(--hk-shadow);
}
.hk-field { display: grid; gap: 6px; margin-bottom: 16px; }
.hk-field label { font-family: var(--hk-sans); font-size: .8125rem; font-weight: 600; color: var(--hk-navy); }
.hk-field :is(input, select, textarea) {
  font-family: var(--hk-sans); font-size: .9375rem; color: var(--hk-navy);
  padding: 13px 15px; border: 1px solid var(--hk-mist-2); border-radius: 9px; background: var(--hk-white); width: 100%;
}
.hk-field :is(input, select, textarea):focus {
  outline: none; border-color: var(--hk-blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--hk-blue) 15%, transparent);
}
.hk-form__legal { font-family: var(--hk-sans); font-size: .75rem; line-height: 1.6; color: var(--hk-text-soft); margin: 14px 0 0; }
@media (max-width: 880px) { .hk-cta__box { grid-template-columns: 1fr; } }

/* ---------- 16. Utilidades ---------- */
.hk-center { text-align: center; }
.hk-mt-0 { margin-top: 0; }
.hk-mb-0 { margin-bottom: 0; }
.hk-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.hk-icon { display: inline-block; vertical-align: middle; }

@media (prefers-reduced-motion: reduce) {
  .hk-card, .hk-post, .hk-btn, .hk-card__link svg { transition: none !important; }
  .hk-card:hover, .hk-post:hover, .hk-btn:hover { transform: none !important; }
}


/* ===== tokens-ggg.css ===== */
/* Tokens · Licencia Turística Andalucía (ggg)
   Identidad conservada: navy #0C2340 + oro #C89A3A + crema #FDF8F0. */
:root {
  --hk-navy:#0C2340; --hk-navy-soft:#16375C;
  --hk-blue:#1255A0; --hk-blue-dark:#0E4380;
  --hk-accent:#C89A3A; --hk-accent-dark:#A87F26;
  --hk-mist:#FDF8F0; --hk-mist-2:#E6DFD2;
  --hk-text:#414A56; --hk-text-soft:#6B7280;
  --hk-heading:var(--hk-navy); --hk-ok:#1F9D55;
  --hk-sans:'DM Sans','Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}


/* ===== skin-ggg.css ===== */
/* ==========================================================================
   RE-SKIN · licenciaturisticaandalucia.es  (carpeta ggg)
   Cambia SOLO el diseño. No toca ni una palabra del contenido, ni el marcado,
   ni los formularios, ni el buscador.

   Se carga en último lugar dentro de <head>, después del <style> inline que
   lleva cada una de las 5.034 páginas, así que gana la cascada.

   Qué cambia:
     · El bloque superior (barra verde + topbar + header + hero) pasa de navy
       oscuro a claro. Es el 90 % del efecto.
     · Playfair Display baja de peso 700/900 a 400: a 52 px, el 700 se lee como
       cartel; el 400 se lee como editorial.
     · Botones a píldora, tarjetas con aire, ritmo de secciones claro/crema.
   Qué NO se toca:
     · .leaflet-* y el buscador (gran-buscador/), que tienen su propio CSS.
     · Los name= de los formularios, que esperan action.php / procesar.php.
     · .wa-float (botón flotante verde de WhatsApp).
   ========================================================================== */

/* ---------- A. Variables ------------------------------------------------ */
/* Se conservan los nombres originales: hay estilos en línea que los usan. */
:root {
  --navy:#0C2340; --blue:#1255A0; --sky:#2A9FD6;
  --gold:#C89A3A; --gold-light:#E0B75A;
  --gold-ink:#8A6522;          /* oro entintado para TEXTO sobre claro:
                                  el oro puro se queda en 2,4:1 */
  --cream:#FDF8F0; --warm:#F5EDE0;
  --white:#fff; --text:#414A56; --muted:#6B7280;
  --border:#E6DFD2;
  --radius:16px; --radius-sm:12px;
  --pill:50px;
  --sh:0 2px 4px rgba(12,35,64,.04),0 12px 32px rgba(12,35,64,.07);
  --sh-h:0 4px 8px rgba(12,35,64,.06),0 20px 48px rgba(12,35,64,.11);
  --serif:'Playfair Display',Georgia,serif;
}

/* ---------- B. Tipografía ---------------------------------------------- */
body { color: var(--text); background: var(--white); line-height: 1.7; }

/* Playfair en 400. Es el cambio tipográfico que más se nota. */
h1, h2, h3, h4,
.header-brand-text h1, .hero-copy h2, .section-title {
  font-family: var(--serif) !important;
  font-weight: 400 !important;
  letter-spacing: -.004em;
}
.hero-copy h2 { font-size: clamp(30px, 4vw, 54px) !important; line-height: 1.14 !important; }
.section-title { font-size: clamp(25px, 3vw, 40px) !important; line-height: 1.22 !important; }

/* El antetítulo iba en oro claro sobre navy; sobre crema no se lee */
.section-label { color: var(--gold-ink) !important; letter-spacing: .14em; font-weight: 600; }
.section-desc { color: var(--muted); }

/* ---------- C1. Las dos barras superiores ------------------------------- */
/* El verde de WhatsApp vestía toda la web y chocaba con navy+oro. Pasa a
   navy; el verde se queda donde debe estar: en el botón. */
.wa-channel-bar {
  background: linear-gradient(135deg,#18a34a 0%,#117a38 100%) !important;
  color: #fff !important;
  border-bottom: 1px solid rgba(255,255,255,.18);
  font-size: .875rem;
}
.wa-channel-bar a {
  background: rgba(255,255,255,.12) !important;
  border-color: rgba(255,255,255,.28) !important;
  color: #fff !important;
  border-radius: var(--pill) !important;
}
.wa-channel-bar a:hover { background: var(--gold) !important; color: var(--navy) !important; border-color: var(--gold) !important; }

/* La barra de teléfono pasa a azul: queda como "barra de confianza" */
.topbar {
  background: var(--blue) !important;
  color: #fff !important;
  padding: 11px 24px !important;
  font-size: .9rem;
}
.topbar a { color: #fff !important; font-weight: 600; }
.topbar a:hover { color: var(--gold-light) !important; }
.topbar .sep { opacity: .45 !important; }

/* ---------- C2. Header: de navy a blanco -------------------------------- */
/* El fondo blanco va en <header>, no en .header-inner: .header-inner está
   limitado a 1140 px y dejaba asomar el navy por los lados.

   ⚠️ ACOTADO A PROPÓSITO con :has(> .header-inner). Un `header{background:#fff}`
   a secas alcanzaba también la cabecera de las 784 páginas de english/, que
   tiene otra estructura (.header-actions-card) con el texto en blanco: las
   dejaba en blanco sobre blanco. */
header:has(> .header-inner) {
  background: var(--white) !important;
  border-bottom: 1px solid var(--border);
}
.header-inner { padding: 18px 24px !important; }
.header-brand img { border-radius: 10px; }

/* ⚠️ .header-brand-text existe en DOS cabeceras distintas:
     · la de la portada (dentro de header > .header-inner), que este skin pone
       en blanco → su título debe ir en navy;
     · la del blog y de english/ (.header-main-grid), que sigue siendo OSCURA
       → ahí el título debe seguir en blanco.
   Colorear .header-brand-text h1 sin acotar dejaba navy sobre navy en el blog.
   Por eso todas estas reglas cuelgan de header:has(> .header-inner). */
header:has(> .header-inner) .header-brand-text h1 {
  color: var(--navy) !important;
  font-size: clamp(20px, 2.6vw, 30px) !important;
}
/* "by Salama Legal SLP" sigue en cursiva, ahora en oro entintado */
header:has(> .header-inner) .header-brand-text h1 :is(em, i, span) { color: var(--gold-ink) !important; }
header:has(> .header-inner) .header-brand-text > span { color: var(--muted) !important; }
header:has(> .header-inner) .header-brand-text :is(strong, b) { color: var(--navy) !important; }

/* ---------- C3. El menú deja de ser "chips" ----------------------------- */
/* Los botones redondeados se leían como filtros o etiquetas, no como
   navegación. Pasan a enlaces con subrayado al pasar por encima. */
.header-inner nav { display: flex; flex-wrap: wrap; gap: 2px; padding-top: 6px; }
.header-inner nav a {
  background: transparent !important;
  border: 0 !important;
  color: var(--navy) !important;
  padding: 9px 13px !important;
  border-radius: 8px !important;
  font-size: .9rem;
  font-weight: 500;
}
.header-inner nav a:hover { background: var(--cream) !important; color: var(--blue) !important; }

/* ---------- C4. Hero: de oscuro a claro --------------------------------- */
.hero-section {
  background: linear-gradient(180deg, var(--cream) 0%, var(--warm) 100%) !important;
  padding: clamp(44px, 5vw, 76px) 24px clamp(52px, 5.5vw, 88px) !important;
}
/* La elipse blanca del borde inferior sobra cuando el hero ya es claro */
.hero-section::after { display: none !important; content: none !important; }

.hero-copy h2 { color: var(--navy) !important; }
.hero-copy h2 em { color: var(--gold-ink) !important; font-style: italic; }
.hero-copy p { color: var(--muted) !important; font-size: 17px !important; }

/* Las píldoras del hero: de translúcidas sobre navy a claras con borde */
.hero-badges { gap: 10px; }
.badge {
  background: var(--white) !important;
  border: 1px solid var(--border) !important;
  color: var(--navy) !important;
  font-size: .85rem; font-weight: 500;
  border-radius: var(--pill) !important;
}
.badge-dot { background: var(--gold) !important; }

/* La tarjeta del formulario gana aire y sombra */
.form-card {
  background: var(--white) !important;
  border: 1px solid var(--border) !important;
  border-radius: 18px !important;
  box-shadow: var(--sh) !important;
  padding: clamp(24px, 2.6vw, 34px) !important;
}
.form-card-header h3 { font-family: var(--serif) !important; font-weight: 400 !important; color: var(--navy) !important; }
.form-card-header p { color: var(--muted) !important; }
.field-group label { font-size: .8rem; font-weight: 600; color: var(--navy); }
.field-group :is(input, select, textarea) {
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  padding: 13px 15px !important;
  background: var(--white) !important;
  color: var(--navy) !important;
}
.field-group :is(input, select, textarea):focus {
  outline: none !important;
  border-color: var(--blue) !important;
  box-shadow: 0 0 0 3px rgba(18,85,160,.14) !important;
}

/* ---------- C5. Botones: píldora ---------------------------------------- */
.btn-primary, .btn-secondary, .btn-gold, button[type="submit"], .embed-link {
  border-radius: var(--pill) !important;
  font-weight: 600 !important;
  padding: 16px 30px !important;
  transition: background-color .18s, transform .18s, box-shadow .18s;
}
.btn-primary, button[type="submit"] {
  background: var(--gold) !important;
  color: var(--navy) !important;
  box-shadow: 0 8px 20px rgba(200,154,58,.26);
}
.btn-primary:hover, button[type="submit"]:hover {
  background: #A87F26 !important; color: #fff !important; transform: translateY(-2px);
}

/* ---------- C6. Ritmo de secciones y tarjetas --------------------------- */
section { padding-block: clamp(50px, 5.5vw, 88px); }
.services-grid, .steps-grid, .faq-list { gap: clamp(16px, 2vw, 24px); }

.service-card, .info-card {
  background: var(--cream) !important;
  border: 1px solid transparent !important;
  border-radius: var(--radius) !important;
  transition: transform .2s, box-shadow .2s;
}
.service-card:hover, .info-card:hover { transform: translateY(-3px); box-shadow: var(--sh-h); }
.service-icon { color: var(--blue) !important; }
.service-card h3 { font-family: var(--serif) !important; font-weight: 400 !important; color: var(--navy) !important; }

/* La banda navy de pasos se conserva: es la ÚNICA de la portada, y es
   justamente el contraste que pide el modelo. */
.steps-section { border-radius: 24px !important; }
.step-num { font-family: var(--serif) !important; font-weight: 700 !important; color: #fff !important; }
/* FIX legibilidad: la regla global 'main :is(h2,h3){color:navy}' pintaba los
   títulos de los pasos (y "Pasos para registrar tu VUT") navy sobre el fondo
   navy de la sección -> azul sobre azul. Se restauran en blanco. */
.steps-section :is(h2, h3),
.steps-section .section-title,
.step-item h3 { color: #fff !important; }
.steps-section .section-desc,
.step-item p { color: rgba(255,255,255,.72) !important; }

/* FAQ */
.faq-item { border-radius: var(--radius-sm) !important; border-color: var(--border) !important; }
.faq-q { font-weight: 600 !important; color: var(--navy) !important; }
.faq-a { color: var(--muted) !important; }

.alert { border-radius: var(--radius-sm) !important; }

/* ---------- C7. Lo que NO se toca --------------------------------------- */
/* El buscador y su mapa tienen su propio sistema: cualquier regla nuestra que
   entre ahí lo rompe. Se blindan explícitamente. */
.leaflet-container, .leaflet-container *,
#buscador, #buscador *,
.embed-wrapper, .embed-wrapper * { all: revert-layer; }

/* ---------- C8. Salvaguardas -------------------------------------------- */
/* No se escribe ni una regla `display` sobre el nav: el original lo oculta en
   móvil dentro de su propia media query. */
html, body { max-width: 100%; overflow-x: hidden; }
img, svg, video, table { max-width: 100%; }

@media (prefers-reduced-motion: reduce) {
  .service-card, .info-card, .btn-primary { transition: none !important; }
  .service-card:hover, .info-card:hover, .btn-primary:hover { transform: none !important; }
}

/* ==========================================================================
   C9. FALLOS DE CONTRASTE QUE LA WEB YA ARRASTRABA
   Detectados midiendo el color efectivo contra el fondo compuesto en 123
   variantes estructurales (= las 5.034 páginas). Todos estaban ya en la web
   actual: no los causa el rediseño, pero es el momento de arreglarlos.
   ========================================================================== */

/* 1 · Cabeceras de tabla: navy sobre navy (1,00:1). Afecta a las tablas de la
       tasa de basura, que son justo las que hay que poder leer. */
/* ⚠️ Solo estas tres clases tienen la cabecera navy. Una regla genérica
   `table thead th{color:#fff}` dejaba en blanco sobre blanco las tablas de
   cabecera clara de english/ (tourist-licence-fines, how-to-get-...). */
table.data-tbl thead th, table.cmp-table thead th, table.tt thead th {
  color: #fff !important;
}
:is(table.data-tbl, table.cmp-table, table.tt) thead th a { color: var(--gold-light) !important; }

/* 2 · Banner de cookies: texto gris oscuro sobre fondo navy (1,00:1) */
/* ⚠️ El banner tiene id propio: #lta-cb. Mi primer intento usaba
   `body > div:has(> p > a[href*="cookie"])`, que además del banner emparejaba
   el .content-wrap de aviso-legal.html —porque ese texto legal también enlaza
   la política de cookies— y dejaba TODO el aviso legal en blanco sobre blanco. */
#lta-cb, #lta-cb p { color: rgba(255,255,255,.92) !important; }
#lta-cb a { color: var(--gold-light) !important; }

/* 3 · Botón fantasma sobre tarjeta blanca: blanco sobre blanco (1,00:1) */
.header-actions-card .ghost-button {
  color: var(--navy) !important;
  border-color: var(--border) !important;
  background: transparent !important;
}
.header-actions-card .ghost-button:hover {
  background: var(--cream) !important; color: var(--blue) !important;
}

/* 4 · Pie de las páginas en neerlandés: navy casi puro sobre navy (1,01:1) */
footer.site-footer p { color: rgba(255,255,255,.72) !important; }
footer.site-footer a { color: rgba(255,255,255,.86) !important; }

/* 5 · Paginación del blog: blanco al 80 % sobre crema (1,01:1) */
nav.pagination .page-link { color: var(--navy) !important; border: 1px solid var(--border); }
nav.pagination .page-link.active { background: var(--navy) !important; color: #fff !important; }

/* 6 · El 404 usa <strong> en vez de <h1> dentro de la marca, y se quedaba
       blanco sobre el header blanco. */
header:has(> .header-inner) .header-brand-text :is(strong, b) { color: var(--navy) !important; }


/* ===== skin-ggg-principal.css ===== */
/* ==========================================================================
   RE-SKIN · PLANTILLA PRINCIPAL de licenciaturisticaandalucia.es
   (.site-header + .header-main-grid + .header-actions-card)

   Esta es la plantilla REAL del sitio: 3.922 páginas (77 %), más el blog y
   nl/. La portada, en cambio, son 2 páginas. El primer intento rediseñó la
   portada, que es justo lo que no se ve.

   Solo diseño. No toca contenido, ni marcado, ni formularios, ni el buscador.
   ========================================================================== */

:root{
  --g-navy:#0C2340; --g-navy2:#16375C;
  --g-blue:#1255A0; --g-blue-d:#0E4380;
  --g-gold:#C89A3A; --g-gold-l:#E0B75A; --g-gold-ink:#8A6522;
  --g-cream:#FDF8F0; --g-warm:#F6EFE3;
  --g-line:#E6DFD2; --g-text:#414A56; --g-muted:#6B7280;
  --g-pill:50px;
  --g-sh:0 2px 4px rgba(12,35,64,.04),0 14px 38px rgba(12,35,64,.09);
}

/* ---------- 1. Las cuatro barras apiladas ------------------------------- */
/* BUG ACTUAL: .wa-channel-bar va fija arriba y TAPA el primer .topbar, que
   queda cortado por la mitad ("WhatsApp | Canal de novedades | Contacto").
   Se devuelve al flujo para que las barras se apilen de verdad. */
.wa-channel-bar{
  position: static !important;
  background: linear-gradient(135deg,#18a34a 0%,#117a38 100%) !important;
  color: #fff !important;
  padding: 11px 16px !important;
  font-size: .875rem !important;
  border-bottom: 1px solid rgba(255,255,255,.18);
}
.wa-channel-bar a{
  background: rgba(255,255,255,.13) !important;
  border: 1px solid rgba(255,255,255,.3) !important;
  border-radius: var(--g-pill) !important;
  color: #fff !important; padding: 7px 16px !important;
}
.wa-channel-bar a:hover{ background: var(--g-gold) !important; color: var(--g-navy) !important; border-color: var(--g-gold) !important; }

/* Las dos .topbar se leen como una sola franja de servicio: la primera
   discreta, la segunda como barra de confianza en azul. */
.topbar{
  background: var(--g-navy) !important;
  color: rgba(255,255,255,.8) !important;
  font-weight: 500 !important; font-size: .82rem !important;
  padding: 7px 12px !important; letter-spacing: 0 !important;
}
.topbar a{ color: rgba(255,255,255,.92) !important; font-weight: 600 !important; }
.topbar a:hover{ color: var(--g-gold-l) !important; }
.topbar .sep{ opacity:.3 !important; }
.topbar[role="banner"]{
  background: var(--g-blue) !important;
  color:#fff !important; font-size:.9rem !important; padding: 11px 12px !important;
}
.topbar[role="banner"] a{ color:#fff !important; }

/* Banda de la subvención: es lo único que vende de verdad ahí arriba, así que
   se le da el protagonismo y se separa con oro. */
.promo-band, .subv-band, .promo{
  background: var(--g-warm) !important;
  color: var(--g-navy) !important;
  border-top: 2px solid var(--g-gold) !important;
  border-bottom: 1px solid var(--g-line) !important;
}
.promo-band a, .promo a{ border-radius: var(--g-pill) !important; }

/* ---------- 2. La cabecera: de foto oscura a claro ---------------------- */
/* Hoy es una foto de despacho con degradado azul encima. Se sustituye por
   bruma: el titular pasa a leerse, que es lo que importa en 3.922 páginas. */
.site-header, header.site-header{
  background: linear-gradient(180deg, var(--g-cream) 0%, var(--g-warm) 100%) !important;
  color: var(--g-text) !important;
  padding: clamp(34px, 3.6vw, 56px) 20px clamp(30px, 3vw, 46px) !important;
  text-align: left !important;
  border-bottom: 1px solid var(--g-line);
}
.site-header::before, .site-header::after{ display:none !important; content:none !important; }

.site-header .header-brand{ align-items:center !important; gap:16px !important; }
.site-header .header-brand img{ border-radius:12px; box-shadow: var(--g-sh); }

.header-page-tag{
  display:inline-block;
  background: var(--g-white, #fff) !important;
  border: 1px solid var(--g-line);
  color: var(--g-gold-ink) !important;
  font-size:.72rem !important; font-weight:700 !important;
  letter-spacing:.12em; text-transform:uppercase;
  padding:6px 14px; border-radius: var(--g-pill);
}
.site-header .header-brand-text h1{
  font-family:'Playfair Display',Georgia,serif !important;
  font-weight:400 !important;
  color: var(--g-navy) !important;
  font-size: clamp(28px, 3.4vw, 46px) !important;
  line-height:1.16 !important; text-align:left !important;
}
.site-header .header-brand-text > span,
.site-header .header-brand-text p{ color: var(--g-gold-ink) !important; }
.header-summary{ color: var(--g-muted) !important; max-width:60ch; }

/* Los "chips" de navegación pasan a enlaces legibles */
.header-quick-links a{
  background: #fff !important;
  border:1px solid var(--g-line) !important;
  color: var(--g-navy) !important;
  border-radius: var(--g-pill) !important;
  padding:9px 18px !important; font-weight:600 !important; font-size:.875rem !important;
}
.header-quick-links a:hover{ border-color: var(--g-blue) !important; color: var(--g-blue) !important; }

/* ---------- 3. La tarjeta de asistencia --------------------------------- */
/* Era translúcida sobre la foto; sobre fondo claro tiene que ser sólida. */
.header-actions-card{
  background: #fff !important;
  border: 1px solid var(--g-line) !important;
  border-radius: 18px !important;
  box-shadow: var(--g-sh) !important;
  padding: clamp(22px, 2.2vw, 30px) !important;
}
.header-actions-card h2{
  font-family:'Playfair Display',Georgia,serif !important;
  font-weight:400 !important; color: var(--g-navy) !important;
  font-size: clamp(19px, 1.5vw, 23px) !important; line-height:1.28 !important;
}
.header-actions-card p{ color: var(--g-muted) !important; font-size:.94rem !important; }
.header-actions-label{ color: var(--g-gold-ink) !important; }

.cta-button{
  background: var(--g-gold) !important; color: var(--g-navy) !important;
  border-radius: var(--g-pill) !important; font-weight:700 !important;
  padding:15px 26px !important; border:1.5px solid var(--g-gold) !important;
  box-shadow:0 8px 20px rgba(200,154,58,.26);
}
.cta-button:hover{ background:#A87F26 !important; border-color:#A87F26 !important; color:#fff !important; }
/* ⚠️ acotado a la tarjeta clara: en nl/ y en otras plantillas este botón vive
   sobre fondo oscuro y ahí debe seguir en blanco. */
.header-actions-card .ghost-button{
  background: transparent !important;
  color: var(--g-navy) !important;
  border:1.5px solid var(--g-line) !important;
  border-radius: var(--g-pill) !important; font-weight:600 !important;
  padding:14px 26px !important;
}
.header-actions-card .ghost-button:hover{ border-color: var(--g-blue) !important; color: var(--g-blue) !important; }

/* ---------- 4. Cuerpo y tipografía -------------------------------------- */
body{ background:#fff !important; color: var(--g-text) !important; }
.container{ max-width:1140px !important; }
main :is(h2,h3){
  font-family:'Playfair Display',Georgia,serif !important;
  font-weight:400 !important; color: var(--g-navy) !important;
}
main h2{ font-size: clamp(24px,2.4vw,34px) !important; line-height:1.24 !important; margin-top:1.6em; }
main h3{ font-size: clamp(18px,1.5vw,22px) !important; }
main p, main li{ line-height:1.75; }
main :is(p,li):not([class]){ max-width:72ch; }

/* ---------- 5. Pie ------------------------------------------------------ */
.site-footer{ background: var(--g-navy) !important; }
.site-footer p, .site-footer li{ color: rgba(255,255,255,.74) !important; }
.site-footer a{ color: rgba(255,255,255,.9) !important; }
.site-footer a:hover{ color: var(--g-gold-l) !important; }
.site-footer h4{ color:#fff !important; font-family:'Playfair Display',Georgia,serif !important; font-weight:400 !important; }

/* ---------- 6. Salvaguardas -------------------------------------------- */
/* Sin reglas de `display` sobre nav: el original lo gestiona en sus propias
   media queries. */
html, body{ max-width:100%; overflow-x:hidden; }
img, svg, video, table{ max-width:100%; }

/* ---------- 7. La otra navegación de píldoras --------------------------- */
/* .header-pill-nav es distinta de .header-quick-links y se me pasó: quedaba
   texto BLANCO sobre blanco al 6 % encima de la crema, ilegible en las 3.922
   páginas de esta plantilla. */
.site-header .header-pill-nav a{
  background: #fff !important;
  border: 1px solid var(--g-line) !important;
  color: var(--g-navy) !important;
  border-radius: var(--g-pill) !important;
  padding: 9px 18px !important;
  font-weight: 600 !important;
  font-size: .875rem !important;
}
.site-header .header-pill-nav a:hover{
  border-color: var(--g-blue) !important;
  color: var(--g-blue) !important;
}
/* Red de seguridad: cualquier texto que siga en blanco DENTRO de la cabecera
   clara pasa a navy. Es la clase de fallo que más veces ha aparecido hoy. */
.site-header :is(a, p, span, li, h2, h3, h4, strong)[style*="color:#fff"],
.site-header :is(a, p, span, li, h2, h3, h4, strong)[style*="color:rgba(255"],
.site-header :is(a, p, span, li, h2, h3, h4, strong)[style*="color: #fff"]{
  color: var(--g-navy) !important;
}