/**
 * Estilos del sitio publico de Hotel Rio Perlas.
 * Un solo archivo, sin preprocesadores ni frameworks, a proposito
 * (mismo criterio del resto del proyecto: PHP puro, sin dependencias).
 */
:root{
  --marino:#052a12;
  --primario:#06501f;
  --primario-2:#0c6b2b;
  --crema:#f6f3e7;
  --crema-2:#eee8d4;
  --dorado:#c9973f;
  --dorado-2:#a97b28;
  --agua:#2f6f6a;
  --tinta:#132018;
  --tinta-suave:#3d4a41;
  --linea:#d9d2ba;
  --superficie:#ffffff;
  --sombra: 0 18px 50px -22px rgba(5,42,18,0.35);
  color-scheme: light;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--crema);
  color:var(--tinta);
  font-family:'Work Sans', system-ui, sans-serif;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.display{
  font-family:'Fraunces', Georgia, 'Times New Roman', serif;
  font-weight:600;
  letter-spacing:-0.01em;
  text-wrap:balance;
  color:var(--marino);
  margin:0;
}
p{margin:0; line-height:1.65; color:var(--tinta-suave);}
a{color:inherit;}
img{max-width:100%; display:block;}
.eyebrow{
  font-family:'Work Sans',sans-serif;
  text-transform:uppercase;
  letter-spacing:0.16em;
  font-size:12.5px;
  font-weight:600;
  color:var(--dorado-2);
}
.envoltura{max-width:1180px; margin:0 auto; padding-inline:24px;}

