/* Propuesta C · paleta del logo: crema, oliva, terracota, sol mostaza y piedra rosada */
:root {
  --crema: #fbf8f1;
  --arena: #f3ebdd;
  --piedra: #e9cdb3;
  --oliva: #5f6f3a;
  --oliva-claro: #8a9a5b;
  --monte: #2b3320;          /* secciones oscuras */
  --tinta: #262d1a;
  --tinta-suave: #575c48;
  --terracota: #a9521f;      /* botones: 5,1:1 con blanco */
  --terracota-viva: #c46a32;
  --sol: #e2a743;
  --linea: #ddd2bf;

  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: 'Instrument Sans', system-ui, sans-serif;
  --script: 'Parisienne', cursive;

  --m: clamp(16px, 4vw, 56px);
  --max: 1240px;
  --radio: 22px;
  --s-cuerpo: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --s-lead: clamp(1.125rem, 1.05rem + 0.4vw, 1.3125rem);
  --s-h2: clamp(2.25rem, 1.6rem + 3vw, 4.25rem);
  --s-h1: clamp(2.75rem, 1.8rem + 4.6vw, 5.75rem);
  /* Escala de letra: serif solo en titulares (h1, h2) y citas; sans en todo lo demás */
  --t-1: 0.8125rem;   /* etiquetas, notas, chips */
  --t-2: 0.9375rem;   /* texto secundario, listas, menú */
  --t-4: 1.25rem;     /* subtítulos (h3) y nombres de habitación */
  --t-cita: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --t-num: clamp(2rem, 1.5rem + 1.6vw, 2.75rem);   /* precios y cifras */
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--crema); color: var(--tinta); font: 400 var(--s-cuerpo)/1.6 var(--sans); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: 3px; }
h1, h2, h3 { margin: 0; font-weight: 600; text-wrap: balance; }
h1, h2 { font-family: var(--serif); letter-spacing: -0.01em; line-height: 1.02; }
h1, h2, h3, .num, .precio, .pasos .n { font-variant-numeric: lining-nums; }
h2 { font-size: var(--s-h2); }
h3 { font-size: var(--t-4); line-height: 1.3; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 3px solid var(--sol); outline-offset: 3px; }
section { padding: clamp(80px, 10vw, 150px) var(--m); }
section > * { max-width: var(--max); margin-inline: auto; }
/* Al saltar desde el menú, la etiqueta de la sección queda a 100 px del borde, justo bajo el menú flotante:
   se descuenta el relleno superior de la sección */
section[id] { scroll-margin-top: calc(100px - clamp(80px, 10vw, 150px)); }

.etq { font-size: var(--t-1); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--oliva); display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
.etq::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--sol); }
.cab { margin-bottom: clamp(40px, 5vw, 72px); }
.cab .sub { margin-top: 20px; max-width: 56ch; font-size: var(--s-lead); color: var(--tinta-suave); }

