/**
 * sc-compat.css
 * Correcciones mínimas de compatibilidad con Hello Elementor.
 * Solo anula lo que Hello Elementor sobreescribe incorrectamente.
 *
 * @package SurfcampRibadesella
 */

/* ── 1. Eliminar padding/margin que Hello añade al contenido de página ── */
.page-template-default .site-content,
.page-template-default .entry-content,
.elementor-widget-container {
    padding: 0;
    margin: 0;
}

/* ── 2. Fuente: Hello Elementor usa su propia variable de fuente ── */
:root {
    --e-global-typography-primary-font-family: "Montserrat", system-ui, sans-serif;
    --e-global-typography-secondary-font-family: "Montserrat", system-ui, sans-serif;
    --e-global-typography-text-font-family: "Montserrat", system-ui, sans-serif;
    --e-global-typography-accent-font-family: "Montserrat", system-ui, sans-serif;
}

/* ── 3. Imágenes: Hello fuerza max-width:100% rompiendo object-fit ── */
.fcell-media img,
.exp-media img,
.offer-media img,
.lodge-media img,
.live-banner-media img,
.ph img,
.staff-item img,
.hero-video {
    max-width: none;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ── 4. Secciones a ancho completo ──
   IMPORTANTE: cualquier nueva sección/hero de página que deba ocupar todo
   el ancho de la ventana (no el ancho limitado del contenido de Hello
   Elementor) tiene que añadirse aquí, o se verá con márgenes blancos
   laterales como si estuviera dentro de un contenedor centrado.
   Añadidos: .tx-hero (shortcode sc_tx_hero, páginas interiores),
   .space-hero (shortcode sc_space_hero_page, Surf Palace/Villa Pilar). */
.hero,
.tx-hero,
.space-hero,
.sc-videoband,
.sc-staff,
.sc-faq {
    max-width: none;
    width: 100%;
}

/* ── 4b. Ancho completo DENTRO de una sección "boxed" de Elementor ──
   El truco de "100vw + margen negativo" depende de que TODOS los
   contenedores padre estén centrados de forma simétrica — dentro de
   Elementor eso no siempre se cumple, y el bloque acaba descentrado en
   vez de a ancho completo. Es más fiable anular directamente el ancho
   del contenedor de Elementor que envuelve la sección, en vez de
   intentar "escapar" de él desde dentro con matemáticas de viewport.
   Añadir aquí cualquier futura sección de este tipo (shortcode/HTML
   directo dentro de un widget de Elementor, en vez de PHP puro). */
.elementor-section:has(.e3-hero),
.elementor-section:has(.sc-destino),
.elementor-section:has(.destino),
.elementor-section:has(.ambient) {
    padding: 0 !important;
}
.elementor-section:has(.e3-hero) > .elementor-container,
.elementor-section:has(.sc-destino) > .elementor-container,
.elementor-section:has(.destino) > .elementor-container,
.elementor-section:has(.ambient) > .elementor-container {
    max-width: none !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}
.elementor-section:has(.e3-hero) .elementor-column,
.elementor-section:has(.sc-destino) .elementor-column,
.elementor-section:has(.destino) .elementor-column,
.elementor-section:has(.ambient) .elementor-column {
    max-width: none !important;
    width: 100% !important;
}
.e3-hero,
.sc-destino,
.destino,
.ambient {
    max-width: none !important;
    width: 100% !important;
}

/* ── 4c. Cualquier sección de Elementor con maquetación del tema ──
   El HTML del diseño (widget HTML o shortcode) trae su propio .wrap con el
   gutter. La sección de Elementor que lo envuelve sobra: su contenedor
   limita el ancho (Qué ver: 767px, el banner no llegaba a los lados) y su
   columna añade 10px de relleno (marco blanco en Actividades, Escalera 3,
   Historia…). Se anula para toda sección que contenga un .wrap. Las
   secciones con widgets nativos de Elementor no llevan .wrap y no cambian. */
.elementor-section:has(.wrap) {
    padding: 0 !important;
}
.elementor-section:has(.wrap) > .elementor-container {
    max-width: none !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}
.elementor-section:has(.wrap) .elementor-column {
    max-width: none !important;
    width: 100% !important;
}
.elementor-section:has(.wrap) .elementor-widget-wrap {
    padding: 0 !important;
}


/* ── 5. Cursor en ítems de menú ── */
.nav-link,
.nav-item,
.dd-link,
.dropdown,
.dropdown a {
    cursor: pointer !important;
}

/* ── 6. Hello añade margen superior al primer elemento de página ── */
.hello-elementor .page-content > *:first-child,
.hello-elementor .entry-content > *:first-child {
    margin-top: 0;
}

/* ── Kick badge (experiencias) ── */
.kick {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
    color: var(--green) !important;
    margin-bottom: 12px !important;
}
.kick .ic {
    width: 16px !important;
    height: 16px !important;
}

/* ── Exp-cta link ── */
.exp-cta {
    display: inline-flex !important;
    align-items: center !important;
    gap: 9px !important;
    margin-top: 20px !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: .06em !important;
    color: var(--green-ink) !important;
    border-bottom: 2px solid var(--cyan) !important;
    padding-bottom: 5px !important;
    text-decoration: none !important;
}
.exp-cta .ic { width: 16px !important; height: 16px !important; }

/* ── Forzar layouts grid que Hello Elementor sobreescribe ── */

/* Feature grid: 2 col móvil, 4 col desktop */
.fgrid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 1px !important;
    background: var(--line) !important;
}
@media(min-width:1180px) {
    .fgrid { grid-template-columns: repeat(4,1fr) !important; }
}

