/*
Theme Name: Refugio del Atlántico
Description: Tema de bloques para Refugio del Atlántico, en Tamaraceite.
Version: 1.0.5
Requires at least: 6.6
Text Domain: refugio-atlantico
*/
.ra-header{font-size:.94rem;border-bottom:1px solid #e4dfd4}
.ra-header a,.ra-footer a{text-decoration:none}
.ra-header a:hover,.ra-footer a:hover{text-decoration:underline}
.ra-brand{font-family:Georgia,serif;font-weight:bold}
.ra-header-inner,.ra-section,.ra-footer-inner{padding-inline:clamp(1.25rem,5vw,4rem)}
.ra-section{padding-block:clamp(3rem,7vw,6rem)}
.ra-hero{padding:clamp(4rem,11vw,9rem) max(6vw,1.25rem);background-position:center 53%;background-size:cover;background-image:linear-gradient(90deg,rgba(12,31,31,.83) 0%,rgba(12,31,31,.58) 35%,rgba(12,31,31,0) 64%),url('assets/portada-eventos.jpg')}
.ra-hero h1{max-width:13ch;font-size:clamp(3rem,8vw,6.5rem);line-height:1.02;margin-block:.4rem 1.2rem}
.ra-hero p{max-width:42ch}
.ra-kicker{font-size:.8rem;font-weight:bold;letter-spacing:.16em;text-transform:uppercase}
.ra-section h2{margin-block:0 .9rem}
.ra-sand{background:#f5f0e6}
.ra-forest{background-color:#173b3a;color:#fffdf8}
.ra-gallery{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.ra-gallery .wp-block-image{margin:0;min-width:0}
.ra-gallery img,.ra-intro-photo img{width:100%;height:auto;border-radius:.8rem;object-fit:cover}
.ra-gallery img{aspect-ratio:4/3}
.ra-gallery figcaption{font-size:.88rem;color:#526563;margin:.4rem 0 0}
.ra-features,.ra-nearby{display:grid!important;gap:1rem;grid-template-columns:repeat(3,minmax(0,1fr))}
.ra-card{background:#fffdf8;border:1px solid #e4dfd4;border-radius:1rem;padding:1.3rem;margin:0!important}
.ra-card h3{margin-top:0}
.ra-faq details{padding:.95rem 0;border-bottom:1px solid #e4dfd4}
.ra-faq summary{cursor:pointer;font-weight:bold}
.ra-footer{padding-block:2rem}
@media(max-width:780px){.ra-features,.ra-nearby,.ra-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:495px){.ra-features,.ra-nearby{grid-template-columns:1fr}.ra-gallery{gap:.7rem}}

/* Portada y navegación */
.ra-header .ra-header-inner { padding-block: .8rem; }
.ra-header .ra-header-inner p { margin-block: .2rem; }
section.ra-hero { padding: clamp(3rem, 7vw, 7rem) clamp(1rem, 6vw, 6rem); }
.ra-hero h1 { font-size: clamp(2.35rem, 6vw, 5rem); max-width: 15ch; }
.ra-hero .wp-block-buttons { display: flex; flex-wrap: wrap; gap: .65rem; }
.ra-hero .wp-block-button__link { min-height: 44px; box-sizing: border-box; padding: .75rem 1rem; font-size: 1rem; line-height: 1.35; }
.ra-hero .ra-whatsapp .wp-block-button__link { background: #fffdf8; color: #173b3a; }
.ra-hero .ra-whatsapp .wp-block-button__link:hover { background: #e3eee6; }
.ra-hero a:focus-visible { outline: 3px solid #fffdf8; outline-offset: 4px; }
.ra-section h2 { font-size: clamp(1.8rem, 4vw, 2.8rem); }

/* El formulario tiene fondo claro dentro de la sección verde. */
#reservar .booking-wrap, #reservar .calendar { color: #173b3a; }
#reservar .booking-wrap { --muted: #435b55; width: 100%; padding: clamp(.7rem, 3vw, 2rem); box-sizing: border-box; border-radius: 1rem; }
#reservar .booking-wrap h2 { color: #173b3a; font-size: clamp(1.65rem, 3.6vw, 2.6rem); }
#reservar .booking-wrap .eyebrow { color: #725028 !important; font-size: .83rem; font-weight: 700; }
#reservar #bookingForm { gap: 1rem; }
#reservar .calendar { padding: clamp(.6rem, 2vw, 1.25rem); min-width: 0; }
#reservar .calendar-top { gap: .4rem; }
#reservar #cal-month { color: #173b3a; text-align: center; font-size: clamp(1rem, 3.3vw, 1.45rem); }
#reservar #cal-help, #reservar #cal-status, #reservar .calendar small { color: #435b55; font-size: .94rem; line-height: 1.45; }
#reservar #cal-status:empty { display: none; }
#reservar .calendar-week, #reservar .calendar-days { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: clamp(2px, .6vw, 5px); }
#reservar .calendar-week { color: #173b3a; font-size: .9rem; }
#reservar .calendar-top button, #reservar .calendar-days button { min-width: 0; min-height: 44px; padding: 0; color: #173b3a; background: #eaf3ee; font-size: 1rem; }
#reservar .calendar-days button:hover { background: #d5e7dd; }
#reservar .calendar-days button.in-range { background: #d6e9de; }
#reservar .calendar-days button.selected { background: #173b3a; color: #fffdf8; }
#reservar .calendar-days button:disabled { background: #f4f1eb; color: #5f6a65; opacity: 1; }
#reservar .calendar-days button.occupied { background: #f1e3dd; color: #743d34; text-decoration-thickness: 2px; }
#reservar .calendar button:focus-visible, #reservar .field input:focus-visible, #reservar .field select:focus-visible { outline: 3px solid #225f59; outline-offset: 2px; }
#reservar .field label { font-size: .94rem; }
#reservar .field input, #reservar .field select { box-sizing: border-box; min-height: 44px; font-size: 1rem; border-color: #889f96; }
#reservar input[type=date] { display: block; min-inline-size: 0; }
#reservar .fine, #reservar .pricebox small { font-size: .9rem; line-height: 1.5; }
#reservar .pricebox { gap: .55rem; }
#reservar .pricebox strong { font-size: clamp(1.35rem, 4vw, 1.75rem); }
@media (max-width: 600px) {
  section.ra-hero { background-position: 60% center; }
  .ra-hero .wp-block-button, .ra-hero .wp-block-button__link { width: 100%; }
  .ra-hero p { font-size: 1rem; }
  #reservar.ra-section { padding-inline: .75rem; }
  #reservar .calendar-top button { width: 40px; flex: 0 0 40px; }
}

/* En pantallas estrechas el collage conserva su ancho sobre el texto. */
@media (max-width: 700px) {
  section.ra-hero {
    padding: 0 1.25rem 2.25rem;
    background-image: none;
  }
  section.ra-hero::before {
    content: "";
    display: block;
    aspect-ratio: 16 / 9;
    margin: 0 -1.25rem 1.65rem;
    background: center / cover no-repeat url('assets/portada-eventos.jpg');
  }
}

/* Carrusel: las fotos laterales ceden protagonismo a la del centro. */
#alojamiento h2 { text-align: center; }
#alojamiento .ra-gallery-shell { position: relative; margin-block: 1.15rem 1.8rem; }
#alojamiento .ra-gallery {
  --slide: 55%;
  position: relative;
  display: flex !important;
  align-items: start;
  gap: .8rem;
  margin: 0;
  padding: .35rem 0 .9rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-inline: contain;
  touch-action: pan-x pan-y pinch-zoom;
}
#alojamiento .ra-gallery > figure {
  flex: 0 0 var(--slide);
  scroll-snap-align: center;
  margin: 0;
  transform: scale(.86);
  transform-origin: center 45%;
  transition: transform .23s ease;
}
#alojamiento .ra-gallery > figure:first-child { margin-inline-start: calc((100% - var(--slide)) / 2); }
#alojamiento .ra-gallery > figure:last-child { margin-inline-end: calc((100% - var(--slide)) / 2); }
#alojamiento .ra-gallery > figure.is-current { transform: scale(1); }
#alojamiento .ra-gallery img { display: block; }
#alojamiento .ra-gallery figcaption { text-align: center; padding-inline: .2rem; }
#alojamiento .ra-gallery-controls { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.ra-gallery-controls button {
  position: absolute;
  top: 43%;
  transform: translateY(-50%);
  pointer-events: auto;
  width: 46px;
  height: 46px;
  color: #fffdf8;
  background: #173b3a;
  border: 2px solid #fffdf8;
  border-radius: 50%;
  box-shadow: 0 2px 8px #173b3a55;
  font: 1.25rem/1 Arial, sans-serif;
  cursor: pointer;
}
.ra-gallery-controls button:first-child { left: .35rem; }
.ra-gallery-controls button:last-child { right: .35rem; }
.ra-gallery-controls button[aria-disabled=true] { opacity: .5; cursor: default; }
#alojamiento .ra-gallery:focus-visible, .ra-gallery-controls button:focus-visible { outline: 3px solid #225f59; outline-offset: 2px; }
@media (max-width: 768px) {
  #alojamiento .ra-gallery { --slide: 72%; gap: .4rem; }
  #alojamiento.ra-section { padding-inline: .85rem; }
  #alojamiento > p { padding-inline: .35rem; }
}
@media (prefers-reduced-motion: reduce) {
  #alojamiento .ra-gallery > figure { transition: none; }
}

/* Rutas a lugares cercanos. */
#ubicacion .ra-nearby .ra-card { position: relative; display: flex; flex-direction: column; gap: .65rem; }
#ubicacion .ra-nearby .ra-card > * { margin-block: 0; }
#ubicacion .ra-nearby .ra-card > :last-child { margin-top: auto; }
#ubicacion .ra-nearby .ra-card a { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
#ubicacion .ra-nearby .ra-card a::after { content: ""; position: absolute; inset: 0; border-radius: 1rem; }
#ubicacion .ra-nearby .ra-card:focus-within, #ubicacion .ra-nearby .ra-card:hover { box-shadow: 0 0 0 2px #70958a; }