/* Botones en píldora */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 26px; border-radius: 999px; font-weight: 600; text-decoration: none; transition: transform .2s, background .2s; }
.btn:hover { transform: translateY(-1px); }
.btn-sol { background: var(--terracota); color: #fff; }
.btn-sol:hover { background: #8f4419; }
.btn-linea { border: 1.5px solid currentColor; }
.btn-pq { min-height: 40px; padding: 8px 18px; font-size: var(--t-2); }

/* Navegación flotante */
.nav { position: fixed; top: 14px; left: 50%; transform: translateX(-50%); z-index: 20; width: min(var(--max), calc(100% - 24px)); display: flex; align-items: center; gap: 24px; padding: 8px 8px 8px 12px; border-radius: 999px; background: rgba(251, 248, 241, .86); backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--linea), 0 10px 30px rgba(38, 45, 26, .08); }
.marca { display: flex; align-items: center; gap: 10px; text-decoration: none; font: 600 1.25rem/1 var(--serif); color: var(--oliva); }
.marca img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.marca em { font: 400 1.35em/1 var(--script); color: var(--terracota-viva); }
.nav nav { display: flex; gap: 26px; margin-left: auto; font-size: var(--t-2); font-weight: 500; }
.nav nav a { text-decoration: none; }
.nav nav a:hover { color: var(--terracota); }
.nav-acc { display: flex; align-items: center; gap: 14px; }
.idioma { font-size: var(--t-2); font-weight: 500; }

/* Portada */
.hero { overflow-x: clip; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(32px, 5vw, 80px); align-items: center; max-width: calc(var(--max) + 2 * var(--m)); margin: 0 auto; padding-top: clamp(120px, 14vw, 170px); padding-bottom: clamp(56px, 7vw, 96px); }
.hero > * { max-width: none; margin: 0; }
.hero h1 { font-size: var(--s-h1); color: var(--tinta); }
.lead { margin-top: 24px; font-size: var(--s-lead); max-width: 44ch; color: var(--tinta-suave); }
.acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.pruebas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 40px; }
.pruebas a { display: block; padding: 8px 14px; border-radius: 999px; background: var(--arena); font-size: var(--t-1); font-weight: 500; text-decoration: none; }
.pruebas a:hover { background: var(--piedra); }
.hero-foto { position: relative; margin: 0; min-width: 0; }
/* Galería de la portada: las fotos se deslizan dentro del mismo marco */
.galeria { position: relative; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; aspect-ratio: 1 / 1; border-radius: var(--radio); scrollbar-width: none; }
.galeria::-webkit-scrollbar { display: none; }
.foto { position: relative; flex: 0 0 100%; margin: 0; scroll-snap-align: start; }
.foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.foto-falta { display: grid; place-items: center; height: 100%; background: repeating-linear-gradient(135deg, var(--arena) 0 16px, var(--piedra) 16px 32px); }
.foto-falta span { padding: 8px 14px; border-radius: 999px; background: var(--crema); font-size: var(--t-2); font-weight: 600; color: var(--tinta-suave); }
.foto figcaption { position: absolute; left: 14px; bottom: 14px; max-width: calc(100% - 150px); padding: 7px 12px; border-radius: 999px; background: rgba(38, 45, 26, .72); color: var(--crema); font-size: var(--t-1); }
.galeria-nav { position: absolute; right: 14px; bottom: 14px; display: flex; align-items: center; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(38, 45, 26, .72); color: var(--crema); font-size: var(--t-1); font-weight: 600; font-variant-numeric: tabular-nums; }
.galeria-nav button { width: 30px; height: 30px; border: 0; border-radius: 50%; background: rgba(251, 248, 241, .14); color: var(--crema); font: 600 1.125rem/1 var(--sans); cursor: pointer; }
.galeria-nav button:hover { background: var(--terracota-viva); }
.galeria-nav span { min-width: 3.2em; text-align: center; }
.sol { position: absolute; border-radius: 50%; background: radial-gradient(circle, rgba(226, 167, 67, .9) 0, rgba(226, 167, 67, .45) 38%, rgba(226, 167, 67, 0) 70%); pointer-events: none; }
.hero-foto .sol { width: 70%; aspect-ratio: 1; top: -12%; right: -14%; }

/* Cifras */
.cifras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; max-width: calc(var(--max) + 2 * var(--m)); margin: 0 auto; padding-top: 0; }
.cifras > * { margin: 0; }
.cifra { padding: 28px 28px 8px 0; border-top: 1.5px solid var(--tinta); }
.cifra + .cifra { padding-left: 28px; border-left: 1px solid var(--linea); }
.num { font: 600 var(--t-num)/1 var(--sans); letter-spacing: -0.03em; color: var(--oliva); }
.num small { font: 500 var(--t-2)/1 var(--sans); letter-spacing: 0; color: var(--tinta-suave); }
.uni { margin-top: 6px; font-weight: 600; }
.desc { margin-top: 10px; font-size: var(--t-2); color: var(--tinta-suave); }