/* Experiencias: imagen+texto en fila en desktop */
.exp-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    overflow: hidden !important;
}
@media(min-width:860px) {
    .exp-row { grid-template-columns: 1.05fr 1fr !important; align-items: stretch !important; }
    .exp-row.rev .exp-media { order: 2 !important; }
    .exp-body { padding: 46px 44px !important; align-self: center !important; }
}

/* Collage destino */
.collage {
    display: grid !important;
    grid-template-columns: repeat(2,1fr) !important;
    gap: 6px !important;
}
@media(min-width:1180px) {
    .collage { grid-template-columns: repeat(4,1fr) !important; grid-auto-rows: 210px !important; }
    .collage .ph.a { grid-column: span 2 !important; grid-row: span 2 !important; aspect-ratio: auto !important; }
    .collage .ph.b { grid-column: span 2 !important; aspect-ratio: auto !important; }
    .collage .ph.c { grid-column: span 2 !important; grid-row: span 1 !important; aspect-ratio: auto !important; }
}

/* Eliminar espacios excesivos entre secciones */
.sc-intro, .sc-grid, .sc-alojamientos, .sc-experiencias,
.sc-destino, .sc-videoband, .sc-ofertas, .sc-webcam,
.sc-staff, .sc-confianza, .sc-faq, .sc-cta {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Hello Elementor añade padding a .section */
.section {
    padding: 72px 0 !important;
}

/* ── Cursor en elementos clicables ── */
a,
button,
[role="button"],
.nav-link,
.dd-link,
.btn,
.fcell,
.exp-cta,
.live-banner,
.staff-item,
.offer,
.faq-cat {
    cursor: pointer !important;
}

/* ── Contact Form 7: heredar estilos del prototipo ── */
.wpcf7-form-control-wrap {
    display: contents;
}
.wpcf7-not-valid-tip {
    font-size: 12px !important;
    color: #c0392b !important;
    margin-top: 4px !important;
}
.wpcf7-response-output {
    display: none !important;
}

/* ── Formulario de reserva ── */
.form-error {
    border-radius: 4px;
    font-size: 14px;
}
.reserva-form .field select {
    border: 1px solid var(--line);
    background: var(--white);
    padding: 13px 14px;
    font-size: 15px;
    color: var(--ink);
    width: 100%;
}

/* ── Formularios de reserva de clases, cursos y material: resumen (el configurador va en sc-clases.css, 06/10/2026) ── */
.cfg-result{margin-top:34px;padding:26px 28px;border:1px solid var(--line);background:var(--cream)}
.cfg-resumen{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--green-ink);margin:0 0 18px}

