/* =========================================================================
   COLORES Y ASPECTO DE LA WEB DEL HOTEL
   -------------------------------------------------------------------------
   Cambia los codigos de color de aqui abajo y toda la web cambia sola.
   Un color es un codigo que empieza por # (por ejemplo #d1410a es terracota).
   ========================================================================= */

:root {
  --principal:        #d1410a;   /* Terracota sevillano: botones y titulares */
  --principal-oscuro: #a32f06;   /* El mismo, mas oscuro (al pasar el raton) */
  --principal-suave:  #fff2ea;   /* Fondo muy clarito del mismo tono */
  --dorado:           #f0a521;   /* Albero: estrellas, numeros, lineas, detalles */
  --whatsapp:         #1d8348;   /* Verde de WhatsApp, algo mas oscuro que el original */
  --whatsapp-oscuro:  #146334;   /* para que el texto blanco encima se lea bien (contraste) */

  --texto:            #2a1c14;   /* Color de las letras normales */
  --texto-suave:      #6b574c;   /* Letras secundarias, mas suaves */
  --fondo:            #ffffff;   /* Fondo de la pagina */
  --fondo-gris:       #fdf6f0;   /* Fondo calido de las secciones alternas */
  --fondo-oscuro:     #3d1408;   /* Fondo de la seccion de contacto */
  --borde:            #f0e0d4;
  --texto-suave-oscuro: #e8bfa6; /* Texto secundario sobre fondos oscuros */

  --verde-fondo:  #edfbf1;       /* Aviso de "todo correcto" (cancelacion gratis, etc) */
  --verde-borde:  #b9ebc9;
  --verde-icono:  #16a34a;
  --verde-texto:  #14532d;
  --verde-texto-suave: #256b41;

  --pie-fondo:    #2b0d04;       /* El pie de pagina, mas oscuro que --fondo-oscuro */
  --pie-borde:    #4a1c0c;
  --pie-texto:    #cfa892;
  --pie-texto-suave: #9a7261;
  --pie-enlace:   #f0d9cb;

  --ancho: 1150px;               /* Ancho maximo del contenido */
  --radio: 14px;                 /* Cuanto se redondean las esquinas */
  --sombra:      0 1px 3px rgba(90,40,15,.10), 0 8px 24px rgba(90,40,15,.08);
  --sombra-alta: 0 4px 12px rgba(90,40,15,.14), 0 18px 44px rgba(90,40,15,.16);
}

/* -------------------------------------------------------------------------
   OTRAS COMBINACIONES DE COLOR. Para usar una, sustituye las cuatro lineas
   de --principal, --principal-oscuro, --principal-suave y --dorado por estas:

   AZUL MARINO (el de antes, mas sobrio):
     --principal: #1c3d5a;  --principal-oscuro: #12293e;  --principal-suave: #eef3f8;  --dorado: #c19a54;
   ROJO ALBERO (aun mas fuerte):
     --principal: #e02b1d;  --principal-oscuro: #b31e12;  --principal-suave: #fff0ee;  --dorado: #ffb524;
   TURQUESA (fresco, veraniego):
     --principal: #0d9488;  --principal-oscuro: #0b7268;  --principal-suave: #ecfdf9;  --dorado: #f0a521;
   MORADO (llamativo y distinto):
     --principal: #7c3aed;  --principal-oscuro: #5f28c4;  --principal-suave: #f5f0ff;  --dorado: #f0a521;

   Si cambias a uno de estos, cambia tambien --fondo-oscuro y --fondo-gris
   por  #12293e  y  #f6f7f9  para que no desentonen (o pidemelo y lo hago).
   ------------------------------------------------------------------------- */


/* ============================ BASE ============================ */

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; scroll-padding-top: 90px; }

/* RED DE SEGURIDAD CONTRA EL SCROLL LATERAL.
   Impide que la pagina se pueda arrastrar de lado, pase lo que pase.
   Va solo en el body y con "clip" (no con "hidden" ni en el html):
   asi el desplazamiento vertical y la cabecera pegada arriba
   siguen funcionando igual. Comprobado. */
body { max-width: 100%; overflow-x: clip; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--texto);
  background: var(--fondo);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

