/* ═══════════════════════════════════════════════════════════════
   TEMA CLARO MEDITERRÁNEO · CN Sports · petanca 2027
   ---------------------------------------------------------------
   Esta hoja va DESPUÉS de estilo.css y solo cambia los COLORES:
   la web pasa de fondo negro a fondo claro (crema, verde agua y
   terracota). No toca la estructura ni las animaciones: los
   titulares siguen apareciendo palabra a palabra, las fotos siguen
   con su zoom, el cursor, la cuenta atrás y las galerías igual.

   Si algún día quieres volver al negro: se quita el enlace a este
   archivo de las páginas (o se ejecuta TEMA OSCURO.bat).
   ═══════════════════════════════════════════════════════════════ */

:root{
  /* marca, en tonos terracota del Mediterráneo */
  --teja:   #BB4829;
  --naranja:#C95B2D;
  --ambar:  #D2763B;
  --cn:     #BB4829;
  --cn-dark:#A44025;
  --escudo: linear-gradient(115deg,#BB4829 0%,#C95B2D 52%,#D2763B 100%);

  /* fondo y texto */
  --paper:  #FAF9F5;
  --paper-2:#F1F4F0;
  --ink:    #183640;
  --ink-2:  #4C6269;
  --ink-3:  #6C7E82;
  --line:   #DCE3DD;
  --line-2: #B7C5C0;
  --dark:   #183640;

  /* superficies: ahora son blancas de verdad, no cristal */
  --glass:  #FFFFFF;
  --glass-2:#F2F5F1;
  --blur:   none;
  --shadow: 0 12px 30px rgba(24,54,64,.07);
}

body{background:var(--paper);color:var(--ink-2)}
h1,h2,h3,h4,h5{color:var(--ink)}
strong,b{color:var(--ink)}
::selection{background:#F3C6A6;color:#183640}

/* ── Barra de arriba y menú ─────────────────────────────────── */
.site-header .wrap{background:rgba(255,255,255,.88);border:1px solid var(--line);
  box-shadow:0 10px 30px rgba(24,54,64,.08);backdrop-filter:blur(14px)}
.nav a{color:var(--ink-2)}
.nav a:hover,.nav a[aria-current]{color:var(--ink);background:#EAF0EB}
.idiomas{background:#EFF2EE;border-color:var(--line)}
.idiomas a{color:var(--ink-3)}
.idiomas a:hover{color:var(--ink);background:#E3EAE4}
.idiomas a[aria-current]{background:var(--dark);color:#fff}
.navtoggle{background:#fff;border-color:var(--line);color:var(--ink)}
.mockup-bar{background:#EEF1EA;color:#53676C}
.mockup-bar strong{color:var(--teja)}

/* ── Botones ───────────────────────────────────────────────── */
.btn-outline,.btn-ghost{color:var(--ink);border-color:var(--line-2);background:#fff}
.btn-outline:hover,.btn-ghost:hover{background:#EDF2EE;color:var(--ink)}
.btn-light{background:#fff;color:var(--ink)}

/* ── Portada con foto: el velo, más suave ──────────────────── */
.heroF .scrim{background:linear-gradient(90deg,rgba(8,26,32,.82) 0%,rgba(8,26,32,.55) 48%,rgba(8,26,32,.25) 100%)}
.hero-copy,.heroF h1,.heroF .lead{color:#fff}
.heroF .lead strong{color:#fff}
.chip-live{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.32);color:#fff}
.cdbox{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.28)}
.cuenta-rotulo{color:rgba(255,255,255,.75)}
.trust{color:rgba(255,255,255,.8)}
.crumbs{color:rgba(255,255,255,.8)}
.crumbs a{color:rgba(255,255,255,.95)}

/* ── Cajas, fichas y tarjetas: blancas sobre el crema ──────── */
.step,.quote,.faq details,.cat-card,.tema,.form fieldset,.form-envio,.canal,
.quickfacts>div,.cifras>div,.tcard,.sede,.infogrid>div,.day,.mapa,.esc-nota,
.opcion,.premio-1,.aviso-form,.aviso-disco,.subnav,.marquee-wrap,.media,
.gallery figure,.mosaico figure,.escena-fotos figure,.tabla-borde,.car-pie,
.ficha,.dosColumnas>div,.calc,.logi>div,.pricing>div{
  background:#fff;border-color:var(--line);box-shadow:none;backdrop-filter:none}
section.alt{background:var(--paper-2);border-color:var(--line)}
.cifras{background:var(--line);border-color:var(--line)}
.cifras>div:hover{background:#F7FAF7}
.quickfacts{background:var(--line)}
.tabla th{background:#F2F5F1;color:var(--teja);border-bottom-color:var(--line)}
.tabla tbody tr:hover{background:#F7FAF7}
.campo input,.campo textarea{background:#fff;border-color:var(--line-2);color:var(--ink)}
.campo input::placeholder,.campo textarea::placeholder{color:#9AA9AC}
.campo input:focus,.campo textarea:focus{border-color:var(--teja);box-shadow:0 0 0 3px rgba(187,72,41,.12)}
.opcion:hover{background:#F4F7F3}
.opcion input:checked+span{color:var(--ink)}
.checkbox span{color:var(--ink-2)}
.faq summary{color:var(--ink)}
.faq summary::after{color:var(--teja)}
.faq details[open]{border-color:var(--line-2);background:#fff}
.faq p,.faq li{color:var(--ink-2)}
.checklist li{color:var(--ink-2)}
.checklist li::before{background:#F2E6DD;color:var(--teja);border-color:#EAD6C8}
.step p{color:var(--ink-2)}
.step .n{color:#fff}
.quote p{color:var(--ink-2)}
.quote .stars{color:var(--teja)}
.quote cite{color:var(--ink-3)}
.esc-nota{color:var(--ink-3)}
.form-nota{color:var(--ink-3)}
.descarga-libre{color:var(--ink-3)}
.car-txt{color:var(--ink-3)}
.marquee-rotulo{color:var(--ink-3)}
.sl-fecha{color:var(--ink)}
.sl-txt b{color:var(--ink)}
.sl-txt small{color:var(--ink-3)}
.fecha-datos li{border-color:var(--line)}
.fecha-datos span{color:var(--ink-3)}
.fecha-datos b{color:var(--ink)}
.premio-1{border-color:#EAD6C8;background:#FCF4EE}
.tcard-place{color:var(--ink-3)}
.lb-cerrar,.lb-ant,.lb-sig{background:rgba(255,255,255,.9);color:var(--ink);border-color:var(--line)}

/* ── Fotos: en color, sin el velo oscuro del tema negro ────── */
.media img,.gallery figure img,.escena-fotos img,.mosaico img,.marquee img,
.sede-foto img,.tg-foto img,.fecha-foto img{filter:none}
.sede:hover .sede-foto img,.sede:focus-within .sede-foto img{filter:none}
.gallery figure:hover img,.mosaico figure:hover img,.escena-fotos figure:hover img{filter:none}

/* Las fotos con texto encima sí llevan velo, para poder leerlo */
.sede-velo{background:linear-gradient(0deg,rgba(15,42,49,.88) 0%,rgba(15,42,49,.25) 55%,rgba(15,42,49,0) 85%)}
.tg-velo{background:linear-gradient(0deg,rgba(15,42,49,.9) 0%,rgba(15,42,49,.3) 55%,rgba(15,42,49,0) 90%)}
.sede-nombre,.sede-zona,.sede-cuenta,.tg-nombre,.tg-fecha,.tg-precio,.tg-orden{color:#fff}
.sede-zona{color:#FFD2A2}
.tg-precio b{color:#FFC98F;-webkit-text-fill-color:#FFC98F;background:none}
.sede-cuenta{background:rgba(15,42,49,.72);border-color:rgba(255,255,255,.35);color:#fff}

/* ── Bloques que siguen siendo oscuros a propósito ─────────── */
.cta{background:var(--dark);border:0}
.cta h2,.cta .overline{color:#fff}
.cta p,.cta .tel{color:#D8E4E2}
.cta .tel a{color:#FFCA93}
.franja-frase span{color:#fff}
.site-footer{background:#102C34;color:#BDCCCE;border:0}
.site-footer h4{color:#EBC395}
.site-footer a,.footer-bottom a,.site-footer p{color:#D2DDDC}
.site-footer a:hover{color:#fff}
.footer-bottom{border-color:#365159;color:#BDCCCE}
.cabecera-simple{background:radial-gradient(90% 140% at 12% 0%,rgba(187,72,41,.10) 0%,rgba(187,72,41,0) 60%),var(--paper-2)}
.cabecera-simple h1{color:var(--ink)}

/* ── Detalles sueltos ──────────────────────────────────────── */
.barra,.section-head .barra{background:var(--escudo)}
.overline{color:var(--teja)}
.morelink,.enlace-sede a{color:var(--teja);border-color:#C98F76}
.morelink:hover,.enlace-sede a:hover{color:#8F3520;border-color:#8F3520}
.subnav a{color:var(--ink-2)}
.subnav a:hover,.subnav a.activo{color:var(--ink);background:#EAF0EB}
.play-video,.videobox .vb-pie{color:var(--ink)}
.play-video{background:#fff;border-color:var(--line)}
.intro{background:var(--paper)}
.intro-txt{color:var(--ink-3)}
.progress{background:var(--escudo)}
.cursor,.cursor-anillo{mix-blend-mode:normal}
.cursor{background:var(--teja)}
.cursor-anillo{border-color:rgba(187,72,41,.45)}

/* ── Textos que en el tema negro eran blancos y aquí no se veían ── */
.campo label,.premio-1,.quickfacts dd,.facts b,.tabla td b,.day-head .d,
.infogrid h3,.dosColumnas .no h3,.pricing h3,.step h3,.fecha-dias b,
.fecha-datos b,.calc-lines li b,.calc-row label,.stepper input,
.aviso-disco span b,.buscaBox input,.sug,.tcard h3,.distancias .km,
.nav a:hover,.nav a[aria-current],.subnav a:hover,.subnav a.activo{color:var(--ink)}
.premio-1 span{color:var(--teja)}
.stepper button{background:#fff;border-color:var(--line);color:var(--ink)}
.buscaBox input{background:#fff;border-color:var(--line)}

/* El logo blanco no se ve sobre fondo claro: arriba va el de color.
   En el pie, que sigue siendo oscuro, se queda el blanco. */
.site-header .logo img{content:url("logos/cnsports-horizontal.png")}

/* El idioma activo va en pastilla oscura: su letra, blanca */
.idiomas a[aria-current]{background:var(--dark);color:#fff}

/* En los formularios, el nombre del torneo de cada opción era blanco
   sobre blanco y no se veía hasta que la marcabas */
.opcion span{color:var(--ink)}
.opcion small{color:var(--ink-3)}

/* Las dos tarjetas de contacto (WhatsApp y email) */
.canal b,.canal span{color:var(--ink)}
.canal span span{color:var(--ink-3)}
.canal-wa svg{fill:#25D366}
.canal-mail svg{stroke:var(--teja)}

/* ═══════════════════════════════════════════════════════════════
   ARREGLOS 20-09-2026 (tarde)
   ═══════════════════════════════════════════════════════════════ */

/* ── La barra de arriba, al bajar la página ──────────────────
   El tema negro oscurecía la barra en cuanto se bajaba un poco
   («scrolled»). Con el fondo claro eso dejaba letras oscuras
   sobre barra oscura: el menú no se leía. Ahora la barra se
   queda clara siempre y solo gana un poco de sombra.          */
.site-header.scrolled .wrap{background:rgba(255,255,255,.97);
  border-color:var(--line-2);box-shadow:0 16px 40px rgba(24,54,64,.14)}

/* El menú, con más fuerza: antes iba en gris claro */
.nav a{color:var(--ink);font-weight:600}
.nav a:hover,.nav a[aria-current]{color:var(--teja);background:#F0E6E0}
.nav a[aria-current]{color:var(--teja)}
.idiomas a{color:var(--ink-2)}

/* ── Los botones naranjas ────────────────────────────────────
   Sobre el terracota, la letra oscura se leía a medias. Va en
   blanco, y al pasar el ratón el botón se oscurece en vez de
   ponerse blanco (que era lo del tema negro).                 */
.btn-grad,.btn-primary,.btn-grad:hover,.btn-primary:hover,
.nav a.btn,.nav a.btn:hover{color:#fff}
.btn-grad::before,.btn-primary::before{
  background:linear-gradient(115deg,#9E3B21 0%,#B14526 52%,#BE5730 100%)}
.btn-outline:hover,.btn-ghost:hover{color:#fff}

/* ── El calendario único (las dos sedes juntas) ──────────────── */
.sede-banner{border-color:var(--line);box-shadow:var(--shadow)}
.sede-banner img{filter:none}
.cal-lista{background:#fff;border-color:var(--line)}
.cal-lista a:hover,.cal-lista a:focus-visible{background:#F4F7F3}
.cal-lista li+li{border-color:var(--line)}
.sl-sede{background:#F2F5F1;border-color:var(--line);color:var(--ink-2)}
.cal-btn,.cal-btn:hover{color:#fff}

/* El botón de descargar el catálogo lleva una línea pequeña debajo:
   con el botón en blanco, esa línea también va en blanco flojito. */
.btn-grad.btn-pdf small{color:rgba(255,255,255,.82)}
.btn-grad.btn-pdf:hover small{color:rgba(255,255,255,.82)}
.btn-grad.btn-pdf::after{background:#fff;color:var(--teja)}
.btn-grad.btn-pdf:hover::after{background:#fff;color:var(--teja)}
.cal-btn b,.cal-btn span,.cal-btn i{color:inherit}

/* ═══════════════════════════════════════════════════════════════
   ARREGLOS 20-09-2026 (noche) · REPASO CONTRA LA WEB DE FÚTBOL
   ═══════════════════════════════════════════════════════════════ */

/* ── EL MENÚ DEL MÓVIL ──────────────────────────────────────
   El panel de pantalla completa seguía siendo negro y, con el
   tema claro, su letra pasó a oscura: no se leía nada.        */
@media (max-width:860px){
  .nav{background:rgba(250,249,245,.98);backdrop-filter:blur(24px)}
  .nav a{color:var(--ink);border-bottom-color:var(--line)}
  .nav a[aria-current]{color:var(--teja)}
  .nav a.btn,.nav a.btn:hover{color:#fff}
}

/* ── La barra de secciones pegada arriba ─────────────────────
   La pastilla interior seguía siendo negra translúcida, así que
   sus enlaces (ahora oscuros) no se leían.                    */
.subnav{background:transparent}
.subnav .wrap{background:rgba(255,255,255,.94);border:1px solid var(--line);
  box-shadow:0 10px 26px rgba(24,54,64,.10);backdrop-filter:blur(14px)}
.subnav a{color:var(--ink-2)}
.subnav a:hover,.subnav a.activo,.subnav a.on{color:var(--ink);background:#EDF2EE}
.subnav a.on,.subnav a.activo{color:var(--teja)}

/* ── El párrafo del bloque final ─────────────────────────────
   Iba con más fuerza que la regla general y se quedaba en gris
   azulado sobre el fondo azulado oscuro del bloque.           */
.cta>.wrap>p{color:#D8E4E2}
.cta .tel{color:#BFD0D2}
.cta strong,.cta b,.site-footer strong,.site-footer b,
.franja-frase strong,.franja-frase b,.heroF strong,.heroF b{color:#fff}
.cta .tel strong{color:#FFCA93}

/* ── El párrafo de entrada ("lead") ──────────────────────────
   Nació en gris muy claro, para fondo negro. Sobre crema
   desaparece en las páginas que no llevan foto de cabecera.   */
.lead{color:var(--ink-2)}
.lead strong{color:var(--ink)}
.heroF .lead,.heroF .lead strong{color:#fff}