/* Condiciones (enlace + modal) */
.cfg-terms-link{color:var(--green-deep);font-weight:600;text-decoration:underline;cursor:pointer;background:none;border:0;padding:0;font-size:inherit}
.cfg-terms-modal{position:fixed;inset:0;background:rgba(6,32,29,.6);display:flex;align-items:center;justify-content:center;z-index:9999;padding:20px}
.cfg-terms-modal[hidden]{display:none}
.cfg-terms-box{background:#fff;max-width:560px;width:100%;max-height:80vh;overflow-y:auto;padding:32px;position:relative}
.cfg-terms-box h3{font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--green-ink);margin:0 0 16px}
.cfg-terms-box p{font-size:14px;color:var(--slate);line-height:1.7;margin:0 0 12px}
.cfg-terms-close{position:absolute;top:20px;right:20px;background:none;border:0;font-size:20px;cursor:pointer;color:var(--slate);line-height:1}


/* ── Webcam: mensaje del día, datos de mar en vivo, badge live ── */
.webcam-nota{
    background:var(--sunset);color:#fff;padding:22px 26px;margin-bottom:20px;
}
.webcam-nota-kicker{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;opacity:.9}
.webcam-nota-texto{font-style:italic;font-size:16px;line-height:1.6;margin:10px 0 6px}
.webcam-nota-autor{font-size:13px;font-weight:600;opacity:.9;margin:0}

