/* Estilos · alquiler temporal en Cartagena
   Bandas de color alternas: arena, blanco, azul marino y el degradado del cuadro del atardecer. */

:root {
  --blanco: #FFFFFF;
  --arena: #E4D7C3;
  --arena-claro: #F1E9DD;
  --arena-linea: #CDBEA7;
  --tinta: #3B2A22;
  --tinta-suave: #5A473C;
  --azul: #3F6B7A;
  --azul-oscuro: #2E5361;
  --salmon: #F0A98A;
  --salmon-hover: #F4B99E;
  --salmon-texto: #4A2416;
  --ocre: #B85A3A;
  --ocre-claro: #F0A98A;
  --linea: #D6CCBC;
  --atardecer: linear-gradient(165deg, #B5ADDC 0%, #D9A9C1 50%, #EDA978 100%);

  --titulos: "Montserrat", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --texto: "Open Sans", "Segoe UI", "Helvetica Neue", Arial, sans-serif;

  --ancho: 1180px;
  --margen: clamp(1.25rem, 4vw, 3rem);
  --lateral: max(var(--margen), calc((100% - var(--ancho)) / 2 + var(--margen)));

  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
*, *::before, *::after { box-sizing: inherit; }
html { scroll-behavior: smooth; scroll-padding-top: calc(76px + env(safe-area-inset-top, 0px)); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body { margin: 0; background: var(--blanco); color: var(--tinta); font-family: var(--texto); font-size: 1.0625rem; line-height: 1.65; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
h1, h2, h3 { font-family: var(--titulos); font-weight: 700; line-height: 1.15; margin: 0; letter-spacing: -0.01em; }
h2 { font-size: clamp(1.75rem, 3.2vw, 2.5rem); max-width: 26ch; }
h3 { font-weight: 600; }
p { margin: 0; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--ocre); outline-offset: 3px; border-radius: 2px; }

.saltar { position: absolute; left: -999px; top: 0; background: var(--azul); color: #fff; padding: .6rem 1rem; z-index: 100; }
.saltar:focus { left: 1rem; top: 1rem; }

/* ---------- Bandas ---------- */
.banda--arena { background: var(--arena); }
.banda--arena-claro { background: var(--arena-claro); }
.banda--atardecer { background: var(--atardecer); }
.banda--tinta { background: var(--azul); color: #FFFFFF; }
.banda--tinta p { color: #DBE9EE; }
.banda--tinta :focus-visible { outline-color: var(--ocre-claro); }

/* ---------- Cabecera ---------- */
.cabecera { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.96); backdrop-filter: saturate(140%) blur(8px); border-bottom: 1px solid var(--linea); padding-top: env(safe-area-inset-top, 0px); }
.cabecera__dentro { max-width: var(--ancho); margin: 0 auto; padding: .8rem var(--margen); display: flex; align-items: center; gap: 1.5rem; }
.marca { font-family: var(--titulos); font-weight: 700; font-size: 1.05rem; text-decoration: none; line-height: 1.2; color: var(--tinta); }
.menu { display: flex; gap: 1.4rem; margin-left: auto; font-size: .93rem; }
.menu a { text-decoration: none; color: var(--tinta-suave); font-weight: 600; }
.menu a:hover { color: var(--tinta); }
.idiomas { display: flex; border: 1px solid var(--linea); border-radius: 999px; overflow: hidden; flex: none; }
.idiomas button { font: 600 .78rem/1 var(--titulos); background: none; border: 0; color: var(--tinta-suave); padding: .5rem .62rem; cursor: pointer; }
.idiomas button[aria-pressed="true"] { background: var(--azul); color: #fff; }

/* ---------- Botones ---------- */
.boton { display: inline-block; background: var(--azul); color: #fff; font: 600 1rem/1 var(--titulos); text-decoration: none; padding: 1rem 1.5rem; border: 0; border-radius: 999px; cursor: pointer; }
.boton:hover { background: var(--azul-oscuro); }
.boton--peque { padding: .65rem 1rem; font-size: .88rem; white-space: nowrap; }
.banda--tinta .boton { background: var(--salmon); color: var(--salmon-texto); }
.banda--tinta .boton:hover { background: var(--salmon-hover); }
.boton[disabled] { opacity: .6; cursor: wait; }
.enlace { font-weight: 600; text-underline-offset: 4px; }

/* ---------- Portada ---------- */
.portada { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); min-height: min(82vh, 740px); }
.portada__texto { align-self: center; padding: clamp(2.5rem, 6vw, 5rem) clamp(1.5rem, 4vw, 4rem) clamp(2.5rem, 6vw, 5rem) var(--lateral); }
.portada h1 { font-size: clamp(2.2rem, 4.2vw, 3.6rem); max-width: 14ch; }
.portada__intro { margin-top: 1.4rem; max-width: 42ch; color: var(--tinta-suave); font-size: 1.08rem; }
.portada__precio { margin-top: 1.6rem; padding-left: 1rem; border-left: 4px solid var(--ocre); font-family: var(--titulos); font-weight: 600; font-size: 1.3rem; line-height: 1.3; max-width: 24ch; }
.portada__acciones { margin-top: 2rem; display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.portada__foto { margin: 0; position: relative; min-height: 340px; }
.portada__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---------- Secciones ---------- */
.seccion { padding: clamp(3.5rem, 8vw, 6rem) var(--lateral); }

.vivienda { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.vivienda__intro p { margin-top: 1.25rem; color: var(--tinta-suave); max-width: 46ch; }
.datos { margin: 0; display: grid; grid-template-columns: 1fr 1fr; border-top: 2px solid var(--azul); }
.datos div { padding: 1rem 1rem 1rem 0; border-bottom: 1px solid var(--linea); }
.datos dt { font-size: .82rem; color: var(--tinta-suave); font-family: var(--titulos); font-weight: 600; }
.datos dd { margin: .2rem 0 0; font-weight: 600; line-height: 1.45; }

.fotos h2 { margin-bottom: 1.5rem; }
.pestanas { display: flex; gap: .5rem; overflow-x: auto; padding-bottom: .5rem; scrollbar-width: thin; }
.pestanas button { flex: none; font: 600 .92rem/1 var(--titulos); color: var(--tinta); background: var(--arena-claro); border: 1px solid var(--arena-linea); border-radius: 999px; padding: .7rem 1rem; cursor: pointer; }
.pestanas button[aria-selected="true"] { background: var(--azul); border-color: var(--azul); color: #fff; }
.rejilla { margin-top: 1.25rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); grid-auto-rows: 190px; grid-auto-flow: dense; gap: .75rem; }
.rejilla button { padding: 0; border: 0; background: var(--arena-claro); cursor: zoom-in; border-radius: 4px; overflow: hidden; }
.rejilla img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.rejilla button:hover img { transform: scale(1.03); }
.rejilla button:first-child { grid-column: span 2; grid-row: span 2; }
@media (prefers-reduced-motion: reduce) { .rejilla img { transition: none; } }

.perfiles { margin-top: 2.5rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 3rem); }
.perfiles article { border-top: 3px solid var(--salmon); padding-top: 1.1rem; }
.perfiles h3 { font-size: 1.25rem; color: #fff; }
.perfiles p { margin-top: .6rem; }

.ubicacion { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2rem, 6vw, 5rem); }
.ubicacion__texto p + p { margin-top: 1rem; }
.ubicacion__texto p { max-width: 54ch; color: var(--tinta-suave); }
.ubicacion__texto p:first-child { font-family: var(--titulos); font-weight: 600; font-size: 1.3rem; line-height: 1.4; color: var(--tinta); }

/* ---------- Carrusel de Cartagena ---------- */
.ciudad__cabecera { display: flex; align-items: end; justify-content: space-between; gap: 1rem; }
.ciudad__flechas { display: flex; gap: .5rem; }
.flecha { width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 0; background: var(--azul); color: #fff; font-size: 1.6rem; line-height: 1; cursor: pointer; }
.flecha:hover { background: var(--azul-oscuro); }
.ciudad__pista { margin-top: 1.5rem; display: grid; grid-auto-flow: column; grid-auto-columns: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; border-radius: 4px; }
.ciudad__pista::-webkit-scrollbar { display: none; }
.ciudad__pista figure { margin: 0; scroll-snap-align: start; position: relative; }
.ciudad__pista img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--arena-claro); display: block; }
.ciudad__pista figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 2.5rem 1.25rem 1rem; background: linear-gradient(transparent, rgba(18,24,33,.75)); color: #fff; display: flex; justify-content: space-between; align-items: end; gap: 1rem; }
.ciudad__pista figcaption strong { font-family: var(--titulos); font-weight: 600; font-size: 1.25rem; line-height: 1.25; }
.ciudad__pista figcaption a { color: #E6E9EE; font-size: .8rem; white-space: nowrap; }
.ciudad__puntos { display: flex; justify-content: center; gap: .5rem; margin-top: 1rem; }
.ciudad__puntos button { width: .65rem; height: .65rem; border-radius: 50%; border: 0; padding: 0; background: var(--arena-linea); cursor: pointer; }
.ciudad__puntos button[aria-current="true"] { background: var(--azul); }
@media (prefers-reduced-motion: reduce) { .ciudad__pista { scroll-behavior: auto; } }

/* ---------- Tarifas ---------- */
.tarifas__dentro { max-width: var(--ancho); margin: 0 auto; padding: clamp(3.5rem, 8vw, 6rem) var(--margen); }
.tarifas__lista { list-style: none; margin: 2.5rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tarifas__lista li { padding: 0 1.5rem; border-left: 1px solid rgba(30,43,60,.3); }
.tarifas__lista li:first-child { padding-left: 0; border-left: 0; }
.tarifa__plazo { font-family: var(--titulos); font-weight: 600; }
.tarifa__precio { font-family: var(--titulos); font-weight: 700; font-size: clamp(2.4rem, 5vw, 3.8rem); line-height: 1; margin-top: .5rem; letter-spacing: -0.02em; }
.tarifa__unidad { color: var(--tinta-suave); margin-top: .35rem; }
.tarifas__nota { margin-top: 2.5rem; max-width: 60ch; }

/* ---------- Preguntas ---------- */
.faq__lista { margin-top: 2rem; border-top: 2px solid var(--azul); max-width: 820px; }
.faq details { border-bottom: 1px solid var(--linea); }
.faq summary { cursor: pointer; padding: 1.15rem 2rem 1.15rem 0; font-family: var(--titulos); font-weight: 600; list-style: none; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: .25rem; top: .9rem; font-size: 1.4rem; font-weight: 500; color: var(--ocre); }
.faq details[open] summary::after { content: "−"; }
.faq details p { padding: 0 0 1.25rem; color: var(--tinta-suave); max-width: 64ch; }

/* ---------- Contacto (banda oscura) ---------- */
.contacto { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(2rem, 6vw, 5rem); }
.contacto__intro p { margin-top: 1rem; max-width: 36ch; }
.formulario { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem 1.25rem; }
.campo { display: flex; flex-direction: column; gap: .4rem; grid-column: span 2; }
.campo--mitad { grid-column: span 1; }
.campo label { font-size: .9rem; font-weight: 600; }
.campo input, .campo select, .campo textarea { font: 400 1rem/1.4 var(--texto); color: var(--tinta); background: #fff; border: 1px solid transparent; border-radius: 6px; padding: .8rem .9rem; width: 100%; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: 3px solid var(--ocre-claro); outline-offset: 0; }
.campo--check { flex-direction: row; align-items: flex-start; gap: .7rem; }
.campo--check input { width: 1.15rem; height: 1.15rem; margin-top: .25rem; flex: none; accent-color: var(--salmon); }
.campo--check label { font-weight: 400; color: #DBE9EE; }
.campo--oculto { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.campo--entero { grid-column: span 2; }
.formulario__pie { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.estado { font-weight: 600; }
.aviso-datos { flex-basis: 100%; font-size: .85rem; }
.banda--tinta .estado--ok { color: #FFFFFF; }
.banda--tinta .estado--error { color: #FFE1D6; }

/* ---------- Texto SEO ---------- */
.seo__bloques { margin-top: 2rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem clamp(2rem, 5vw, 4rem); }
.seo h3 { font-size: 1.1rem; }
.seo p { margin-top: .5rem; color: var(--tinta-suave); font-size: .98rem; max-width: 62ch; }

/* ---------- Pie ---------- */
.pie { background: var(--azul-oscuro); color: #EEF4F6; font-size: .92rem; }
.pie__dentro { max-width: var(--ancho); margin: 0 auto; padding: 3rem var(--margen); display: grid; gap: .5rem; }
.marca--pie { color: var(--salmon); font-size: 1.2rem; margin-bottom: .5rem; }
.privacidad summary { cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.privacidad p { margin-top: .6rem; max-width: 70ch; color: #D3E2E7; }
.pie__copy { margin-top: 1rem; color: #B7CDD4; }

/* ---------- Visor de fotos ---------- */
.visor { position: fixed; inset: 0; z-index: 200; background: rgba(25,35,40,.95); display: flex; align-items: center; justify-content: center; padding: calc(3.5rem + env(safe-area-inset-top, 0px)) 4rem calc(2rem + env(safe-area-inset-bottom, 0px)); }
.visor[hidden] { display: none; }
.visor__marco { margin: 0; max-width: 100%; max-height: 100%; display: flex; flex-direction: column; align-items: center; gap: .75rem; }
.visor__marco img { max-width: 100%; max-height: calc(100vh - 9rem); object-fit: contain; border-radius: 3px; }
.visor__marco figcaption { color: #D7DCE3; font-size: .9rem; }
.visor button { background: none; border: 0; color: #fff; cursor: pointer; font-size: 2.6rem; line-height: 1; padding: .5rem .9rem; }
.visor__cerrar { position: absolute; top: calc(.75rem + env(safe-area-inset-top, 0px)); right: 1rem; }
.visor__flecha { position: absolute; top: 50%; transform: translateY(-50%); }
.visor__flecha--izq { left: .5rem; }
.visor__flecha--der { right: .5rem; }

/* ---------- Móvil y tableta ---------- */
@media (max-width: 960px) {
  .menu { display: none; }
  .idiomas { margin-left: auto; }
  .portada { grid-template-columns: 1fr; min-height: 0; }
  .portada__foto { order: -1; aspect-ratio: 4 / 3; min-height: 0; }
  .portada__texto { padding: 2.25rem var(--margen) 3rem; }
  .vivienda, .ubicacion, .contacto { grid-template-columns: 1fr; }
  .perfiles, .seo__bloques { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .cabecera__dentro { gap: .75rem; }
  .marca { font-size: .9rem; }
  .boton--peque { display: none; }
  .datos { grid-template-columns: 1fr; }
  .rejilla { grid-template-columns: 1fr 1fr; grid-auto-rows: 130px; gap: .5rem; }
  .tarifas__lista { grid-template-columns: 1fr; gap: 1.75rem; }
  .tarifas__lista li { padding: 1.5rem 0 0; border-left: 0; border-top: 1px solid rgba(30,43,60,.3); }
  .tarifas__lista li:first-child { padding-top: 0; border-top: 0; }
  .formulario { grid-template-columns: 1fr; }
  .campo, .campo--mitad, .campo--entero { grid-column: span 1; }
  .visor { padding-left: .5rem; padding-right: .5rem; }
  .visor__flecha { top: auto; bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); transform: none; }
  .ciudad__pista img { aspect-ratio: 4 / 3; }
  .ciudad__pista figcaption { flex-direction: column; align-items: start; gap: .25rem; }
  .ciudad__pista figcaption strong { font-size: 1.05rem; }
}