.contenedor {
  width: 100%;
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 0 24px;
}

.centrado { text-align: center; }

.salta-al-contenido {
  position: absolute; left: -9999px; top: 0;
  background: var(--principal); color: #fff; padding: 12px 20px; z-index: 200;
}
.salta-al-contenido:focus { left: 0; }

:focus-visible { outline: 3px solid var(--dorado); outline-offset: 3px; border-radius: 6px; }


/* ============================ CABECERA ============================ */

.cabecera {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s, box-shadow .25s;
}
.cabecera.con-sombra { border-bottom-color: var(--borde); box-shadow: 0 1px 12px rgba(90,40,15,.10); }

.cabecera__interior {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 76px; gap: 16px;
}

.logo { display: flex; flex-direction: column; line-height: 1.15; flex-shrink: 0; }
.logo__nombre {
  font-size: 1.12rem; font-weight: 800; letter-spacing: -.01em;
  color: var(--principal); white-space: nowrap;
}
.logo__estrellas { color: var(--dorado); font-size: .8rem; letter-spacing: .18em; }

.menu { display: flex; align-items: center; gap: 26px; }
.menu a { font-size: .95rem; font-weight: 500; color: var(--texto-suave); transition: color .2s; }
.menu a:hover { color: var(--principal); }
.menu .boton { color: #fff; }

/* La pagina en la que estas ahora mismo se marca en el menu */
.menu a.activo { color: var(--principal); font-weight: 700; }
.menu a.activo:not(.boton) { position: relative; }
.menu a.activo:not(.boton)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px;
  height: 2px; border-radius: 2px; background: var(--dorado);
}