/* Habitaciones */
.hab { background: var(--arena); border-radius: 36px; margin: 0 clamp(8px, 1.5vw, 20px); }
.hab-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.tipos { border-top: 1.5px solid var(--tinta); }
/* Cada fila es un botón: al pasar o pulsar, el plano de la derecha cambia a esa habitación */
.tipo { position: relative; width: 100%; display: grid; grid-template-columns: 1fr auto; gap: 8px 24px; align-items: center; padding: 22px 16px 22px 0; border: 0; border-bottom: 1px solid var(--linea); background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: padding .25s, background .25s; }
.tipo::before { content: ""; position: absolute; left: 0; top: 50%; width: 0; height: 2px; background: var(--terracota-viva); transition: width .25s; }
.tipo[aria-pressed="true"] { padding-left: 28px; }
.tipo[aria-pressed="true"]::before { width: 16px; }
.tipo:hover .tipo-n, .tipo[aria-pressed="true"] .tipo-n { color: var(--terracota); }
.tipo-txt { display: grid; gap: 4px; }
.tipo-n { font: 600 var(--t-4)/1.3 var(--sans); transition: color .2s; }
.tipo-d { color: var(--tinta-suave); font-size: var(--t-2); }
.precio { white-space: nowrap; font: 600 var(--t-num)/1 var(--sans); letter-spacing: -0.03em; color: var(--oliva); }
.precio span, .precio small { font: 500 var(--t-1)/1 var(--sans); letter-spacing: 0; color: var(--tinta-suave); }
.hab-nota { margin: 14px 0 32px; font-size: var(--t-1); color: var(--tinta-suave); }
.plano { position: sticky; top: 110px; padding: clamp(16px, 2.5vw, 28px); border-radius: var(--radio); background: var(--crema); }
.plano figure { margin: 0; }
.plano figure:not([hidden]) { animation: aparece .35s ease; }
.plano img { width: 100%; height: clamp(240px, 30vw, 400px); object-fit: contain; }
.plano-falta { height: clamp(240px, 30vw, 400px); border-radius: 14px; background: repeating-linear-gradient(135deg, var(--arena) 0 14px, var(--crema) 14px 28px); }
.plano figcaption { margin-top: 16px; font-weight: 600; font-size: var(--t-2); }
.plano-video { margin-top: 6px; font-size: var(--t-2); color: var(--tinta-suave); }
@keyframes aparece { from { opacity: 0; transform: translateY(6px); } }

/* Incluido */
.cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.col { padding: 28px; border-radius: var(--radio); border: 1px solid var(--linea); }
.col h3 { color: var(--oliva); margin-bottom: 16px; }
.col li, .libre li { padding: 9px 0; border-top: 1px solid var(--linea); }

/* Residencia con libertad */
.libre { text-align: center; }
.libre h2 { max-width: none; }
.libre-par { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 56px; text-align: left; }
.libre-par > div { padding: 32px; border-radius: var(--radio); background: var(--arena); }
.libre-par > div:last-child { background: var(--oliva); color: var(--crema); }
.libre-par > div:last-child li { border-color: rgba(251, 248, 241, .25); }
.libre-par h3 { margin-bottom: 14px; }

