/* The Office Studio — estilos compartidos
   La mayoría del estilo visual está en línea (atributo style="") junto a cada
   elemento en los .html, para que sea fácil de localizar y editar.
   Aquí viven solo los resets, utilidades y el comportamiento responsive. */

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;background:#F1ECE1;}
::selection{background:#181612;color:#F1ECE1;}
a{color:inherit;}

/* Botón de menú móvil (oculto en escritorio) */
.menu-btn{display:none;}

/* Campos del formulario de Reservas */
.field{width:100%;background:none;border:none;border-bottom:1px solid rgba(24,22,18,.38);padding:11px 0;font-family:'Newsreader',serif;font-size:19px;color:#181612;outline:none;border-radius:0;}
.field:focus{border-bottom-color:#181612;}
.field::placeholder{color:#a8a294;}
select.field{appearance:none;-webkit-appearance:none;cursor:pointer;}

/* Acordeón FAQ */
details > summary{list-style:none;cursor:pointer;}
details > summary::-webkit-details-marker{display:none;}

/* ---------- Responsive (móvil / tablet) ---------- */
@media(max-width:880px){
  .nav-links{display:none!important;}
  .menu-btn{display:inline-flex!important;}

  /* Home */
  .hero-cols{flex-direction:column!important;}
  .hero-left{width:100%!important;border-right:none!important;padding:0 0 36px 0!important;}
  .hero-right{padding:0!important;}
  .gal-grid{grid-template-columns:1fr 1fr!important;}

  /* Espacios */
  .ficha{flex-direction:column!important;}
  .ficha-rev{flex-direction:column!important;}
  .ficha > *{width:100%!important;}

  /* Tarifas */
  .tarifa{flex-direction:column!important;align-items:flex-start!important;gap:22px!important;}
  .tarifa-rates{width:100%!important;}

  /* Reservas */
  .res-cols{grid-template-columns:1fr!important;}
  .form-grid{grid-template-columns:1fr!important;}
  .trust-grid{grid-template-columns:1fr 1fr!important;}

  /* Contacto */
  .con-cols{grid-template-columns:1fr!important;}
  .cta-grid{grid-template-columns:1fr!important;}

  /* Utilidades generales */
  .cols-2{grid-template-columns:1fr!important;}
  .cols-3{grid-template-columns:1fr!important;}
  .hide-sm{display:none!important;}
  .pad-x{padding-left:22px!important;padding-right:22px!important;}
}