.webcam-pills{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:18px}
.webcam-pill{
    display:inline-flex;align-items:center;gap:7px;padding:8px 14px;
    background:var(--cream);font-size:13px;font-weight:600;color:var(--ink);
}
.webcam-pill .dot{width:8px;height:8px;border-radius:50%;background:var(--ok,#1f9e6f);display:inline-block}

.webcam-live{position:relative}
.webcam-badge-live{
    position:absolute;top:14px;left:14px;z-index:2;
    display:flex;align-items:center;gap:8px;padding:7px 14px;
    background:rgba(6,32,29,.85);color:#fff;font-size:12px;font-weight:700;
    text-transform:uppercase;letter-spacing:.05em;
}
.webcam-badge-live .dot{width:7px;height:7px;border-radius:50%;background:#e3495a}
.webcam-badge-fecha{font-weight:500;opacity:.85;text-transform:none;letter-spacing:0;margin-left:4px}

/* ── FAQ home (María José): forzar que la respuesta esté realmente
   oculta hasta desplegar, sin depender de qué clase exacta use el JS.
   Corrige: se veía una línea de la respuesta y la fila salía más alta
   y descentrada de lo que debía. ── */
.faq-item .faq-a{
    display:none;
    overflow:hidden;
    max-height:0;
}
.faq-item:has(.faq-q[aria-expanded="true"]) .faq-a{
    display:block;
    max-height:none;
}
.faq-q{display:flex;align-items:center;justify-content:space-between;width:100%}

/* ── Formulario de contacto (Contact Form 7): forzar etiqueta encima
   del campo, siempre, sin depender del ancho de pantalla. El HTML de
   CF7 pone <label> y el campo como elementos en línea por defecto, y
   solo parecían apilados por casualidad de ajuste de línea en pantallas
   estrechas — en pantallas anchas cada etiqueta tiene largo distinto y
   los campos "bailan", sin arrancar todos en el mismo punto. ── */
.field p{display:flex;flex-direction:column;gap:6px;margin:0}
.field label{
    font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
    color:var(--green-ink);display:block;
}
.field .wpcf7-form-control-wrap{display:block;width:100%}
.field input.wpcf7-form-control,
.field select.wpcf7-form-control,
.field textarea.wpcf7-form-control{
    width:100%;box-sizing:border-box;
    border:1px solid var(--line);padding:13px 14px;font-size:15px;
    border-radius:0;background:var(--white);color:var(--ink);
}
.field input.wpcf7-form-control:focus,
.field select.wpcf7-form-control:focus,
.field textarea.wpcf7-form-control:focus{outline:none;border-color:var(--green)}

/* ── Galería de vídeos (Vídeos): rejilla de .staff-photo-grid + modal ── */
.video-item{position:relative;display:block;width:100%;padding:0;border:0;background:var(--ink);cursor:pointer}
.video-item video,.video-item img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;transition:transform .3s}
.video-item:hover video,.video-item:focus-visible video,.video-item:hover img,.video-item:focus-visible img{transform:scale(1.05)}
.video-item-yt{position:absolute;left:8px;bottom:8px;padding:3px 7px;background:rgba(6,32,29,.75);color:#fff;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.video-item:focus-visible{outline:3px solid var(--cyan-soft);outline-offset:2px}
.video-cap{margin-top:8px;font-size:13px;line-height:1.35;font-weight:600;color:var(--green-ink)}
.video-play{
    position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
    width:48px;height:48px;border-radius:50%;background:rgba(6,32,29,.75);
    display:flex;align-items:center;justify-content:center;color:#fff;
}
.video-play svg{width:20px;height:20px;margin-left:3px}

.video-modal{position:fixed;inset:0;background:rgba(6,32,29,.9);z-index:9999;display:flex;align-items:center;justify-content:center;padding:20px}
.video-modal[hidden]{display:none}
.video-modal-inner{position:relative;width:100%;max-width:920px;aspect-ratio:16/9}
.video-modal-frame{width:100%;height:100%}
.video-modal-frame video,.video-modal-frame iframe{width:100%;height:100%;display:block;border:0;background:#000}
.video-aviso{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;padding:24px;background:var(--ink);color:#fff;text-align:center}
.video-aviso p{max-width:520px;font-size:15px;line-height:1.6}
.video-aviso-btns{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.video-aviso .btn-outline{color:#fff;border-color:rgba(255,255,255,.6)}
.video-modal-close{position:absolute;top:-40px;right:0;background:none;border:0;color:#fff;font-size:22px;cursor:pointer}

/* ── Grid de fotos de staff, sin nombre ni cargo ── */
.staff-photo-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(min-width:640px){.staff-photo-grid{grid-template-columns:repeat(4,1fr)}}
@media(min-width:1000px){.staff-photo-grid{grid-template-columns:repeat(6,1fr)}}
.staff-photo-item{aspect-ratio:1/1;overflow:hidden}
.staff-photo-item img{width:100%;height:100%;object-fit:cover;display:block}

/* ── Cuadro de evolución/timeline (Historia): desplazable en móvil ── */
.historia-timeline-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -20px;padding:0 20px}
.historia-timeline-wrap img{max-width:none;height:auto;width:1400px}
@media(min-width:1024px){.historia-timeline-wrap{overflow-x:visible;margin:0;padding:0}.historia-timeline-wrap img{max-width:100%;width:100%}}
.historia-timeline-hint{display:block;font-size:12.5px;color:var(--slate);text-align:center;margin-top:8px}
@media(min-width:1024px){.historia-timeline-hint{display:none}}

/* ── Historia · «Nuestro equipo»: texto claro sobre el fondo oscuro de .destino ──
   El widget HTML de Elementor pone .staff-body en var(--slate), gris sobre verde
   oscuro. Con dos clases esta regla gana a la del widget aunque cargue antes. */
.destino .staff-body{color:var(--cream)}

/* ── El Surfcamp: «Nuestra historia» y «Lo que nos mueve» (inc/el-surfcamp.php) ── */
/* El Surfcamp con el diseño de mjyera (07/10/2026): título pequeño en «Nuestra historia» y «Lo que nos mueve» centrado, en banda crema, cuatro recuadros */
.esc-h3{font-size:clamp(20px,2.4vw,24px);font-weight:600;color:var(--green-ink);letter-spacing:.005em;margin-top:14px}
.esc-mueve{background:var(--cream)}
.esc-centro{text-align:center}
.esc-centro .lead-rule{margin-left:auto;margin-right:auto}
@media(min-width:900px){.esc-grid{grid-template-columns:repeat(4,1fr)}}
.esc-texto{margin-top:20px;color:var(--slate);font-size:15.5px;line-height:1.75;max-width:70ch}
.esc-texto p+p{margin-top:14px}
.esc-split{display:grid;grid-template-columns:1fr;gap:34px;align-items:center}
@media(min-width:900px){.esc-split{grid-template-columns:1fr 1fr;gap:56px}}
.esc-foto img{width:100%;height:auto;display:block}
.esc-foto-pendiente{aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;background:var(--green-ink);color:#fff;font-weight:600;letter-spacing:.04em}

/* ── Ficha de oferta (single-oferta.php): el texto, como en las páginas de campaña ── */
.of-texto p{font-size:16px;line-height:1.78;color:var(--slate)}
.of-texto p+p{margin-top:14px}

/* ── Preguntas frecuentes de las páginas interiores (.faq--filas), como la maqueta (06/10/2026):
   filas separadas por una línea, sin cajas. sc-hello-fixes.css pone cajas con !important a todas
   las .faq-item; aquí se deshace solo en este bloque, sin tocar ese archivo ni la portada. ── */
.faq--filas .faq-list{gap:0 !important}
.faq--filas .faq-item{background:none !important;border:0 !important;border-bottom:1px solid rgba(255,255,255,.16) !important}
.faq--filas .faq-item:first-child{border-top:1px solid rgba(255,255,255,.16) !important}
.faq--filas .faq-q{padding:22px 2px !important;font-size:16px !important;background:none !important;border:0 !important;text-align:left}
.faq--filas .faq-a{padding:0 2px !important}
/* La respuesta se pliega con max-height (sc.js), no con display: el bloque «FAQ home» la deja en
   display:none hasta abrirla y sc.js mide su altura justo antes, con lo que medía 0 y no se abría (06/10/2026). */
.faq--filas .faq-item .faq-a{display:block}
.faq--filas .faq-a p{padding:0 0 22px;color:rgba(255,255,255,.8);font-size:14.5px;line-height:1.6;max-width:64ch;margin:0}

/* ── Alquiler · «Nuestro material»: precio por día si son más días (inc/alquiler-pagina.php, 06/10/2026) ── */
.tile .alq-mas{flex:0 0 auto;font-size:12.5px;margin:0}
.tile.feat-tile .alq-mas{color:rgba(255,255,255,.75)}

/* ── Catamarán · «Salidas y precios»: botón de reservar en cada tarjeta (inc/reserva-catamaran.php, 07/10/2026) ── */
.tile .cat-btn{align-self:flex-start;margin-top:6px}
.tile .cat-nota{flex:0 0 auto;font-size:12.5px;margin:6px 0 0;min-height:50px;display:flex;align-items:center} /* mismo alto que el botón «Reservar»: el precio queda alineado con las otras tarjetas */

/* ── Cajitas con icono (.act-chip: Escalera 3, «También puede interesarte», chips): el círculo del icono, transparente, coge el fondo de la cajita (07/10/2026) ── */
.act-chip > span.ico{width:34px;height:34px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:transparent;color:var(--green)} /* span.ico: gana a la de sc.css, que se carga después */
.act-chip .ico .ic{width:19px;height:19px}

/* ── Listas en los textos del editor (07/10/2026): con punto (o número) y sangrado. Solo las listas
   sin clase: las que tienen diseño propio (.faq-checklist, .check-list…) no se tocan. El reseteo
   general (*{padding:0}) les quitaba el sangrado y el punto quedaba fuera. ── */
:is(.of-texto,.guide-texto,.esc-texto,.seo-copy,.faq-a,.e3-texto,.e3-info-item,.historia-body,.staff-body,.exp-body,.post-body,.space-desc) :is(ul,ol):not([class]){padding-left:1.4em;margin:0 0 14px}
:is(.of-texto,.guide-texto,.esc-texto,.seo-copy,.faq-a,.e3-texto,.e3-info-item,.historia-body,.staff-body,.exp-body,.post-body,.space-desc) ul:not([class]){list-style:disc}
:is(.of-texto,.guide-texto,.esc-texto,.seo-copy,.faq-a,.e3-texto,.e3-info-item,.historia-body,.staff-body,.exp-body,.post-body,.space-desc) ol:not([class]){list-style:decimal}
:is(.of-texto,.guide-texto,.esc-texto,.seo-copy,.faq-a,.e3-texto,.e3-info-item,.historia-body,.staff-body,.exp-body,.post-body,.space-desc) :is(ul,ol):not([class]) li{margin-bottom:.4em;line-height:1.6}
:is(.of-texto,.guide-texto,.esc-texto,.seo-copy,.faq-a,.e3-texto,.e3-info-item,.historia-body,.staff-body,.exp-body,.post-body,.space-desc) :is(ul,ol):not([class]) ul{margin:.4em 0 0}

/* ── «Qué incluye» ([sc_incluye], en todas las páginas que lo usan): línea gris entre recuadros (07/10/2026).
   La línea era una sombra hacia fuera y el recuadro de al lado, blanco, la tapaba. Ahora va por dentro,
   a la derecha y abajo de cada uno, y el marco exterior solo arriba y a la izquierda para que no salga doble. ── */
.section.sc-incluye .inc-grid{border-width:1px 0 0 1px}
.sc-incluye .inc-grid .inc{box-shadow:inset -1px 0 0 var(--line),inset 0 -1px 0 var(--line)}

/* ── Botón blanco (.btn-white): solo estaba en sc-home.css (portada) y en las páginas interiores el botón de «Ribadesella se vive» salía sin fondo (07/10/2026) ── */
.btn-white{background:#fff;color:var(--green-ink)}
.btn-white:hover{background:var(--cream)}
.destino-cta{margin-top:32px}

/* ── «Alójate frente al mar» con un solo alojamiento (Menores, 07/10/2026): una columna, como la maqueta
   surf-camp-menores.html (foto arriba a todo el ancho, texto y características en fila debajo) ── */
.lodging.lodging--uno{grid-template-columns:1fr}
.lodging--uno .lodge-body p{max-width:none}

/* ── Menores · «Confianza para las familias»: dos columnas, como la maqueta (07/10/2026) ── */
@media(min-width:620px){.inc-grid.men-conf{grid-template-columns:1fr 1fr}}

/* ── «Para quién es» en chips dentro del texto introductorio (07/10/2026) ── */
.intro-quien{margin-top:34px}
.intro-quien .intro-quien-tit{font-size:15px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--green-ink);margin:0 0 12px}
.intro-quien-chips{display:flex;flex-wrap:wrap;gap:10px}
.intro-quien-chips .intro-quien-chip{display:inline-flex;align-items:center;gap:9px;background:var(--cream);border:1px solid var(--line);padding:11px 16px;font-size:14px;font-weight:500;line-height:1.35;color:var(--green-ink)}
.intro-quien-chips .intro-quien-chip .ic{width:16px;height:16px;color:var(--green);flex-shrink:0}

/* ── Vídeo de YouTube de fondo en los heroes, solo con cookies aceptadas (inc/hero-youtube.php, 07/10/2026) ── */
.hero-yt{position:absolute;inset:0;z-index:0;overflow:hidden;container-type:size;pointer-events:none}
.hero-yt iframe{position:absolute;top:50%;left:50%;width:max(100cqw,177.78cqh);height:max(100cqh,56.25cqw);transform:translate(-50%,-50%);border:0}
.hero-yt-aviso{margin:18px 0 0}
.hero-yt-aviso[hidden]{display:none}
.hero-yt-aviso .hero-yt-cookies{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border:1px solid rgba(255,255,255,.55);background:rgba(0,0,0,.28);color:#fff;font-size:13px;font-weight:600;line-height:1.3;text-decoration:none}
.hero-yt-aviso .hero-yt-cookies:hover{background:rgba(0,0,0,.45)}
.hero-yt-aviso .hero-yt-cookies .ic{width:15px;height:15px;flex-shrink:0}

/* ── Webcam · «Webcam Ribadesella en directo» (inc/webcam-info.php, 07/10/2026; antes en el widget HTML de Elementor) ── */
.webcam-info{padding:48px 0;background:var(--cream)}
.webcam-info h2{font-size:clamp(20px,3.5vw,28px);text-transform:uppercase;font-weight:600;color:var(--green-ink);margin:10px 0 14px}
.webcam-info p{font-size:15px;line-height:1.7;color:var(--slate);margin-bottom:12px}
.webcam-cams{margin-top:24px;display:grid;grid-template-columns:1fr;gap:12px}
.cam-card{border:1px solid var(--line);padding:14px 16px;display:flex;align-items:center;gap:12px;background:#fff}
.cam-card .cam-dot{width:10px;height:10px;border-radius:50%;background:#4ade80;flex-shrink:0}.cam-card .cam-dot--ambar{background:#fbbf24}
.cam-card .cam-name{font-size:14px;font-weight:600;color:var(--green-ink)}.cam-card .cam-desc{font-size:12.5px;color:var(--slate)}
@media(min-width:900px){.webcam-info .wrap{display:grid;grid-template-columns:1.4fr 1fr;gap:48px;align-items:start}}

/* ── Páginas legales, plantilla «Texto legal» (inc/textos-legales.php, 07/10/2026; antes en el widget HTML de Elementor) ── */
.doc-hero{background:var(--green-ink);padding:44px 0;color:#fff}
.doc-hero .eyebrow{color:rgba(255,255,255,.72);display:inline-flex;align-items:center;gap:8px}
.doc-hero h1{font-size:clamp(26px,5vw,42px);text-transform:uppercase;font-weight:600;margin:10px 0 0;color:#fff}
.doc-body{padding:48px 0 64px}
.doc-wrap{max-width:820px}
.doc-wrap .doc-updated{font-size:13px;color:var(--slate);margin-bottom:24px;font-style:italic}
.doc-wrap h2{font-size:19px;font-weight:700;color:var(--green-ink);text-transform:uppercase;letter-spacing:.02em;margin:32px 0 12px}
.doc-wrap h2:first-child{margin-top:0}
.doc-wrap h3{font-size:16px;font-weight:700;color:var(--green-ink);margin:24px 0 10px}
.doc-wrap p{font-size:15px;line-height:1.75;color:var(--slate);margin-bottom:12px}
.doc-wrap ul,.doc-wrap ol{margin:0 0 14px;padding-left:20px}
.doc-wrap ul{list-style:disc}.doc-wrap ol{list-style:decimal}
.doc-wrap li{font-size:15px;line-height:1.7;color:var(--slate);margin-bottom:6px}
.doc-wrap a{color:var(--green)}
.doc-wrap .cookie-declaration{margin:16px 0 24px;font-size:14px;overflow-x:auto}
.cookie-table{width:100%;border-collapse:collapse;margin:16px 0;font-size:13px}
.cookie-table th,.cookie-table td{border:1px solid var(--line);padding:10px 12px;text-align:left;vertical-align:top}
.cookie-table th{background:var(--cream);color:var(--green-ink);font-size:11px;text-transform:uppercase;letter-spacing:.05em}

/* ── Capa de cookies de Cookiebot (07/10/2026), como la de uup.es: franja oscura abajo, caja
   blanca centrada, botones oscuros. La plantilla de la capa (textos, #cookieall, #mostrar,
   #div_check…) es la de la cuenta de Cookiebot; aquí solo su aspecto. !important porque
   Cookiebot pone estilos en línea. Cookiebot la oculta con display:none al decidir. ── */
#CybotCookiebotDialog{position:fixed!important;left:0;right:0;bottom:0!important;top:auto;z-index:2147483645;width:100%!important;max-height:100vh;overflow-y:auto;padding:2% 0!important;background:rgba(0,0,0,.8)!important;box-shadow:none;font-size:14px!important;line-height:1.4;color:#222}
#CybotCookiebotDialogBody{position:relative;width:auto;max-width:none;margin:0 5vw!important;padding:5% 4%!important;background:#fff;max-height:calc(100vh - 40px);overflow-y:auto}
@media(min-width:900px){#CybotCookiebotDialogBody{margin:0 10vw!important;padding:22px 26px!important}}
@media(min-width:1200px){#CybotCookiebotDialogBody{margin:0 20vw!important}}
#CybotCookiebotDialog,#CybotCookiebotDialog a,#CybotCookiebotDialog div,#CybotCookiebotDialog p,#CybotCookiebotDialog button{font-family:inherit!important}
#CybotCookiebotDialogBodyContentTitle{display:block;margin:0 0 14px;font-size:16px;font-weight:700;line-height:1.1;color:#000}
@media(min-width:900px){#CybotCookiebotDialogBodyContentTitle{font-size:20px}}
#CybotCookiebotDialogBodyContentText p{margin:0 0 12px;font-size:13px;line-height:1.45;text-align:left;color:#222}
#CybotCookiebotDialogBodyContentText strong{font-weight:700;color:#000}
#CybotCookiebotDialogBodyContentText a{color:var(--orange-deep,#ee6336)!important;text-decoration:none}
#CybotCookiebotDialogBodyContentText a:hover{text-decoration:underline}
#CybotCookiebotDialogPoweredbyLink{display:none!important}
#CybotCookiebotDialogBodyLevelWrapper{display:block!important;width:100%!important;float:none}
#CybotCookiebotDialogBodyLevelButtonLevelOptinAllowallSelectionWrapper{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:4px;float:none!important}
@media(min-width:900px){#CybotCookiebotDialogBodyLevelButtonLevelOptinAllowallSelectionWrapper{justify-content:flex-end}}
#CybotCookiebotDialog #cookieall,#CybotCookiebotDialog #mostrar,#CybotCookiebotDialog #cookiesave,#CybotCookiebotDialog #CybotCookiebotDialogBodyButtonDecline{display:inline-flex!important;align-items:center;justify-content:center;width:auto!important;margin:0!important;padding:9px 15px!important;background:#333!important;border:0!important;border-radius:0!important;cursor:pointer;transition:background .2s}
#CybotCookiebotDialog #cookieall:hover,#CybotCookiebotDialog #mostrar:hover,#CybotCookiebotDialog #cookiesave:hover,#CybotCookiebotDialog #CybotCookiebotDialogBodyButtonDecline:hover{background:#000!important}
#CybotCookiebotDialog #cookieall a,#CybotCookiebotDialog #mostrar a,#CybotCookiebotDialog #cookiesave a,#CybotCookiebotDialog #CybotCookiebotDialogBodyButtonDecline a{display:inline!important;margin:0!important;padding:0;background:none!important;color:#fff!important;font-size:13px!important;font-weight:700!important;line-height:1.2;text-transform:none!important;text-decoration:none!important;white-space:nowrap}
@media(min-width:900px){#CybotCookiebotDialog #cookieall a,#CybotCookiebotDialog #mostrar a,#CybotCookiebotDialog #cookiesave a,#CybotCookiebotDialog #CybotCookiebotDialogBodyButtonDecline a{font-size:14px!important}}
#CybotCookiebotDialog #div_check{float:none;margin-top:16px;padding-top:14px;border-top:1px solid #e5e5e5}
#CybotCookiebotDialog #div_check p{margin:4px 0 10px;font-size:12px;line-height:1.45;color:#444}
#CybotCookiebotDialog .col_cookie{float:none!important;width:100%!important;padding:0!important;margin-bottom:8px}
#CybotCookiebotDialog .col_cookie>a{display:inline-flex;align-items:center;gap:6px;color:#000;text-decoration:none;cursor:pointer}
#CybotCookiebotDialog .col_cookie label{color:#000;font-weight:700;font-size:13px}
#CybotCookiebotDialog .col_cookie [type="checkbox"]{margin:0;accent-color:#333}
#CybotCookiebotDialog #btn_guardar{display:flex;justify-content:flex-end;margin-top:6px}

/* ── Fondo elegido por sección en Adultos y Menores (inc/fondos-seccion.php, 08/10/2026) ── */
.sc-fondo-blanco{background:#fff!important}
.sc-fondo-crema{background:var(--cream)!important}

/* ── Vídeos: 4 columnas en escritorio (las fotos del equipo de Nosotros siguen en 6), 08/10/2026 ── */
.staff-photo-grid.video-grid{gap:28px 14px}
@media(min-width:640px){.staff-photo-grid.video-grid{gap:36px 20px}}
@media(min-width:1000px){.staff-photo-grid.video-grid{grid-template-columns:repeat(4,1fr);gap:44px 24px}}

/* ── reCAPTCHA: sin la etiqueta flotante (08/10/2026). visibility y no display:none: con display:none Google deja de evaluar el envío. El aviso obligatorio va en cada formulario (functions.php). ── */
.grecaptcha-badge{visibility:hidden!important}
.sc-recaptcha-aviso{margin:12px 0 0;font-size:12px;line-height:1.5;color:var(--slate)}.sc-recaptcha-aviso a{color:inherit;text-decoration:underline}

/* ── Texto con editor bajo el título de una sección (Actividades, 08/10/2026): párrafos y listas como el texto de cabecera ── */
.section-head .sh-texto{max-width:56ch}.section-head .sh-texto p{margin-top:14px}
.section-head .sh-texto ul,.section-head .sh-texto ol{margin:12px 0 0;padding-left:20px;color:var(--slate);font-size:16px}.section-head .sh-texto ul{list-style:disc}.section-head .sh-texto ol{list-style:decimal}.section-head .sh-texto li{margin-bottom:4px}