.hamburguesa {
  display: none;
  width: 44px; height: 44px;
  background: none; border: 0; cursor: pointer;
  flex-direction: column; justify-content: center; align-items: center; gap: 5px;
}
.hamburguesa span {
  display: block; width: 24px; height: 2px; background: var(--principal);
  border-radius: 2px; transition: transform .3s, opacity .2s;
}
.hamburguesa[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburguesa[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburguesa[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }


/* ============================ BOTONES ============================ */

.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 26px;
  border-radius: 999px;
  font-size: 1rem; font-weight: 600;
  background: var(--principal); color: #fff;
  box-shadow: var(--sombra);
  transition: transform .18s, box-shadow .18s, background .18s;
  white-space: nowrap;
  max-width: 100%;   /* que nunca se salga de la pantalla */
}
.boton:hover { background: var(--principal-oscuro); transform: translateY(-2px); box-shadow: var(--sombra-alta); }
.boton:active { transform: translateY(0); }

.boton--whatsapp { background: var(--whatsapp); }
.boton--whatsapp:hover { background: var(--whatsapp-oscuro); }

.boton--grande { padding: 17px 34px; font-size: 1.06rem; }
.boton--pequeno { padding: 10px 18px; font-size: .9rem; }

.boton svg { width: 20px; height: 20px; fill: currentColor; flex-shrink: 0; }

/* Los dibujos de los iconos estan guardados una sola vez al principio
   de cada pagina; este bloque los mantiene invisibles */
.iconos-guardados { display: none; }


/* ============================ PORTADA ============================ */

.portada { position: relative; color: #fff; isolation: isolate; }

/* FOTO DE PORTADA: la fachada del hotel (fotos/fachada.jpg).
   Para cambiarla, guarda otra foto con ese mismo nombre en la carpeta.
   Un tinte muy ligero (mucho mas suave que el original) para que la
   foto se siga viendo casi tal cual, con la sombra del texto de apoyo. */
.portada__foto {
  position: absolute; inset: 0; z-index: -2;
  background-color: var(--principal);
  background-image:
    linear-gradient(112deg, rgba(38,11,3,.42) 18%, rgba(74,22,6,.3) 55%, rgba(130,42,8,.16)),
    url(fotos/fachada.jpg);
  background-size: cover;
  background-position: center 42%;
}

/* Antes esta caja tenia su propio max-width con margin:auto, asi que
   quedaba flotando centrada en medio de la foto. Ahora ocupa el mismo
   ancho de contenedor que el resto de la web (clase .contenedor) y el
   texto se queda pegado a la izquierda, como en todas las demas secciones. */
.portada__interior {
  padding-top: clamp(64px, 10vw, 128px);
  padding-bottom: clamp(56px, 9vw, 108px);
}

.etiqueta {
  display: inline-block;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.3);
  color: #fff; font-weight: 600; font-size: .87rem;
  padding: 7px 16px; border-radius: 999px; margin-bottom: 24px;
  letter-spacing: .02em;
}

/* Como la foto ya no lleva degradado encima, este texto necesita su
   propia sombra para seguir leyendose bien caiga donde caiga. */
.portada h1, .portada__texto, .portada__confianza {
  text-shadow: 0 2px 14px rgba(0,0,0,.75), 0 1px 3px rgba(0,0,0,.6);
}

.portada h1 {
  max-width: 760px;
  font-size: clamp(2.15rem, 5.6vw, 3.7rem);
  line-height: 1.1; letter-spacing: -.025em; font-weight: 800;
  margin-bottom: 22px;
  text-wrap: balance;
}

.portada__texto {
  font-size: clamp(1.05rem, 2.1vw, 1.22rem);
  color: rgba(255,255,255,.9);
  max-width: 600px; margin-bottom: 36px;
}

.portada__botones { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 36px; }

/* En la portada, el boton de llamar va en blanco para que destaque
   sobre la foto (el naranja se confundiria con el fondo) */
.portada .boton--llamar { background: #fff; color: var(--principal); }
.portada .boton--llamar:hover { background: var(--dorado); color: #3d1408; }

.portada__confianza {
  display: flex; flex-wrap: wrap; gap: 12px 28px;
  list-style: none; font-size: .95rem; font-weight: 500;
  color: rgba(255,255,255,.88);
}
.portada__confianza li { display: flex; align-items: center; gap: 8px; }
.portada__confianza li::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--dorado); flex-shrink: 0;
}


/* ============ CABECERA DE LAS PAGINAS INTERIORES ============ */
/* (la franja azul con el titulo que sale en Habitaciones, Servicios...) */

.cabecera-pagina {
  background:
    linear-gradient(115deg, var(--principal-oscuro) 10%, var(--principal) 55%, #ef7a1a 100%);
  color: #fff;
  padding: clamp(48px, 8vw, 84px) 0 clamp(44px, 7vw, 72px);
  text-align: center;
}
.cabecera-pagina h1 {
  font-size: clamp(1.9rem, 4.4vw, 2.9rem);
  font-weight: 800; letter-spacing: -.02em; margin-bottom: 14px;
  text-wrap: balance;
}
.cabecera-pagina p {
  color: rgba(255,255,255,.85);
  max-width: 640px; margin: 0 auto; font-size: 1.05rem;
}
.miga {
  display: inline-block; margin-bottom: 16px;
  font-size: .85rem; letter-spacing: .06em; text-transform: uppercase;
  color: rgba(255,255,255,.85); font-weight: 600;
}

/* Variante con foto de fondo (misma cabecera, pero con una foto real detras
   en vez del degradado liso). Para usarla en otra pagina, añade la clase
   cabecera-pagina--foto al <section class="cabecera-pagina"> y cambia la
   foto de abajo si quieres una distinta. El degradado se queda encima para
   que el texto blanco se siga leyendo bien. */
.cabecera-pagina--foto {
  position: relative; isolation: isolate;
  /* Foto por defecto (la usa Servicios). En las demas paginas se cambia
     sin tocar este archivo, poniendo en el <section> del HTML:
     style="--foto-cabecera:url(fotos/OTRA.jpg); --foto-cabecera-pos:center;" */
  --foto-cabecera: url(fotos/entorno-1.jpg);
  --foto-cabecera-pos: center 40%;
}
.cabecera-pagina--foto::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  /* Un tinte muy ligero, apenas se nota, para que la foto se siga
     viendo casi tal cual. El texto ademas lleva su propia sombra
     (mas abajo) como apoyo extra. */
  background:
    linear-gradient(115deg, rgba(58,17,4,.4) 0%, rgba(90,26,5,.3) 50%, rgba(58,17,4,.4) 100%),
    var(--foto-cabecera);
  background-size: cover;
  background-position: var(--foto-cabecera-pos);
}
/* El tinte es muy ligero, asi que el texto lleva ademas una sombra
   propia para seguir leyendose bien caiga donde caiga sobre la foto
   (zonas claras incluidas). */
.cabecera-pagina--foto .miga,
.cabecera-pagina--foto h1,
.cabecera-pagina--foto p {
  text-shadow: 0 2px 14px rgba(0,0,0,.75), 0 1px 3px rgba(0,0,0,.6);
}


/* ============ BLOQUE DE RESERVA (al final de cada pagina) ============ */

.cta { background: var(--principal-suave); }
.cta__caja { text-align: center; max-width: 680px; margin: 0 auto; }
.cta h2 {
  font-size: clamp(1.5rem, 3.2vw, 2.1rem); font-weight: 800;
  letter-spacing: -.02em; margin-bottom: 12px; color: var(--principal);
}
.cta p { color: var(--texto-suave); margin-bottom: 28px; }
.cta__botones { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }


/* ============ BLOQUE DE OPINIONES (la nota de los clientes) ============ */

.opiniones {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 20px 46px; text-align: center;
}

.nota {
  display: flex; align-items: center; gap: 16px;
  background: #fff; border: 1px solid var(--borde);
  border-radius: var(--radio); padding: 18px 26px;
  box-shadow: var(--sombra);
}
.nota__cifra {
  background: var(--principal); color: #fff;
  font-size: 1.55rem; font-weight: 800; letter-spacing: -.02em;
  padding: 10px 16px; border-radius: 12px; line-height: 1;
}
/* La nota de Google va con un fondo distinto al de Booking, para que se
   distinga de un vistazo que son dos fuentes distintas */
.nota--google .nota__cifra { background: var(--fondo-oscuro); }

.nota__texto { text-align: left; }
.nota__texto strong { display: block; font-size: 1.02rem; font-weight: 700; }
.nota__texto span { color: var(--texto-suave); font-size: .9rem; }

/* Bloque de "deja tu opinion" */
.opinar {
  max-width: 640px; margin: 52px auto 0; text-align: center;
  background: #fff; border: 1px solid var(--borde);
  border-radius: var(--radio); padding: 34px 30px;
  box-shadow: var(--sombra);
}
.opinar h3 { font-size: 1.3rem; font-weight: 700; color: var(--principal); margin-bottom: 10px; }
.opinar > p { color: var(--texto-suave); margin-bottom: 24px; }
.opinar__botones { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.opinar__nota { font-size: .88rem; color: var(--texto-suave); margin-top: 22px; opacity: .85; }

/* Tarjetas de reseñas reales, con lo que dice cada huésped */
.testimonios {
  display: grid; gap: 22px; margin-top: 40px;
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
}
.testimonio {
  background: #fff; border: 1px solid var(--borde);
  border-radius: var(--radio); padding: 26px 24px;
  box-shadow: var(--sombra);
  transition: transform .22s, box-shadow .22s, border-color .22s;
}
.testimonio:hover { transform: translateY(-5px); box-shadow: var(--sombra-alta); border-color: transparent; }
.testimonio__texto {
  color: var(--texto); font-size: .97rem; line-height: 1.55;
  margin-bottom: 14px;
}
.testimonio__autor { font-weight: 700; font-size: .92rem; }
.testimonio__autor span { font-weight: 500; color: var(--texto-suave); }
.testimonios__fuente {
  text-align: center; color: var(--texto-suave); font-size: .85rem;
  margin-top: 18px; opacity: .85;
}

.opinion-dato { text-align: center; }
.opinion-dato strong {
  display: block; font-size: 1.9rem; font-weight: 800;
  color: var(--principal); line-height: 1.1;
}
.opinion-dato span { color: var(--texto-suave); font-size: .93rem; }


/* ============ RESUMEN DE LA PAGINA DE INICIO ============ */

.destacados { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); }

.destacado {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--borde);
  border-radius: var(--radio); padding: 30px 28px;
  transition: transform .22s, box-shadow .22s, border-color .22s;
}
.destacado:hover { transform: translateY(-5px); box-shadow: var(--sombra-alta); border-color: transparent; }
.destacado svg { width: 32px; height: 32px; fill: var(--principal); margin-bottom: 16px; }
.destacado h3 { font-size: 1.15rem; font-weight: 700; margin-bottom: 8px; color: var(--principal); }
.destacado p { color: var(--texto-suave); font-size: .98rem; flex: 1; margin-bottom: 16px; }
.destacado span {
  color: var(--principal); font-weight: 600; font-size: .95rem;
  display: inline-flex; align-items: center; gap: 6px;
}
.destacado:hover span { gap: 10px; }
.destacado span::after { content: "→"; transition: transform .2s; }