/* ---------- nav ---------- */
.nav{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; justify-content:space-between;
  gap:14px;
  padding:14px 24px;
  background:rgba(5,42,18,0.30);
  backdrop-filter: blur(10px);
  transition:background .35s ease, box-shadow .35s ease, padding .35s ease;
}
.nav.solido{
  background:rgba(246,243,231,0.92);
  box-shadow:0 6px 24px -14px rgba(5,42,18,0.35);
  padding:9px 24px;
}
.nav-marca{display:flex; align-items:center; gap:10px; text-decoration:none;}
.nav-marca img{height:46px; width:46px; border-radius:11px; box-shadow:0 4px 14px -6px rgba(0,0,0,.4);}
.nav-marca span{font-family:'Fraunces',serif; font-weight:600; font-size:21px; color:#fff; transition:color .35s ease;}
.nav.solido .nav-marca span{color:var(--marino);}
.nav-links{display:flex; align-items:center; gap:18px; list-style:none; margin:0; padding:0;}
.nav-links a{
  color:#eef3ea; text-decoration:none; font-size:14.5px; font-weight:500;
  white-space:nowrap;
  transition:color .35s ease, opacity .2s ease;
}
.nav-links a:hover{opacity:.75;}
.nav.solido .nav-links a{color:var(--tinta);}
.nav-links a.activo{opacity:1; text-decoration:underline; text-underline-offset:5px; text-decoration-color:var(--dorado); text-decoration-thickness:2px;}
.nav-idioma{
  display:flex; align-items:center; gap:5px;
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.35);
  border-radius:100px;
  padding:5px 6px 5px 10px;
  font-family:'Work Sans',sans-serif; font-size:13px; font-weight:700;
  letter-spacing:.02em;
  transition:background .35s ease, border-color .35s ease;
}
.nav-idioma-icono{color:#fff; flex-shrink:0; opacity:.9;}
.nav.solido .nav-idioma-icono{color:var(--marino);}
.nav-idioma-opcion{
  color:#eef3ea; text-decoration:none; line-height:1;
  padding:6px 10px; border-radius:100px;
  opacity:.85;
  transition:background .2s ease, color .2s ease, opacity .2s ease;
}
.nav-idioma-opcion:hover{opacity:1; background:rgba(255,255,255,.14);}
.nav-idioma-opcion.activo{
  background:var(--dorado); color:var(--marino); opacity:1;
}
.nav-idioma-opcion.activo:hover{background:var(--dorado);}
.nav.solido .nav-idioma{background:rgba(5,42,18,.09); border-color:rgba(5,42,18,.16);}
.nav.solido .nav-idioma-opcion{color:var(--tinta);}
.nav.solido .nav-idioma-opcion:hover{background:rgba(5,42,18,.08);}
.nav.solido .nav-idioma-opcion.activo{background:var(--dorado); color:var(--marino);}

.nav-llamada-envoltura{position:relative;}
.nav-llamada{
  display:flex; align-items:center; gap:8px;
  background:var(--dorado); color:var(--marino);
  border:1px solid transparent;
  border-radius:100px;
  padding:9px 16px;
  font-family:'Work Sans',sans-serif; font-weight:600; font-size:13.5px;
  cursor:pointer; white-space:nowrap;
  transition:filter .2s ease;
}
.nav-llamada:hover{filter:brightness(1.06);}
.nav-tel{
  display:flex; align-items:center; gap:8px;
  background:var(--dorado); color:var(--marino);
  padding:9px 16px; border-radius:100px;
  font-weight:600; font-size:13.5px; text-decoration:none;
  white-space:nowrap;
}
.nav-burger{display:none; background:none; border:0; color:#fff; font-size:26px; cursor:pointer; line-height:1;}
.nav.solido .nav-burger{color:var(--marino);}

/* ---------- hero ---------- */
.hero{
  position:relative;
  min-height:min(92vh, 800px);
  display:flex; align-items:flex-end;
  background:linear-gradient(180deg, rgba(5,20,12,.35) 0%, rgba(5,20,12,.55) 55%, rgba(4,16,10,.88) 100%), url('../img/hero.jpg') center/cover no-repeat;
  margin-top:-64px;
  padding-top:64px;
}
.hero-contenido{
  padding:80px 24px 96px;
  max-width:1180px;
  margin:0 auto;
  width:100%;
}
.hero-eyebrow{color:#e7d9b3; font-size:13px;}
.hero h1{
  color:#fbfaf3;
  font-size:clamp(40px, 6.2vw, 78px);
  line-height:1.03;
  margin-top:16px;
  max-width:14ch;
}
.hero h1 em{
  font-style:italic; color:var(--dorado);
}
.hero p.lead{
  color:#e4ebe3; font-size:18px; max-width:46ch; margin-top:20px;
}
.hero-cta{display:flex; gap:14px; margin-top:34px; flex-wrap:wrap;}
.boton{
  display:inline-flex; align-items:center; gap:8px;
  padding:14px 26px; border-radius:100px;
  font-weight:600; font-size:15px; text-decoration:none;
  border:1px solid transparent; cursor:pointer;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
  font-family:'Work Sans',sans-serif;
}
.boton:hover{transform:translateY(-2px);}
.boton-dorado{background:var(--dorado); color:var(--marino); box-shadow:0 14px 30px -14px rgba(201,151,63,.7);}
.boton-fantasma{background:rgba(255,255,255,.08); color:#fff; border-color:rgba(255,255,255,.55);}
.boton-primario{background:var(--primario); color:#fff;}
.boton-linea{background:transparent; border-color:var(--linea); color:var(--marino);}
.seccion-oscura .boton-linea{color:#fff; border-color:rgba(255,255,255,.55);}
.hero-chips{display:flex; gap:10px; margin-top:44px; flex-wrap:wrap;}
.chip{
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.28);
  color:#f3f0e2; padding:7px 14px; border-radius:100px; font-size:12.5px; font-weight:500;
  backdrop-filter:blur(6px);
}

/* ---------- sello de logo + insignia caracteristica ---------- */
.hero-sello{
  display:inline-flex; align-items:center; gap:14px;
  background:rgba(5,20,12,.38); border:1px solid rgba(255,255,255,.35);
  padding:8px 18px 8px 8px; border-radius:100px; backdrop-filter:blur(6px);
  margin-bottom:26px;
}
.hero-sello img{width:52px; height:52px; border-radius:50%; border:2px solid var(--dorado); background:#fff;}
.hero-sello-texto{display:flex; flex-direction:column; line-height:1.25;}
.hero-sello-texto strong{color:#fff; font-size:14.5px; font-family:'Fraunces',serif; font-weight:600;}
.hero-sello-texto span{color:var(--dorado); font-size:11.5px; text-transform:uppercase; letter-spacing:.08em; font-weight:600;}

/* ---------- fauna minima (aves / mariposa) ---------- */
.fauna{position:absolute; opacity:.85; pointer-events:none;}
.ave{width:26px; height:auto; animation:planear 7s ease-in-out infinite;}
.ave.ave-2{animation-duration:8.5s; animation-delay:.6s;}
.mariposa{width:30px; height:auto; animation:aletear 2.6s ease-in-out infinite, flotar 9s ease-in-out infinite;}
.mariposa .ala{animation:aletea 0.5s ease-in-out infinite alternate; transform-origin:16px 15px;}
.mariposa .ala-i{animation-delay:.05s;}
@keyframes planear{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-9px);}
}
@keyframes flotar{
  0%,100%{transform:translate(0,0);}
  50%{transform:translate(-16px,-14px);}
}
@keyframes aletea{
  from{transform:scaleX(1);}
  to{transform:scaleX(.55);}
}
@media (prefers-reduced-motion: reduce){
  .ave, .mariposa, .mariposa .ala{animation:none !important;}
}

/* ---------- divisor: linea de arboles (sencilla) ---------- */
.divisor{display:block; width:100%; height:46px; margin-top:-1px;}

/* ---------- secciones ---------- */
section{padding:96px 0;}
.seccion-oscura{background:var(--marino); color:#e7ece7;}
.seccion-oscura p{color:#c4d0c7;}
.seccion-oscura h2{color:#fbfaf3;}

.cabecera-seccion{max-width:640px; margin-bottom:52px;}
.cabecera-seccion h2{font-size:clamp(28px,3.4vw,42px); margin-top:12px;}
.cabecera-seccion.centro{margin-inline:auto; text-align:center;}

/* ---------- sobre el hotel ---------- */
.sobre-grid{
  display:grid; grid-template-columns: 1.05fr 0.95fr; gap:64px; align-items:center;
}
.sobre-texto p + p{margin-top:16px;}
.sobre-lista{
  list-style:none; margin:28px 0 0; padding:0;
  display:grid; grid-template-columns:1fr 1fr; gap:14px 22px;
}
.sobre-lista li{
  display:flex; gap:10px; align-items:flex-start;
  font-size:14.5px; color:var(--tinta);
}
.sobre-lista svg{flex:none; margin-top:2px;}
.sobre-figura{
  position:relative; border-radius:22px; overflow:hidden; box-shadow:var(--sombra);
  aspect-ratio:4/5;
}
.sobre-figura img{width:100%; height:100%; object-fit:cover;}
.sobre-figura figcaption{
  position:absolute; left:0; right:0; bottom:0;
  padding:20px; color:#fff;
  background:linear-gradient(0deg, rgba(5,20,12,.85), transparent);
  font-size:13px; letter-spacing:.02em;
}

/* ---------- aguas / naturaleza ---------- */
.aguas-grid{
  display:grid; grid-template-columns: repeat(4, 1fr); gap:22px;
}
.aguas-grid a.tarjeta-agua:nth-child(1),
.aguas-grid a.tarjeta-agua:nth-child(2){grid-column:span 2;}
.aguas-grid a.tarjeta-agua:nth-child(3),
.aguas-grid a.tarjeta-agua:nth-child(4){grid-column:span 2;}
.tarjeta-agua{
  position:relative; border-radius:20px; overflow:hidden;
  aspect-ratio:16/11; text-decoration:none; display:block;
  box-shadow:0 24px 44px -30px rgba(5,42,18,.55);
}
.tarjeta-agua img{width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.2,.8,.2,1);}
.tarjeta-agua:hover img{transform:scale(1.06);}
.tarjeta-agua .capa{
  position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(5,20,12,.82) 0%, rgba(5,20,12,.15) 55%, rgba(5,20,12,0) 75%);
  display:flex; flex-direction:column; justify-content:flex-end; padding:22px;
}
.tarjeta-agua .eyebrow{color:#f0d9a0;}
.tarjeta-agua h3{color:#fff; font-size:22px; margin-top:6px;}
.tarjeta-agua .desc{color:#dbe6dc; font-size:13.5px; margin-top:6px; max-width:32ch;}

/* ---------- tira de fauna ---------- */
.tira-fauna{
  margin-top:26px; display:grid; grid-template-columns: 1.1fr 0.8fr 0.8fr;
  gap:22px; align-items:stretch;
}
.tira-fauna-texto{display:flex; flex-direction:column; justify-content:center;}
.tira-fauna figure{
  margin:0; position:relative; border-radius:16px; overflow:hidden;
  aspect-ratio:4/3;
}
.tira-fauna img{width:100%; height:100%; object-fit:cover;}
.tira-fauna figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:10px 14px;
  background:linear-gradient(0deg, rgba(5,20,12,.82), transparent);
  color:#fff; font-size:12.5px; font-weight:500;
}
@media (max-width: 900px){
  .tira-fauna{grid-template-columns:1fr 1fr; }
  .tira-fauna-texto{grid-column:span 2;}
}

/* ---------- tira de fotos de aguas termales ---------- */
.tira-termal{
  margin-top:46px;
}
.tira-termal > p.eyebrow{color:var(--dorado); text-align:center;}
.tira-termal h3{color:#fbfaf3; font-size:20px; margin-top:6px; text-align:center;}
.tira-termal-grid{
  margin-top:22px; display:grid; grid-template-columns:repeat(3,1fr); gap:22px;
}
.tira-termal-grid figure{
  margin:0; position:relative; border-radius:16px; overflow:hidden; aspect-ratio:4/3;
  box-shadow:0 20px 40px -26px rgba(5,42,18,.6);
}
.tira-termal-grid img{width:100%; height:100%; object-fit:cover;}
.tira-termal-grid figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:12px 14px;
  background:linear-gradient(0deg, rgba(5,20,12,.82), transparent);
  color:#fff; font-size:12.5px; font-weight:500;
}
@media (max-width: 900px){
  .tira-termal-grid{grid-template-columns:1fr 1fr;}
  .tira-termal-grid figure:nth-child(3){grid-column:span 2;}
}

/* ---------- galeria ---------- */
.galeria-grid{
  display:grid; grid-template-columns: repeat(4,1fr); gap:18px;
}
.galeria-grid figure{
  margin:0; border-radius:16px; overflow:hidden; position:relative;
  aspect-ratio:3/4;
}
.galeria-grid figure:nth-child(1){grid-row: span 2; aspect-ratio:auto;}
.galeria-grid img{width:100%; height:100%; object-fit:cover;}
.galeria-grid figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:14px;
  background:linear-gradient(0deg, rgba(5,20,12,.78), transparent);
  color:#fff; font-size:13px; font-weight:500;
}

/* ---------- ubicacion ---------- */
.ubicacion-grid{
  display:grid; grid-template-columns: 0.95fr 1.05fr; gap:56px; align-items:stretch;
}
.mapa-caja{border-radius:20px; overflow:hidden; box-shadow:var(--sombra); min-height:420px; border:1px solid var(--linea);}
.mapa-caja iframe{width:100%; height:100%; min-height:420px; border:0; display:block;}
.ubicacion-info{display:flex; flex-direction:column; justify-content:center; gap:22px;}
.dato-fila{display:flex; gap:14px; align-items:flex-start;}
.dato-icono{
  flex:none; width:42px; height:42px; border-radius:12px;
  background:var(--crema-2); display:flex; align-items:center; justify-content:center;
  color:var(--primario);
}
.dato-fila h4{font-size:15px; margin:0 0 3px; font-weight:600; color:var(--marino);}
.dato-fila p{font-size:14.5px;}
.ubicacion-botones{display:flex; gap:12px; flex-wrap:wrap; margin-top:6px;}
.boton-waze{background:#33ccff; color:#04283a;}

/* ---------- contacto ---------- */
.contacto-grid{
  display:grid; grid-template-columns: 0.85fr 1.15fr; gap:56px;
}
.contacto-lateral h2{font-size:clamp(26px,3vw,36px);}
.contacto-lateral p{margin-top:14px; max-width:38ch;}
.contacto-contactos{margin-top:32px; display:flex; flex-direction:column; gap:18px;}
.contacto-contactos a{text-decoration:none; display:flex; gap:12px; align-items:center; color:#fff; font-size:15px; font-weight:500;}
.contacto-contactos .dato-icono{background:rgba(255,255,255,.1); color:var(--dorado);}
form.reserva{
  background:var(--superficie); border-radius:22px; padding:38px;
  box-shadow:var(--sombra); border:1px solid var(--linea);
}
.fila-campos{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
.campo{display:flex; flex-direction:column; gap:7px; margin-bottom:18px;}
.campo label{font-size:12.5px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--tinta-suave);}
.campo input, .campo textarea, .campo select{
  font-family:inherit; font-size:15px; padding:12px 14px;
  border-radius:10px; border:1.5px solid var(--linea); background:#fdfcf6;
  color:var(--tinta); outline:none; transition:border-color .2s ease;
}
.campo input:focus, .campo textarea:focus, .campo select:focus{border-color:var(--primario);}
.campo textarea{resize:vertical; min-height:96px;}
.form-nota{font-size:12.5px; color:var(--tinta-suave); margin-top:14px;}
.form-aviso{
  background:var(--crema-2); border:1.5px solid var(--dorado);
  border-radius:14px; padding:18px 20px; font-size:14.5px; color:var(--marino); margin-top:18px;
}
.form-aviso.error{background:#3a1414; border-color:#c94b3f; color:#f6dede;}
.campo-trampa{position:absolute; left:-9999px; top:-9999px;}

/* "Me interesa": Hospedaje / Bodas / Corporativo, en el formulario de
   contacto. Se guarda en la solicitud para poder darle seguimiento por
   tipo de mercado desde el CRM (ver contacto_procesar.php). Es
   obligatorio (el visitante debe elegir uno, sin valor por defecto -
   ver "required" en index.php), asi que se resalta con su propio
   recuadro para que no pase desapercibido entre el resto de campos. */
.campo-tipo-interes{
  margin-bottom:20px; padding:14px 16px 16px; border-radius:14px;
  background:linear-gradient(135deg, #fdf6e6, #faedcc); border:1.5px solid var(--dorado);
}
.campo-tipo-interes > label{
  display:flex; align-items:center; gap:5px; font-size:14px; font-weight:800;
  letter-spacing:.02em; color:var(--primario); text-transform:none;
}
.campo-tipo-interes > label::after{content:"*"; color:#c94b3f; font-size:16px; line-height:1;}
.opciones-tipo-interes{display:flex; gap:10px; flex-wrap:wrap; margin-top:9px;}
.opcion-tipo-interes{cursor:pointer;}
.opcion-tipo-interes input{position:absolute; opacity:0; width:1px; height:1px;}
.opcion-tipo-interes span{
  display:inline-block; padding:10px 20px; border-radius:999px; border:2px solid var(--dorado);
  font-size:14px; font-weight:700; color:var(--primario); background:#fff;
  box-shadow:0 1px 3px rgba(20,20,10,.08);
  transition:background .15s ease, border-color .15s ease, color .15s ease, transform .1s ease, box-shadow .1s ease;
}
.opcion-tipo-interes:hover span{transform:translateY(-1px); box-shadow:0 3px 9px rgba(20,20,10,.15);}
.opcion-tipo-interes input:checked + span{background:var(--primario); border-color:var(--primario); color:#fff; box-shadow:0 2px 6px rgba(6,80,31,.35);}
.opcion-tipo-interes input:focus-visible + span{outline:2px solid var(--dorado); outline-offset:2px;}

/* ---------- modal de confirmacion (formulario de contacto) ---------- */
.modal-overlay{
  position:fixed; inset:0; z-index:100;
  background:rgba(5,20,10,.6);
  display:flex; align-items:center; justify-content:center;
  padding:20px;
  animation:modal-aparecer .25s ease;
}
.modal-overlay.modal-oculto{display:none;}
.modal-caja{
  position:relative; background:var(--superficie); color:var(--tinta);
  border-radius:18px; max-width:420px; width:100%;
  padding:34px 30px 28px; text-align:center;
  box-shadow:0 30px 70px -20px rgba(0,0,0,.45);
  animation:modal-subir .3s ease;
}
.modal-cerrar{
  position:absolute; top:14px; right:14px; width:30px; height:30px;
  border-radius:50%; border:none; background:var(--crema-2); color:var(--tinta-suave);
  font-size:14px; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.modal-cerrar:hover{background:var(--linea);}
.modal-icono{
  width:56px; height:56px; border-radius:50%; margin:0 auto 16px;
  display:flex; align-items:center; justify-content:center;
  font-size:26px; font-weight:700;
}
.modal-icono-exito{background:#e4f3e8; color:var(--primario);}
.modal-icono-error{background:#3a1414; color:#f6dede;}
.modal-caja h3{margin:0 0 10px; font-family:'Fraunces',serif; font-size:22px; color:var(--marino);}
.modal-caja p{margin:0 0 22px; font-size:14.5px; color:var(--tinta-suave); line-height:1.5;}
.modal-boton-ok{width:100%; justify-content:center;}
.modal-caja-error h3{color:#8a2b22;}
@keyframes modal-aparecer{from{opacity:0;} to{opacity:1;}}
@keyframes modal-subir{from{opacity:0; transform:translateY(14px) scale(.97);} to{opacity:1; transform:translateY(0) scale(1);}}

/* ---------- footer ---------- */
footer{background:#041a0d; color:#9fb3a5; padding:64px 0 28px;}
.footer-grid{display:grid; grid-template-columns: 1.3fr 1fr 1fr; gap:48px;}
.footer-marca{display:flex; align-items:center; gap:10px; margin-bottom:16px;}
.footer-marca img{height:36px; width:36px; border-radius:8px;}
.footer-marca span{font-family:'Fraunces',serif; color:#fff; font-size:19px; font-weight:600;}
footer h5{color:#e7ece7; font-size:13px; text-transform:uppercase; letter-spacing:.08em; margin:0 0 14px;}
footer ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; font-size:14px;}
footer a{text-decoration:none; color:#9fb3a5;}
footer a:hover{color:#fff;}
.footer-baja{
  margin-top:52px; padding-top:24px; border-top:1px solid rgba(255,255,255,.08);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
  font-size:12.5px; color:#6f8477;
}

/* ---------- chat flotante ---------- */
.chat-flotante{
  position:fixed; right:22px; bottom:22px; z-index:60;
  display:flex; flex-direction:column; align-items:flex-end; gap:12px;
}
.chat-burbuja{
  width:60px; height:60px; border-radius:50%;
  background:var(--primario); color:#fff; border:none;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 16px 30px -10px rgba(5,42,18,.6); cursor:pointer;
  position:relative;
}
.chat-burbuja .punto-nuevo{
  position:absolute; top:2px; right:2px; width:12px; height:12px; border-radius:50%;
  background:#e0533f; border:2px solid var(--crema); display:none;
}
.chat-burbuja.tiene-nuevos .punto-nuevo{display:block;}
.chat-panel{
  width:320px; max-width:calc(100vw - 44px);
  background:var(--superficie); border-radius:18px; box-shadow:var(--sombra);
  border:1px solid var(--linea); overflow:hidden;
  display:none;
}
.chat-panel.abierto{display:flex; flex-direction:column; max-height:min(70vh, 520px);}
.chat-panel-cabecera{
  background:var(--marino); color:#fff; padding:16px 18px;
  display:flex; align-items:center; gap:10px; flex:none;
}
.chat-panel-cabecera .punto{width:8px; height:8px; border-radius:50%; background:#5be07a;}
.chat-panel-cabecera strong{font-size:14.5px;}
.chat-panel-cabecera small{display:block; color:#c4d0c7; font-size:11.5px;}
.chat-panel-cuerpo{padding:16px 18px; font-size:13.5px; color:var(--tinta-suave); display:flex; flex-direction:column; gap:10px; overflow-y:auto; flex:1;}
.chat-mensaje{background:var(--crema-2); border-radius:12px 12px 12px 4px; padding:10px 13px; max-width:88%;}
.chat-mensaje.propio{background:var(--primario); color:#fff; margin-left:auto; border-radius:12px 12px 4px 12px;}
.chat-panel-pie{padding:12px 14px; border-top:1px solid var(--linea); display:flex; gap:8px; flex:none;}
.chat-panel-pie input{flex:1; border:1.5px solid var(--linea); border-radius:100px; padding:9px 14px; font-size:13.5px; font-family:inherit;}
.chat-panel-pie button{background:var(--primario); color:#fff; border:none; border-radius:100px; width:38px; height:38px; cursor:pointer; flex:none;}
.chat-panel-pie button:disabled{opacity:.5; cursor:default;}

/* ---------- llamada por internet (llamar a recepcion, voz por navegador) ---------- */
/* Panel desplegable anclado bajo el boton "Llamar por internet" del
   menu (igual idea que .nav-links.abierto, que tambien se despliega
   bajo el menu en celular). En pantallas angostas pasa a una "hoja"
   fija abajo de la pantalla para que nunca se corte ni se salga
   (ver @media mas abajo). */
.llamada-panel{
  position:absolute; top:calc(100% + 10px); right:0; z-index:70;
  width:320px; max-width:calc(100vw - 32px);
  background:var(--superficie); border-radius:18px; box-shadow:var(--sombra);
  border:1px solid var(--linea); overflow:hidden;
  display:none;
}
.llamada-panel.abierto{display:flex; flex-direction:column;}
.llamada-panel-cabecera{
  background:var(--marino); color:#fff; padding:16px 18px;
  display:flex; align-items:center; gap:10px; flex:none;
}
.llamada-panel-cabecera .punto{width:8px; height:8px; border-radius:50%; background:#5be07a; flex:none;}
.llamada-panel-cabecera strong{font-size:14.5px;}
.llamada-panel-cabecera small{display:block; color:#c4d0c7; font-size:11.5px;}
.llamada-panel-cabecera > div{flex:1; min-width:0;}
.llamada-cerrar{
  background:rgba(255,255,255,.12); border:none; color:#fff;
  width:26px; height:26px; border-radius:50%; cursor:pointer; flex:none;
  font-size:13px; line-height:1;
}
.llamada-cuerpo{
  padding:26px 20px 18px; display:flex; flex-direction:column; align-items:center;
  gap:12px; text-align:center;
}
.llamada-circulo{
  width:64px; height:64px; border-radius:50%;
  background:var(--dorado); display:flex; align-items:center; justify-content:center;
  transition:background .3s ease;
}
.llamada-circulo.llamando{animation:llamada-pulso 1.1s ease-in-out infinite;}
.llamada-circulo.conectada{background:var(--primario-2);}
@keyframes llamada-pulso{
  0%, 100%{box-shadow:0 0 0 0 rgba(169,123,40,.5);}
  50%{box-shadow:0 0 0 10px rgba(169,123,40,0);}
}
.llamada-texto{font-size:13.5px; color:var(--tinta-suave); margin:0; line-height:1.5;}
.llamada-timer{font-size:20px; font-weight:600; color:var(--marino); font-variant-numeric:tabular-nums; margin:0;}
.llamada-panel-pie{padding:0 18px 20px; display:flex; flex-direction:column; gap:8px; flex:none;}
/* OJO: los botones .boton ya fijan su propio "display", asi que sin
   esto el atributo hidden no alcanza a ocultarlos (mismo caso que las
   reglas ANTES del @media de mas abajo con .correo-movil-solo). */
.llamada-panel-pie .boton[hidden]{display:none;}

/* El menu de enlaces (El Hotel, Aguas & Naturaleza, etc.) mas el
   selector de idioma, el boton de llamada y el telefono ya no caben
   todos en una sola fila por debajo de ~1121px de ancho -- por eso el
   menu hamburguesa empieza aqui, ANTES del @media de 900px de mas
   abajo (que ajusta otras cuadriculas de la pagina, sin relacion con
   el menu). */
@media (max-width: 1140px){
  .nav-links{
    display:none;
  }
  .nav-links.abierto{
    display:flex; flex-direction:column; align-items:flex-start; gap:4px;
    position:absolute; top:100%; left:0; right:0;
    background:var(--crema); padding:16px 24px 22px;
    box-shadow:0 18px 30px -18px rgba(5,42,18,.5);
  }
  .nav-links.abierto a{color:var(--tinta); padding:10px 0; width:100%;}
  .nav-burger{display:block;}
  .nav{gap:10px;}
}
@media (max-width: 900px){
  .sobre-grid, .ubicacion-grid, .contacto-grid{grid-template-columns:1fr;}
  .sobre-lista{grid-template-columns:1fr;}
  .aguas-grid{grid-template-columns:repeat(2,1fr);}
  .aguas-grid a.tarjeta-agua{grid-column:span 2 !important;}
  .galeria-grid{grid-template-columns:repeat(2,1fr);}
  .galeria-grid figure:nth-child(1){grid-row:auto; aspect-ratio:3/4;}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .fila-campos{grid-template-columns:1fr;}
}
/* A los 560px el boton "Llamar por internet" con su texto completo,
   junto al selector de idioma y al telefono, ya no cabe en una sola
   fila (empuja el boton de menu fuera de la pantalla). Por eso el
   modo "solo icono" empieza aqui, antes de los ajustes generales de
   480px de mas abajo. */
@media (max-width: 620px){
  .nav-llamada{padding:8px; border-radius:50%;}
  .nav-llamada-texto{display:none;}
  .nav-tel{padding:9px 11px;}
  .nav-tel-texto{display:none;}
}
@media (max-width: 560px){
  .footer-grid{grid-template-columns:1fr;}
  section{padding:64px 0;}
  .envoltura{padding-inline:18px;}

  /* Llamar por internet: en vez de un menu desplegable (se saldria de
     la pantalla en un celular angosto), pasa a una "hoja" fija abajo,
     como una ventanita propia -- igual de facil de cerrar con la X o
     el boton Colgar/Cerrar de siempre. */
  .llamada-panel{
    position:fixed; top:auto; bottom:16px; left:16px; right:16px;
    width:auto; max-width:none;
  }
}
@media (max-width: 480px){
  .nav{padding:10px 10px; gap:6px;}
  .nav-marca img{height:32px; width:32px; border-radius:8px;}
  .nav-marca span{font-size:14px; white-space:nowrap;}
  .nav-idioma{font-size:11.5px; gap:3px; padding:4px 4px 4px 8px;}
  .nav-idioma-opcion{padding:5px 8px;}
  .nav-idioma-icono{width:13px; height:13px;}
}