/* Ubicación: mapa de Granada con los lugares encima */
.ubi-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.granada { position: sticky; top: 110px; border-radius: var(--radio); overflow: hidden; aspect-ratio: 1400 / 1464; background: var(--arena); }
.granada img { width: 100%; height: 100%; object-fit: cover; }
.pin { position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; border: 2.5px solid var(--crema); box-shadow: 0 2px 6px rgba(38, 45, 26, .3); transition: transform .2s; }
.pin span { position: absolute; left: 50%; bottom: 150%; transform: translateX(-50%); padding: 5px 10px; border-radius: 999px; background: var(--tinta); color: var(--crema); font-size: var(--t-1); font-weight: 600; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .2s; }
.pin-casa { width: 26px; height: 26px; margin: -13px 0 0 -13px; z-index: 2; }
.pin-casa span, .pin.on span { opacity: 1; }
.pin.on { transform: scale(1.35); z-index: 3; }
.pin-casa { background: var(--terracota-viva); }
.pin-uni { background: var(--oliva); }
.pin-super { background: var(--sol); }
.pin-metro { background: #4a2c3f; }
.pin-centro { background: #8f4419; border-radius: 3px; }
.pin-bus { background: #2f6f8f; border-radius: 4px; }
.pin-tren { background: var(--tinta); border-radius: 4px; }
/* Nombre de cada campus, escrito sobre su zona sombreada */
.campus { position: absolute; transform: translate(-50%, -50%); padding: 3px 8px; border-radius: 6px; background: rgba(251, 248, 241, .82); color: var(--oliva); font-size: var(--t-1); font-weight: 600; white-space: nowrap; pointer-events: none; transition: background .2s, color .2s; }
.campus.on { background: var(--oliva); color: var(--crema); }
.grupo + .grupo { margin-top: 20px; }
.grupo h3 { display: flex; align-items: center; gap: 10px; font: 600 var(--t-1)/1 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--tinta-suave); margin-bottom: 8px; }
.punto { position: static; display: inline-block; width: 12px; height: 12px; margin: 0; border: 0; box-shadow: none; }
.grupo li { padding: 8px 10px; margin: 0 -10px; border-radius: 10px; cursor: default; transition: background .15s; }
.grupo li:hover, .grupo li:focus-visible, .grupo li.on { background: var(--arena); outline: none; }
.grupo li span { display: block; font-size: var(--t-2); color: var(--tinta-suave); }
.ubi-nota { margin-top: 24px; font-size: var(--t-1); color: var(--tinta-suave); }

/* Mundo: el mapa se ilumina al pasar por cada país */
.mundo { background: var(--monte); color: var(--crema); }
.mundo .etq { color: var(--sol); }
.mundo .sub { color: rgba(251, 248, 241, .75); }
.mundo .ayuda { margin-top: 8px; font-size: var(--t-2); color: rgba(251, 248, 241, .55); }
.mundo-grid { display: grid; gap: 24px; }
.mapa { position: relative; border-radius: var(--radio); background: var(--crema); padding: clamp(8px, 2vw, 24px); }
.mapa-svg { display: block; width: 100%; height: auto; }
.mapa-svg [data-pais] { transition: fill .2s, opacity .2s, stroke-width .2s; }
.mapa .arcos path { stroke-width: 3; stroke-dasharray: 0.1 9; }
.mapa .puntos circle { r: 5px; }
.paises { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.mapa .marcados path { cursor: pointer; }
.mapa.foco .marcados path:not(.on) { opacity: .45; }
.mapa.foco .arcos path:not(.on), .mapa.foco .puntos circle:not(.on) { opacity: .15; }
.mapa .marcados path.on { fill: var(--terracota-viva); }
.mapa .arcos path.on { stroke-dasharray: none; stroke-width: 4; }
.mapa-etq { position: absolute; transform: translate(-50%, -130%); padding: 5px 10px; border-radius: 999px; background: var(--tinta); color: var(--crema); font-size: var(--t-1); font-weight: 600; white-space: nowrap; pointer-events: none; }
.paises ul { display: flex; flex-wrap: wrap; gap: 6px; }
.paises button { font: 500 var(--t-2)/1 var(--sans); color: var(--crema); background: rgba(251, 248, 241, .08); border: 1px solid rgba(251, 248, 241, .18); border-radius: 999px; padding: 9px 13px; cursor: pointer; transition: background .15s, color .15s; }
.paises button:hover, .paises button.on, .paises button[aria-pressed="true"] { background: var(--terracota-viva); border-color: var(--terracota-viva); color: #fff; }
.paises .con { font-size: var(--t-1); opacity: .75; margin-left: 4px; }
.resena { padding: 24px; border-radius: var(--radio); background: rgba(251, 248, 241, .06); border: 1px solid rgba(251, 248, 241, .14); min-height: 150px; }
.resena blockquote, .op blockquote { margin: 0; }
.resena blockquote p, .op blockquote p { font: 500 var(--t-cita)/1.35 var(--serif); }
.resena .autor { margin-top: 14px; font-size: var(--t-2); color: var(--sol); }
.vacia { color: rgba(251, 248, 241, .7); }
.nota { opacity: .75; }

/* Opiniones */
.opin-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 40px; }
.op { display: flex; flex-direction: column; justify-content: space-between; gap: 24px; padding: 32px; border-radius: var(--radio); background: var(--arena); }
.op .autor { font-size: var(--t-2); font-weight: 600; color: var(--oliva); }

/* Reservar */
.reserva { background: var(--arena); border-radius: 36px; margin: 0 clamp(8px, 1.5vw, 20px); }
.pasos { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; border-top: 1.5px solid var(--tinta); }
.pasos li { padding: 24px 20px 24px 0; }
.pasos li + li { padding-left: 20px; border-left: 1px solid var(--linea); }
.pasos .n { font: 600 var(--t-2)/1 var(--sans); font-variant-numeric: tabular-nums; color: var(--terracota); }
.pasos h3 { margin: 18px 0 8px; }
.pasos p { font-size: var(--t-2); color: var(--tinta-suave); }

/* Preguntas */
.faq { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 80px); max-width: calc(var(--max) + 2 * var(--m)); margin: 0 auto; }
.faq > * { margin: 0; max-width: none; }
.faq-lista { border-top: 1.5px solid var(--tinta); }
.faq details { border-bottom: 1px solid var(--linea); }
.faq summary { display: flex; justify-content: space-between; gap: 16px; padding: 22px 0; font-weight: 600; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 400 var(--t-4)/1 var(--sans); color: var(--terracota); transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 0 22px; max-width: 60ch; color: var(--tinta-suave); }

/* Llamada final */
.cta { position: relative; overflow: hidden; text-align: center; background: var(--monte); color: var(--crema); border-radius: 36px; margin: 0 clamp(8px, 1.5vw, 20px); }
.cta .sol { width: 620px; aspect-ratio: 1; left: 50%; top: -340px; transform: translateX(-50%); }
.cta h2, .cta p { position: relative; }
.cta-acc { margin-top: 36px !important; }
.btn-crema { background: var(--crema); color: var(--tinta); }
.btn-crema:hover { background: var(--sol); }
.cta p { margin-top: 16px; color: rgba(251, 248, 241, .8); font-size: var(--s-lead); }

/* Pie */
.pie { padding: clamp(48px, 6vw, 80px) var(--m); }
.pie-cols { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px 32px; max-width: var(--max); margin: 0 auto; font-size: var(--t-2); }
.pie-t { font-weight: 600; color: var(--oliva); }
.legal { color: var(--tinta-suave); }

.wa-fija { display: none; }

@media (max-width: 1000px) {
  .nav nav { display: none; }
  .nav-acc { margin-left: auto; }
  .hero, .hab-grid, .paises, .faq, .ubi-grid { grid-template-columns: 1fr; }
  .hero-foto { max-width: 520px; }
  .cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cifra:nth-child(3) { padding-left: 0; border-left: 0; }
  .plano { position: static; order: -1; }
  .granada { position: relative; top: auto; }
  .cols, .opin-grid { grid-template-columns: 1fr; }
  .pasos { grid-template-columns: 1fr; }
  .pasos li + li { padding-left: 0; border-left: 0; border-top: 1px solid var(--linea); }
}
@media (max-width: 640px) {
  .marca span { display: none; }
  .nav-acc .btn { display: none; }
  .cifras { grid-template-columns: 1fr; }
  .libre-par { grid-template-columns: 1fr; }
  .cifra + .cifra { padding-left: 0; border-left: 0; }
  .tipo { grid-template-columns: 1fr; }
  .wa-fija { display: flex; position: fixed; transition: transform .3s; transform: translateY(160%); left: 12px; right: 12px; bottom: 12px; z-index: 30; box-shadow: 0 8px 24px rgba(38, 45, 26, .25); }
  .pie { padding-bottom: 72px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}
.wa-fija.ver { transform: none; }