/* ============================ SECCIONES ============================ */

.seccion { padding: clamp(60px, 9vw, 104px) 0; }
.seccion--gris { background: var(--fondo-gris); }
.seccion--oscura { background: var(--fondo-oscuro); color: #fff; }

.titulo-seccion {
  font-size: clamp(1.7rem, 3.6vw, 2.4rem);
  font-weight: 800; letter-spacing: -.02em;
  text-align: center; margin-bottom: 14px;
  text-wrap: balance;
}
.titulo-seccion--izq { text-align: left; }

/* Linea dorada bajo los titulos */
.titulo-seccion::after {
  content: ""; display: block;
  width: 54px; height: 3px; border-radius: 3px;
  background: var(--dorado);
  margin: 16px auto 0;
}
.titulo-seccion--izq::after { margin-left: 0; }

.subtitulo-seccion {
  text-align: center; color: var(--texto-suave);
  max-width: 660px; margin: 20px auto 52px;
  font-size: 1.05rem;
}
.seccion--oscura .subtitulo-seccion { color: var(--texto-suave-oscuro); }

/* El  min(...)  evita que las columnas se salgan de la pantalla en moviles
   muy estrechos: nunca piden mas ancho del que hay disponible. */
.rejilla { display: grid; gap: 26px; }
.rejilla--3 { grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr)); }


/* ============================ HUECOS PARA FOTOS ============================ */
/* Se ven como un recuadro con el nombre de la foto hasta que pongas la tuya */

.habitacion__foto, .foto-hueco {
  position: relative;
  background: linear-gradient(135deg, var(--principal-suave), #dde6ee);
  background-size: cover; background-position: center;
  display: grid; place-items: center;
  color: var(--principal); opacity: .95;
}
.habitacion__foto::after, .foto-hueco::after {
  content: attr(data-foto);
  font-size: .82rem; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase;
  opacity: .55; text-align: center; padding: 0 16px;
}
/* Cuando pongas una foto de verdad con style="background-image:url(...)",
   el texto del hueco desaparece solo */
.habitacion__foto[style], .foto-hueco[style] { }
.habitacion__foto[style]::after, .foto-hueco[style]::after { content: ""; }


/* ============================ HABITACIONES ============================ */

.habitacion {
  background: #fff;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .22s, box-shadow .22s, border-color .22s;
}
.habitacion:hover { transform: translateY(-5px); box-shadow: var(--sombra-alta); border-color: transparent; }

.habitacion__foto { aspect-ratio: 3 / 2; }

.habitacion__texto { padding: 26px 26px 28px; display: flex; flex-direction: column; flex: 1; }
.habitacion h3 { font-size: 1.25rem; font-weight: 700; margin-bottom: 10px; color: var(--principal); }
.habitacion p { color: var(--texto-suave); font-size: .99rem; margin-bottom: 18px; flex: 1; }

/* El precio de cada habitacion */
.habitacion__precio {
  display: flex; align-items: baseline; gap: 7px;
  margin: -4px 0 14px;
}
.habitacion__precio .desde { font-size: .84rem; color: var(--texto-suave); }
.habitacion__precio .cifra {
  font-size: 1.75rem; font-weight: 800; color: var(--principal);
  letter-spacing: -.02em; line-height: 1;
}
.habitacion__precio .noche { font-size: .84rem; color: var(--texto-suave); }

.habitacion__lista { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }

/* Boton de consultar dentro de cada habitacion */
.habitacion__boton { margin-top: 20px; width: 100%; padding: 12px 20px; font-size: .95rem; }
.habitacion__lista li {
  background: var(--principal-suave); color: var(--principal);
  font-size: .84rem; font-weight: 600;
  padding: 5px 12px; border-radius: 999px;
}

.nota-precio {
  text-align: center; color: var(--texto-suave);
  margin: 26px auto 26px; max-width: 640px; font-size: 1.02rem;
}

/* Aviso verde de cancelacion gratis */
.aviso-bueno {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  max-width: 640px; margin: 44px auto 0;
  background: var(--verde-fondo); border: 1px solid var(--verde-borde);
  border-radius: var(--radio); padding: 18px 24px;
  color: var(--verde-texto); font-weight: 600; text-align: left;
}
.aviso-bueno svg { width: 26px; height: 26px; fill: var(--verde-icono); flex-shrink: 0; }
.aviso-bueno span { font-weight: 400; color: var(--verde-texto-suave); display: block; font-size: .93rem; }


/* ============================ SERVICIOS ============================ */

.servicios {
  display: grid; gap: 22px;
  grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
}

.servicio {
  background: #fff;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 28px 22px;
  text-align: center;
  transition: transform .22s, box-shadow .22s, border-color .22s;
}
.servicio:hover { transform: translateY(-5px) scale(1.035); box-shadow: var(--sombra-alta); border-color: transparent; }
.servicio svg { width: 34px; height: 34px; fill: var(--principal); margin: 0 auto 14px; }
.servicio h3 { font-size: 1.03rem; font-weight: 700; margin-bottom: 4px; }
.servicio p { color: var(--texto-suave); font-size: .9rem; }


/* ============================ UBICACION ============================ */

.ubicacion {
  display: grid; gap: 34px;
  grid-template-columns: 1.15fr .85fr;
  align-items: start;
}

.ubicacion__mapa {
  border-radius: var(--radio); overflow: hidden;
  border: 1px solid var(--borde);
  box-shadow: var(--sombra);
  aspect-ratio: 4 / 3;
  background: var(--principal-suave);
}
.ubicacion__mapa iframe { width: 100%; height: 100%; border: 0; display: block; }

.distancias { list-style: none; display: grid; gap: 2px; margin-bottom: 26px; }
.distancias li {
  display: flex; align-items: baseline; gap: 14px;
  padding: 13px 0; border-bottom: 1px solid var(--borde);
}
.distancias strong {
  color: var(--principal); font-weight: 800; font-size: 1.02rem;
  min-width: 90px; flex-shrink: 0;
}
.distancias span { color: var(--texto-suave); font-size: .97rem; }

.ubicacion__texto { color: var(--texto-suave); margin-bottom: 24px; }


/* ============================ SOBRE EL HOTEL ============================ */

.nosotros {
  display: grid; gap: 48px;
  grid-template-columns: 1.05fr .95fr;
  align-items: center;
}
.nosotros__texto p { color: var(--texto-suave); margin-bottom: 18px; font-size: 1.03rem; }
.nosotros__texto .boton { margin-top: 10px; }

.nosotros__fotos { display: grid; gap: 18px; grid-template-columns: 1fr 1fr; }
.nosotros__fotos .foto-hueco {
  aspect-ratio: 3 / 4; border-radius: var(--radio);
  border: 1px solid var(--borde);
}
.nosotros__fotos .foto-hueco:first-child { margin-top: 28px; }


/* ============================ CONTACTO ============================ */

.contacto__via {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 8px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radio);
  padding: 34px 24px;
  transition: transform .2s, background .2s, border-color .2s;
}
.contacto__via:hover { transform: translateY(-4px); background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.3); }
.contacto__via svg { width: 32px; height: 32px; fill: #fff; margin-bottom: 6px; }
.contacto__que { font-size: .85rem; text-transform: uppercase; letter-spacing: .09em; color: var(--dorado); }
.contacto__dato { font-size: 1.12rem; font-weight: 700; }

.contacto__horario {
  text-align: center; margin-top: 40px;
  color: var(--texto-suave-oscuro); font-size: .97rem;
}


/* ============================ PAGINA DE AVISO LEGAL ============================ */

.texto-legal { max-width: 780px; margin: 0 auto; }
.texto-legal h2 {
  font-size: 1.25rem; font-weight: 700; color: var(--principal);
  margin: 34px 0 12px;
}
.texto-legal h2:first-child { margin-top: 0; }
.texto-legal p { color: var(--texto-suave); margin-bottom: 14px; }
.texto-legal ul { margin: 0 0 14px 22px; color: var(--texto-suave); }
.texto-legal li { margin-bottom: 7px; }
.texto-legal strong { color: var(--texto); }
.legal-fecha { font-size: .9rem; margin-top: 34px; opacity: .8; }


/* ============================ PREGUNTAS FRECUENTES ============================ */

.faq { max-width: 780px; margin: 0 auto; }

.faq details {
  background: #fff;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  margin-bottom: 12px;
  overflow: hidden;
  transition: box-shadow .2s;
}
.faq details[open] { box-shadow: var(--sombra); }

.faq summary {
  cursor: pointer; list-style: none;
  padding: 18px 54px 18px 24px;
  font-weight: 700; font-size: 1.03rem;
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute; right: 22px; top: 50%; transform: translateY(-50%);
  font-size: 1.5rem; font-weight: 400; color: var(--principal);
  transition: transform .2s;
}
.faq details[open] summary::after { content: "−"; }
.faq summary:hover { color: var(--principal); }

.faq .respuesta { padding: 0 24px 20px; color: var(--texto-suave); }
.faq .respuesta a { color: var(--principal); font-weight: 600; text-decoration: underline; }


/* ============================ PIE ============================ */

.pie { background: var(--pie-fondo); color: var(--pie-texto); padding: 34px 0; }
.pie__interior { text-align: center; font-size: .92rem; }
.pie__interior strong { color: #fff; }
.pie__interior p + p { margin-top: 6px; }
.pie__nota { font-size: .85rem; color: var(--pie-texto-suave); }

/* Menu de abajo, para saltar entre las 5 paginas */
.pie__enlaces {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 8px 22px; margin: 16px 0 18px !important;
  padding: 16px 0; border-top: 1px solid var(--pie-borde); border-bottom: 1px solid var(--pie-borde);
}
.pie__enlaces a { color: var(--pie-enlace); transition: color .2s; }
.pie__enlaces a:hover { color: var(--dorado); }


/* Fila de enlaces sueltos (se usa en la pagina de error 404) */
.enlaces-linea {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px;
  margin-bottom: 8px;
}
.enlaces-linea a { color: var(--principal); font-weight: 600; }
.enlaces-linea a:hover { text-decoration: underline; }


/* ============================ BARRA FIJA DEL MOVIL ============================ */
/* Solo se ve en moviles: dos botones siempre a mano, abajo del todo.
   La crea sola el archivo script.js, no hay que ponerla en cada pagina. */

.barra-movil { display: none; }

@media (max-width: 760px) {
  .barra-movil {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
    display: flex; gap: 8px;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    background: rgba(255,255,255,.96);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--borde);
    box-shadow: 0 -2px 16px rgba(90,40,15,.10);
  }
  .barra-movil .boton {
    flex: 1; padding: 13px 10px; font-size: .95rem;
    white-space: nowrap; box-shadow: none;
  }
  .barra-movil .boton svg { width: 18px; height: 18px; }

  /* Espacio para que la barra no tape el final de la pagina */
  .pie { padding-bottom: 96px; }
}

@media (max-width: 380px) {
  .barra-movil .boton { font-size: .87rem; padding: 12px 6px; }
}


/* ============================ BOTON FLOTANTE ============================ */

.wa-flotante {
  position: fixed; right: 22px; bottom: 22px; z-index: 90;
  width: 58px; height: 58px; border-radius: 50%;
  background: var(--whatsapp);
  display: grid; place-items: center;
  box-shadow: 0 6px 20px rgba(29,131,72,.45);
  transition: transform .2s, box-shadow .2s;
}
.wa-flotante svg { width: 32px; height: 32px; fill: #fff; }
.wa-flotante:hover { transform: scale(1.08); box-shadow: 0 8px 28px rgba(29,131,72,.6); }

/* En el movil sobra: ya esta la barra fija de abajo con los dos botones.
   Esta regla va DESPUES de las de arriba para que tenga prioridad. */
@media (max-width: 760px) {
  .wa-flotante { display: none; }
}


/* ============================ ANIMACION AL BAJAR ============================ */

.animar { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.animar.visible {
  opacity: 1; transform: none;
  /* Una vez aparece la tarjeta, el raton encima debe animarse rapido y suave
     (antes heredaba la transicion lenta de .6s de esta misma regla, y la
     sombra/el borde ni siquiera tenian transicion: cambiaban de golpe). */
  transition: opacity .6s ease, transform .25s cubic-bezier(.22,1,.36,1),
              box-shadow .25s ease, border-color .25s ease;
}


/* ============================ MOVILES Y TABLETS ============================ */

/* Las cajas de una rejilla pueden encogerse por debajo de su contenido.
   Sin esto, un boton largo ensancha su columna y aparece scroll lateral. */
.nosotros__texto, .ubicacion__datos, .habitacion, .destacado,
.servicio, .contacto__via, .cta__caja, .opinar { min-width: 0; }

/* En pantallas muy estrechas los botones parten el texto en dos lineas
   en vez de salirse de la pantalla */
@media (max-width: 480px) {
  .boton { white-space: normal; }
}

/* Moviles muy pequenos: el nombre del hotel tambien puede partirse,
   asi no empuja al boton del menu fuera de la pantalla */
@media (max-width: 380px) {
  .logo { flex-shrink: 1; min-width: 0; }
  .logo__nombre { white-space: normal; font-size: 1rem; }
}

@media (max-width: 940px) {
  .ubicacion, .nosotros { grid-template-columns: 1fr; gap: 32px; }
  .nosotros__fotos .foto-hueco { aspect-ratio: 1 / 1; }
  .nosotros__fotos .foto-hueco:first-child { margin-top: 0; }
}

/* Por debajo de este ancho, el menu de arriba se convierte en el boton
   de las tres rayas (hamburguesa). Con 5 apartados necesita mas sitio. */
@media (max-width: 900px) {
  .hamburguesa { display: flex; }

  .menu {
    position: fixed; inset: 76px 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: #fff;
    border-bottom: 1px solid var(--borde);
    box-shadow: var(--sombra-alta);
    padding: 8px 24px 24px;
    transform: translateY(-160%);
    transition: transform .3s ease;
    max-height: calc(100vh - 76px); overflow-y: auto;
  }
  .menu.abierto { transform: translateY(0); }
  .menu a { padding: 15px 0; border-bottom: 1px solid var(--borde); font-size: 1.05rem; }
  .menu .boton { justify-content: center; margin-top: 18px; border-bottom: 0; }

  .portada__botones .boton { width: 100%; }
  .wa-flotante { right: 16px; bottom: 16px; }
  .distancias strong { min-width: 78px; }
}


/* ============================ MODO OSCURO AUTOMATICO ============================ */

@media (prefers-color-scheme: dark) {
  :root {
    --principal: #ff6a2b;          /* mas claro para que se lea sobre fondo oscuro */
    --principal-oscuro: #e0530f;
    --texto: #f6ece5;
    --texto-suave: #c4a99a;
    --fondo: #1a0f09;
    --fondo-gris: #241510;
    --borde: #3d251b;
    --principal-suave: #33190f;
  }
  .cabecera { background: rgba(26,15,9,.93); }
  .logo__nombre { color: #f6ece5; }
  .habitacion, .servicio { background: #241510; }
  .habitacion h3 { color: #ffb182; }
  .habitacion__lista li { background: #3a2016; color: #ffc7a3; }
  .menu { background: #1a0f09; }
  .servicio svg { fill: #ff8b4d; }
  .distancias strong { color: #ff8b4d; }
  .seccion--oscura { background: var(--pie-fondo); }
  .pie { background: #150703; }
}


/* Respeta a quien prefiere menos animaciones */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
  .animar { opacity: 1; transform: none; }
}