/* ==========================================================================
   Departamentos Del Centro — hoja de estilos de la landing
   Escrita a mano, sin dependencias.

   DIRECCIÓN DE DISEÑO — "Golfo Nuevo"
   Anclada en el lugar: Puerto Madryn es puerto y capital argentina del buceo,
   sobre el Golfo Nuevo y al pie de las bardas.
   · Fondo de vidrio de mar, frío — no el crema tibio de manual.
   · Display en grotesca pesada y compacta, como señalética portuaria. Invierte
     el reflejo de poner una serif de alto contraste en los titulares.
   · La serif queda para los textos de entrada: es la voz humana de un
     alojamiento atendido por sus dueños, no la voz institucional.
   · Acento ladrillo: el rojo de los botes de avistaje y del galés fundador.
   · Elemento distintivo: la placa de coordenadas, anotación de carta náutica.
     Es dato verdadero y útil, no adorno.
   ========================================================================== */

/* --- Tokens --------------------------------------------------------------- */

:root {
	--abismo: #0b2b31;
	--golfo: #14484f;
	--golfo-claro: #2b6c75;
	--vidrio: #e7ecea;
	--vidrio-hondo: #d9e2df;
	--espuma: #ffffff;
	--ladrillo: #b4432a;
	--ladrillo-hover: #97361f;
	--piedra: #55666a;
	--barda: #c9b394;

	/* Todos los pares verificados contra WCAG AA:
	   piedra/vidrio 5.0 · ladrillo/blanco 5.6 · abismo/vidrio 12.4 */

	--radius: 4px;
	--radius-lg: 6px;
	--sombra: 0 1px 2px rgba(11, 43, 49, .05), 0 10px 30px rgba(11, 43, 49, .08);
	--sombra-alta: 0 2px 6px rgba(11, 43, 49, .08), 0 24px 56px rgba(11, 43, 49, .18);

	--wrap: 1140px;
	--gap: clamp(1.5rem, 4vw, 3rem);

	/* Alto del header sticky. Las secciones a pantalla completa tienen que
	   descontarlo: si no, cada una se pasa por lo que mide el header y la
	   última franja siempre queda abajo del pliegue. */
	--header-h: 4.8125rem;

	/* Grotesca para display y cuerpo; serif sólo para los textos de entrada */
	--sans: "Helvetica Neue", Helvetica, Arial, "Segoe UI", Roboto, system-ui, sans-serif;
	--serif: Georgia, "Iowan Old Style", "Times New Roman", serif;
	--mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

/* Ya no hay excepción para celular: desde que la navegación pasa al menú
   desplegable, todo entra en una fila y el header mide 77px igual que en
   escritorio. Medido en viewports reales de 390 y 1512px. */

/* --- Reset mínimo -------------------------------------------------------- */

*,
*::before,
*::after {
	box-sizing: border-box;
}

* {
	margin: 0;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	/* Garantía contra el scroll horizontal. Va "clip" y no "hidden" a propósito:
	   hidden en la raíz crea un contenedor de scroll y rompe el position:sticky
	   del header en varios navegadores. clip no lo crea, así que el header sigue
	   pegado arriba y el desborde lateral se corta igual. */
	overflow-x: clip;
	/* El header es sticky: sin esto las anclas quedan tapadas */
	scroll-padding-top: var(--header-h);
	/* Sin scroll-snap a propósito: incluso en "proximity" corregía la posición
	   sola y ese tirón al scrollear se siente como un salto. Las secciones a
	   pantalla completa dan la sensación de landing sin pelearle al scroll. */
}

body {
	font-family: var(--sans);
	font-size: clamp(1rem, .96rem + .2vw, 1.0625rem);
	line-height: 1.6;
	color: var(--abismo);
	background: var(--vidrio);
	-webkit-font-smoothing: antialiased;
}

img {
	display: block;
	max-width: 100%;
	height: auto;
}

a {
	color: var(--ladrillo);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

ul {
	list-style: none;
	padding: 0;
}

button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
}

:focus-visible {
	outline: 3px solid var(--ladrillo);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		transition-duration: .01ms !important;
	}
}

/* --- Tipografía ---------------------------------------------------------- */

h1,
h2,
h3 {
	font-family: var(--sans);
	font-weight: 800;
	text-wrap: balance;
}

h1 {
	font-size: clamp(2.375rem, 1.1rem + 5.2vw, 4.25rem);
	line-height: .96;
	letter-spacing: -.035em;
}

h2 {
	font-size: clamp(1.75rem, 1.25rem + 2.1vw, 2.625rem);
	line-height: 1.05;
	letter-spacing: -.028em;
}

h3 {
	font-size: clamp(1.125rem, 1.05rem + .4vw, 1.3125rem);
	line-height: 1.2;
	letter-spacing: -.015em;
	font-weight: 700;
}

/* --- Utilidades ---------------------------------------------------------- */

.wrap {
	width: 100%;
	max-width: var(--wrap);
	margin-inline: auto;
	padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

.skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 200;
	background: var(--abismo);
	color: var(--espuma);
	padding: .75rem 1.25rem;
}

.skip:focus {
	left: 0;
}

/* Rótulo de sección: versalita muy espaciada, con una regla ladrillo delante */
.eyebrow {
	display: flex;
	align-items: center;
	gap: .75rem;
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .2em;
	text-transform: uppercase;
}

.eyebrow::before {
	content: "";
	flex: none;
	width: 1.5rem;
	height: 1px;
	background: currentColor;
	opacity: .6;
}

/* --- Botones ------------------------------------------------------------- */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	min-height: 2.875rem;
	padding: .75rem 1.5rem;
	border: 1px solid transparent;
	border-radius: 2px;
	font-weight: 700;
	font-size: .875rem;
	letter-spacing: .01em;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

.btn svg {
	flex: none;
}

.btn--primary {
	background: var(--ladrillo);
	color: var(--espuma);
}

.btn--primary:hover {
	background: var(--ladrillo-hover);
}

.btn--ghost {
	background: transparent;
	color: var(--espuma);
	border-color: rgba(255, 255, 255, .45);
}

.btn--ghost:hover {
	background: rgba(255, 255, 255, .1);
	border-color: var(--espuma);
}

.btn--outline {
	background: transparent;
	color: var(--abismo);
	border-color: rgba(11, 43, 49, .3);
}

.btn--outline:hover {
	border-color: var(--abismo);
	background: var(--espuma);
}

/* --- Header --------------------------------------------------------------- */

/* Fondo sólido a propósito: con backdrop-filter el header formaba un
   "backdrop root" y se dibujaba por encima del lightbox, sin importar el
   z-index. Sólido, el apilado se comporta como corresponde. */
.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--vidrio);
	border-bottom: 1px solid var(--vidrio-hondo);
}

.header__inner {
	display: flex;
	align-items: center;
	gap: 1rem 1.5rem;
	flex-wrap: wrap;
	/* Relleno recortado de .875rem: es lo que permite agrandar el logo sin que
	   el header crezca. Ahora el logo es el elemento mas alto de la fila. */
	padding-block: .625rem;
}

/* El logo caligráfico original, vectorizado, con el descriptor debajo. */
.brand {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: .25rem;
	text-decoration: none;
	color: var(--abismo);
	line-height: 1;
	margin-right: auto;
}

/* 3.5rem = 56px. Ahora el logo es el elemento más alto de la fila, y el header
   sigue midiendo lo mismo porque se le recortó el relleno vertical.
   De esa altura dependen las secciones a pantalla completa: si se vuelve a
   tocar este valor, hay que volver a medir el header y ajustar --header-h. */
.brand__logo {
	display: block;
	width: auto;
	height: 3.5rem;
}

.site-footer .brand__logo {
	height: 2.8125rem;
}

.brand__kicker {
	font-size: .625rem;
	font-weight: 700;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--piedra);
	margin-top: .3125rem;
}

/* Nav sin hamburguesa: en celular envuelve a una segunda fila y queda toda
   visible, sin JavaScript ni menús que se puedan romper. */
.nav {
	display: flex;
	flex-wrap: wrap;
	gap: .25rem 1.375rem;
	order: 3;
	width: 100%;
}

.nav a {
	color: var(--piedra);
	text-decoration: none;
	font-size: .8125rem;
	font-weight: 600;
	letter-spacing: .02em;
	padding: .375rem 0;
	border-bottom: 2px solid transparent;
	transition: color .15s ease, border-color .15s ease;
}

.nav a:hover {
	color: var(--abismo);
	border-bottom-color: var(--ladrillo);
}

@media (min-width: 62rem) {
	.nav {
		order: 0;
		width: auto;
		gap: 1.75rem;
	}
}

/* --- Menú desplegable de celular ----------------------------------------- */

/* En escritorio no existe: ahí la navegación va en línea. */
.menu {
	display: none;
	position: relative;
}

.menu__boton {
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	cursor: pointer;
	color: var(--abismo);
	border: 1px solid rgba(11, 43, 49, .2);
	border-radius: var(--radius);
	/* Saca el triangulito que los navegadores ponen por defecto */
	list-style: none;
}

.menu__boton::-webkit-details-marker {
	display: none;
}

.menu[open] .menu__boton {
	background: var(--espuma);
	border-color: var(--abismo);
}

.menu__panel {
	position: absolute;
	top: calc(100% + .5rem);
	right: 0;
	z-index: 60;
	display: grid;
	min-width: 11rem;
	padding: .5rem;
	background: var(--espuma);
	border: 1px solid var(--vidrio-hondo);
	border-radius: var(--radius-lg);
	box-shadow: var(--sombra-alta);
}

.menu__panel a {
	padding: .6875rem .75rem;
	color: var(--abismo);
	text-decoration: none;
	font-size: .9375rem;
	font-weight: 600;
	border-radius: var(--radius);
}

.menu__panel a:hover {
	background: var(--vidrio);
}

/* Por debajo de 62rem todo entra en UNA fila: logo, menú y WhatsApp.
   Con los cuatro enlaces visibles hacían falta ~400px de contenido y en un
   teléfono de 390 hay 350, así que la navegación pasa al desplegable y el botón
   se queda sólo con el ícono. */
@media (max-width: 61.99rem) {

	.header__inner {
		flex-wrap: nowrap;
		gap: .625rem;
	}

	.nav {
		display: none;
	}

	.menu {
		display: block;
	}

	.header__wa {
		padding: .75rem;
		min-width: 2.75rem;
	}

	.header__wa-texto {
		display: none;
	}
}

/* --- Hero ---------------------------------------------------------------- */

.hero {
	position: relative;
	isolation: isolate;
	color: var(--espuma);
	overflow: hidden;
}

/* Composición de afiche: el rótulo arriba, el bloque principal al medio y los
   datos anclados abajo. Repartir en tres en vez de centrar todo en un bloque
   hace que el alto de pantalla se use con intención.
   El ritmo vertical va en svh, no en rem: es el único bloque que tiene que
   entrar completo en una pantalla, así que se comprime solo en ventanas bajas. */
.hero > .wrap {
	padding-block: clamp(1.5rem, 4svh, 3.5rem);
}

.hero__layout {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	/* Reducido de 5svh: con el bloque de reseñas sumado, el hero se pasaba de
	   una pantalla por 11px. */
	gap: clamp(1.5rem, 3.6svh, 3.25rem);
	flex: 1;
}

.hero__main,
.hero__base {
	max-width: 46rem;
}

/* DUOTONO. La única foto de paisaje del proyecto mide 298x204: a pantalla
   completa hay que ampliarla 5 veces y desenfocarla no alcanzaba, se veía
   simplemente borrosa. Pasada a blanco y negro con el color del golfo mapeado
   encima (mix-blend-mode: color), se lee como una serigrafía: son formas, no
   detalle, y entonces la resolución deja de ser un defecto.
   Con una foto nueva de 1920px, bajar el contraste y sacar el blur alcanza. */
.hero__bg {
	position: absolute;
	/* Sobresale arriba y abajo para tapar los bordes del desenfoque, pero NO a
	   los costados: ahí generaba 66px de ancho extra en un viewport de 390 y
	   provocaba scroll horizontal si el recorte del hero no lo contenía. */
	inset: -1.5rem 0;
	z-index: -3;
	/* Dos declaraciones: la primera es el respaldo para navegadores que no
	   entienden image-set(); la segunda gana donde sí se entiende y sirve WebP,
	   que baja esta imagen de 43 a 17 KB. Importa más que en el resto del sitio
	   porque este elemento es el LCP: es lo último que el visitante espera para
	   considerar la página cargada. */
	background-image: url("../images/foto4.jpg");
	background-image: image-set(url("../images/hero.webp") type("image/webp"), url("../images/foto4.jpg") type("image/jpeg"));
	background-size: cover;
	background-position: center 45%;
	/* Blanco y negro y bien oscura: queda como silueta de acantilado y mar,
	   sin detalle que delate la ampliación ni que compita con el texto. */
	filter: grayscale(1) contrast(1.1) brightness(.5) blur(2px);
	/* Sin scale: ampliaba el fondo tambien a lo ancho */
}

/* Teñido con opacidad en vez de mix-blend-mode: el blend "color" toma el tono
   de la capa de arriba y dejaba la imagen casi gris, además de ser inconsistente
   entre navegadores. Así el azul del golfo se lee siempre igual.
   El rayado finísimo evoca el grabado de las cartas náuticas y remata el
   disimulo de la ampliación. Se cruza en diagonal para que el lado del texto
   quede siempre el más oscuro. */
.hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -2;
	background:
		repeating-linear-gradient(0deg, rgba(255, 255, 255, .02) 0 1px, transparent 1px 3px),
		linear-gradient(102deg, rgba(9, 47, 55, .93) 0%, rgba(11, 55, 63, .78) 48%, rgba(14, 74, 82, .6) 100%),
		linear-gradient(0deg, rgba(9, 40, 46, .6) 0%, transparent 50%);
}


.hero__kicker {
	color: var(--barda);
	margin-bottom: clamp(.75rem, 2svh, 1.375rem);
}

/* La serif entra acá: es la voz humana frente al titular de señalética */
.hero__lede {
	font-family: var(--serif);
	font-size: clamp(1.0625rem, 1rem + .5vw, 1.25rem);
	line-height: 1.55;
	color: rgba(255, 255, 255, .88);
	margin-top: clamp(.875rem, 2svh, 1.5rem);
	/* Más ancho: a 32rem la entrada caía en tres líneas y el hero no entraba
	   en una pantalla. A 38rem son dos. */
	max-width: 38rem;
}

.hero__cta {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	margin-top: clamp(1.25rem, 3svh, 2.25rem);
}

/* Los dos tipos de departamento. Tenían sección propia con dos tarjetas; acá
   viven como un par de columnas en el hero, que es donde el visitante decide. */
.types {
	display: grid;
	gap: clamp(1rem, 2svh, 1.75rem) 2.5rem;
	margin-top: clamp(1.25rem, 3svh, 2.5rem);
	padding-top: clamp(1rem, 2svh, 1.75rem);
	border-top: 1px solid rgba(255, 255, 255, .22);
}

@media (min-width: 40rem) {
	.types {
		grid-template-columns: 1fr 1fr;
	}
}

.type h2 {
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--barda);
	margin-bottom: .5rem;
}

.type p {
	font-family: var(--serif);
	font-size: .9375rem;
	line-height: 1.55;
	color: rgba(255, 255, 255, .82);
}

.facts {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem 1.5rem;
	margin-top: clamp(1rem, 2svh, 1.75rem);
	padding-top: clamp(.875rem, 1.6svh, 1.5rem);
	border-top: 1px solid rgba(255, 255, 255, .16);
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .7);
}

/* --- Puntuación de Google ------------------------------------------------ */

/* Va sobre los dos bloques oscuros del sitio: el hero y la tarjeta de contacto,
   así que un solo estilo alcanza. Discreto a propósito: la prueba social
   convence más cuando parece un dato que cuando parece un cartel. */
.rating {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	margin-top: clamp(1rem, 2.5svh, 1.75rem);
	color: rgba(255, 255, 255, .82);
	font-size: .875rem;
	text-decoration: none;
}

.rating svg {
	flex: none;
	color: #e8b84b;
}

.rating strong {
	font-weight: 700;
	color: var(--espuma);
}

.rating span {
	color: rgba(255, 255, 255, .68);
}

.rating:hover {
	color: var(--espuma);
}

.rating:hover span {
	color: rgba(255, 255, 255, .9);
	text-decoration: underline;
}

/* --- Base del hero: los tipos y los datos, anclados abajo ---------------- */

/* Regla vertical entre las dos columnas: las separa sin agregar una caja */
@media (min-width: 40rem) {
	.types {
		position: relative;
	}

	.types::before {
		content: "";
		position: absolute;
		top: 0;
		bottom: 0;
		left: calc(50% - 1.25rem);
		width: 1px;
		background: rgba(255, 255, 255, .18);
	}
}

/* --- Secciones ----------------------------------------------------------- */

/* Cada sección ocupa la pantalla y centra su contenido, como una landing de
   verdad. min-height y no height: la galería y el formulario son más altos que
   la pantalla y tienen que poder crecer en vez de recortarse.
   Con svh en lugar de vh, la barra del navegador en celular no descuadra nada.
   Se activa sólo si la ventana tiene alto suficiente: en un celular apoyado o
   una ventana baja, estirar todo a pantalla dejaría huecos enormes. */
.section {
	padding-block: clamp(3.5rem, 8vw, 6rem);
}

@media (min-height: 40rem) {

	.hero,
	.section {
		min-height: calc(100svh - var(--header-h));
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	/* Con el contenido centrado verticalmente, el relleno grande no aporta aire
	   y era lo que más empujaba a las secciones fuera de la pantalla: 192px de
	   los 893 que medía Ubicación. Va después de la regla base a propósito, para
	   ganarle por orden sin subir la especificidad. */
	.section {
		padding-block: clamp(1.5rem, 4svh, 3rem);
	}

}

.section--alt {
	background: var(--vidrio-hondo);
}

.section__head {
	max-width: 40rem;
	margin-bottom: clamp(2rem, 4vw, 3rem);
}

.section__kicker {
	color: var(--piedra);
	margin-bottom: 1rem;
}

/* Entrada en serif: pareja deliberada con el titular en grotesca pesada */
.section__lede {
	font-family: var(--serif);
	margin-top: 1.125rem;
	color: var(--piedra);
	font-size: clamp(1.0625rem, 1rem + .3vw, 1.1875rem);
	line-height: 1.6;
	max-width: 34rem;
}

/* --- Galería + lightbox sin JavaScript ----------------------------------- */

/* Columnas explícitas por tamaño en vez de auto-fill: con auto-fill el celular
   quedaba en UNA columna y las 8 fotos apiladas hacían la sección larguísima.
   En escritorio son 4, así que las 8 caen en dos filas parejas.
   El alto va atado a la ventana, así en monitores altos las fotos crecen solas
   y la sección sigue entrando en una pantalla. */
.gallery {
	display: grid;
	gap: .5rem;
	grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 40rem) {
	.gallery {
		gap: .75rem;
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (min-width: 62rem) {
	.gallery {
		grid-template-columns: repeat(4, 1fr);
	}
}

.shot {
	position: relative;
	display: block;
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--espuma);
}

.shot img {
	width: 100%;
	height: clamp(8rem, 26svh, 15rem);
	object-fit: cover;
	transition: transform .4s ease;
}

.shot:hover img {
	/* Sin scale: ampliaba el fondo tambien a lo ancho */
}

/* Velo suave al pasar el mouse: indica que la foto se puede abrir */
.shot::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(11, 43, 49, .4), transparent 60%);
	opacity: 0;
	transition: opacity .3s ease;
}

.shot:hover::after,
.shot:focus-visible::after {
	opacity: 1;
}

.lightbox {
	display: none;
}

/* z-index alto: el header se apila aparte y sin esto quedaba por encima */
.lightbox:target {
	display: grid;
	place-items: center;
	position: fixed;
	inset: 0;
	z-index: 300;
	padding: 1.25rem;
	background: rgba(11, 43, 49, .97);
}

.lightbox img {
	max-width: min(100%, 56rem);
	max-height: 85vh;
	width: auto;
	border-radius: var(--radius);
	box-shadow: var(--sombra-alta);
}

.lightbox__close {
	position: absolute;
	top: 1rem;
	right: 1rem;
	width: 2.75rem;
	height: 2.75rem;
	display: grid;
	place-items: center;
	border-radius: 999px;
	background: rgba(255, 255, 255, .14);
	color: var(--espuma);
	text-decoration: none;
	font-size: 1.5rem;
	line-height: 1;
}

.lightbox__close:hover {
	background: rgba(255, 255, 255, .26);
}

/* --- Servicios y equipamiento -------------------------------------------- */

.split {
	display: grid;
	gap: var(--gap);
	align-items: start;
}

/* min-width: 0 en las celdas. Por defecto una celda de grilla no se encoge por
   debajo del min-content de su contenido, y el iframe del mapa lleva
   width="600" como atributo: eso ensanchaba la columna y desbordaba la pantalla
   en teléfonos angostos. Se aplica a TODAS las grillas del sitio por la misma
   razón, no sólo al mapa. */
.split > *,
.cards > *,
.gallery > *,
.notes > *,
.types > *,
.amenities > *,
.form > *,
.form__row > * {
	min-width: 0;
}

.map {
	min-width: 0;
}

@media (min-width: 55rem) {
	.split {
		grid-template-columns: 1fr 1fr;
	}

	.split--wide {
		grid-template-columns: 1.15fr 1fr;
	}
}

.panel {
	background: var(--espuma);
	border: 1px solid rgba(11, 43, 49, .08);
	border-radius: var(--radius-lg);
	padding: clamp(1.5rem, 3vw, 2.25rem);
	box-shadow: var(--sombra);
}

.panel h3 {
	margin-bottom: 1.375rem;
}

.amenities {
	display: grid;
	gap: .8125rem 1.25rem;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr));
}

.amenities li {
	display: flex;
	align-items: center;
	gap: .625rem;
	font-size: .9375rem;
}

.amenities svg {
	flex: none;
	color: var(--golfo-claro);
}

.features {
	display: grid;
	gap: 1.5rem;
}

.feature {
	display: flex;
	gap: 1rem;
}

.feature__icon {
	flex: none;
	width: 2.5rem;
	height: 2.5rem;
	display: grid;
	place-items: center;
	border-radius: var(--radius);
	background: var(--espuma);
	border: 1px solid rgba(11, 43, 49, .1);
	color: var(--golfo);
}

.feature h3 {
	font-size: 1rem;
	font-weight: 700;
	margin-bottom: .25rem;
}

.feature p {
	color: var(--piedra);
	font-size: .9375rem;
}

/* --- Ubicación ----------------------------------------------------------- */

/* Alto concreto en vez de aspect-ratio: el mapa de OSM calcula su tamaño
   interno al cargar, y con aspect-ratio veía el iframe todavía sin alto
   definitivo, así que dibujaba los tiles sólo en una esquina. */
.map {
	border: 1px solid rgba(11, 43, 49, .1);
	width: 100%;
	/* Atado al alto de la ventana para que la sección entre en una pantalla */
	height: clamp(14rem, 34svh, 24rem);
	display: block;
	border-radius: var(--radius-lg);
	background: var(--vidrio-hondo);
}

.address {
	display: grid;
	gap: clamp(.75rem, 1.8svh, 1.25rem);
	margin-top: clamp(1rem, 2svh, 1.5rem);
}

.address dt {
	font-size: .625rem;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--piedra);
	margin-bottom: .25rem;
}

.address dd {
	margin: 0;
}

.address dd a {
	display: inline-flex;
	align-items: center;
	min-height: 2.25rem;
}

/* --- Sobre Puerto Madryn ------------------------------------------------- */

.notes {
	display: grid;
	gap: var(--gap);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

.note img {
	aspect-ratio: 3 / 2;
	object-fit: cover;
	width: 100%;
	border-radius: var(--radius);
	margin-bottom: 1.125rem;
}

.note h3 {
	margin-bottom: .5rem;
}

.note p {
	color: var(--piedra);
	font-size: .9375rem;
}

/* --- Formulario ---------------------------------------------------------- */

.form {
	display: grid;
	gap: 1.125rem;
}

.form__row {
	display: grid;
	gap: 1.125rem;
}

@media (min-width: 34rem) {
	.form__row--2 {
		grid-template-columns: 1fr 1fr;
	}

	/* Fechas y pasajeros en una sola fila: ahorra un renglón completo y es lo
	   que le faltaba a Contacto para entrar en una pantalla. Tres columnas
	   iguales, no "auto": con auto el select quedaba angosto y la fila no
	   cerraba a la derecha con el campo de arriba. */
	.form__row--3 {
		grid-template-columns: 1fr 1fr 1fr;
	}
}

.field label {
	display: block;
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--piedra);
	margin-bottom: .5rem;
}

.field input,
.field select,
.field textarea {
	width: 100%;
	padding: .6875rem .875rem;
	background: var(--espuma);
	border: 1px solid rgba(11, 43, 49, .2);
	border-radius: var(--radius);
	/* 16px evita que iOS haga zoom al enfocar el campo */
	font-size: 1rem;
	transition: border-color .15s ease;
}

/* Altura fija e igual para todos: con min-height, los input de tipo date se
   dibujaban más altos que el select por el control nativo del calendario y la
   fila quedaba desalineada. */
.field input,
.field select {
	height: 2.5rem;
}

.field textarea {
	min-height: clamp(5rem, 14svh, 8rem);
	resize: vertical;
}

.field input:hover,
.field select:hover,
.field textarea:hover {
	border-color: var(--golfo-claro);
}

.field__hint {
	font-size: .6875rem;
	letter-spacing: .1em;
	color: var(--piedra);
	font-weight: 400;
	text-transform: none;
}

/* Trampa para bots: invisible, pero sin display:none, que algunos
   rellenadores automáticos detectan y saltean. */
.honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.notice {
	border-radius: var(--radius);
	padding: 1rem 1.125rem;
	font-size: .9375rem;
	border-left: 3px solid;
}

.notice--ok {
	background: #e3efe7;
	border-color: #1c6b41;
	color: #14432b;
}

.notice--error {
	background: #f7e6e2;
	border-color: var(--ladrillo);
	color: #7c2d17;
}

.notice strong {
	display: block;
	margin-bottom: .25rem;
}

.notice ul {
	margin: .375rem 0 0;
	padding-left: 1.125rem;
	list-style: disc;
}

/* --- Contacto directo --------------------------------------------------- */

.contact-card {
	background: var(--abismo);
	color: var(--espuma);
	border-radius: var(--radius-lg);
	padding: clamp(1.5rem, 3vw, 2.25rem);
}

.contact-card h3 {
	color: var(--espuma);
	margin-bottom: .625rem;
}

.contact-card p {
	font-family: var(--serif);
	color: rgba(255, 255, 255, .8);
	font-size: .9375rem;
}

.contact-list {
	display: grid;
	gap: .75rem;
	margin-top: 1.75rem;
	padding-top: 1.5rem;
	border-top: 1px solid rgba(255, 255, 255, .16);
}

.contact-list a {
	color: var(--espuma);
	display: flex;
	align-items: center;
	gap: .75rem;
	/* Sin este relleno el enlace mide 25px de alto: poco para el dedo */
	min-height: 2.5rem;
	text-decoration: none;
	font-size: .9375rem;
	word-break: break-word;
}

.contact-list a:hover {
	text-decoration: underline;
}

.contact-list svg {
	flex: none;
	color: var(--barda);
}

/* --- Footer -------------------------------------------------------------- */

.site-footer {
	background: var(--abismo);
	color: rgba(255, 255, 255, .7);
	padding-block: clamp(2.5rem, 5vw, 3.5rem);
	font-size: .875rem;
}

.site-footer .brand,
.site-footer .brand__name {
	color: var(--espuma);
}

/* La piedra no contrasta sobre fondo abismo: acá va un tono claro (5.9:1) */
.site-footer .brand__kicker {
	color: #93a7a9;
}

.footer__grid {
	display: flex;
	flex-wrap: wrap;
	gap: 2rem var(--gap);
	justify-content: space-between;
}

.footer__links {
	display: flex;
	flex-wrap: wrap;
	gap: .25rem 1.5rem;
}

.footer__links a,
.footer__bottom a {
	display: inline-flex;
	align-items: center;
	min-height: 2.25rem;
}

.site-footer a {
	color: rgba(255, 255, 255, .82);
}

.site-footer a:hover {
	color: var(--espuma);
}

.footer__bottom {
	margin-top: 2.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid rgba(255, 255, 255, .14);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem 1.5rem;
	justify-content: space-between;
}

/* ==========================================================================
   Ajustes finos del modo pantalla completa

   Van AL FINAL del archivo a propósito. Las media queries no suman
   especificidad: cuando estas reglas estaban arriba, las reglas base de
   .panel, .section__lede y .form las pisaban por orden de aparición y no
   surtían efecto. Son los últimos centímetros que le faltaban a Ubicación
   y Contacto para entrar en una pantalla.
   ========================================================================== */

/* --- Legibilidad en celular ---------------------------------------------- */

/* Medido en un viewport real de 390px: el menú quedaba en 13px y las etiquetas
   del formulario en 11px. Sobre un teléfono, y para huéspedes de cualquier
   edad, eso es incómodo de leer y de apuntar con el dedo.
   El corte va en 62rem, el mismo que usa el menú para pasar a dos filas: si
   cortaba antes, en una tablet el menú volvía al tamaño chico. */
@media (max-width: 61.99rem) {

	.nav a {
		font-size: .9375rem;
	}

	.btn {
		font-size: .9375rem;
	}

	.field label {
		font-size: .75rem;
		letter-spacing: .1em;
	}

	.facts {
		font-size: .75rem;
	}

	.site-footer {
		font-size: .9375rem;
	}
}

@media (min-height: 40rem) {

	.section__head {
		margin-bottom: clamp(1.25rem, 3svh, 2.25rem);
	}

	.section__lede {
		max-width: 38rem;
	}

	.panel {
		padding: clamp(1.25rem, 2.6svh, 2.25rem);
	}

	.form,
	.form__row {
		gap: clamp(.75rem, 1.8svh, 1.125rem);
	}

	.field label {
		margin-bottom: .375rem;
	}

	.contact-list {
		margin-top: clamp(1rem, 2.4svh, 1.75rem);
		padding-top: clamp(.875rem, 2svh, 1.5rem);
	}
}


/* ==========================================================================
   Defensas contra el desborde horizontal en teléfonos
   ==========================================================================
   Los controles de formulario nativos son el caso más traicionero: en un iPhone
   un input[type=date] o un select traen un ancho intrínseco propio, más grande
   que en Chrome de escritorio, y no se encogen solos. Sin esto, un campo puede
   ensanchar su contenedor y empujar toda la página. */
input,
select,
textarea,
button {
	max-width: 100%;
	min-width: 0;
}

/* Nada con dimensiones propias puede pasarse de su caja. */
img,
svg,
iframe,
video,
canvas {
	max-width: 100%;
}

/* Una palabra sin espacios más ancha que la pantalla —un email largo, una URL—
   desborda porque el navegador no tiene dónde cortarla. `anywhere` le permite
   partirla como último recurso. */
.contact-list a,
.address a,
.footer__links a,
.panel a {
	overflow-wrap: anywhere;
}


/* El logo del pie es el mismo SVG del header pasado a blanco: brightness(0) lo
   lleva a negro y invert(1) a blanco. Evita servir un segundo archivo de 21 KB
   idéntico salvo el color. */
.brand__logo--claro {
	filter: brightness(0) invert(1);
}


/* <picture> es inline por defecto: sin esto queda un hueco de línea base debajo
   de cada foto de la grilla. */
.shot picture {
	display: block;
}


/* --- Mapa diferido ------------------------------------------------------- */

/* La caja hereda el mismo alto y borde que tenía el iframe, así el diseño de la
   sección no cambia al reemplazar el mapa interactivo por la imagen estática. */
.mapa {
	position: relative;
	width: 100%;
	height: clamp(14rem, 34svh, 24rem);
	min-width: 0;
	border: 1px solid rgba(11, 43, 49, .1);
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: var(--vidrio-hondo);
}

.mapa picture,
.mapa__foto {
	display: block;
	width: 100%;
	height: 100%;
}

.mapa__foto {
	object-fit: cover;
	/* El plano está centrado en la dirección; al recortar en pantallas angostas
	   conviene sostener el centro para no perder el marcador. */
	object-position: center;
}

/* El botón sale con [hidden] en el HTML y lo revela el script: si no hay
   JavaScript, no aparece un botón que no podría hacer nada. */
/* Abajo y no al centro: centrado quedaba justo encima del marcador de la
   dirección, o sea tapaba lo único que el plano tiene que mostrar. */
.mapa__abrir {
	position: absolute;
	left: 50%;
	bottom: .75rem;
	transform: translateX(-50%);
	min-height: 2.75rem;
	padding: .75rem 1.25rem;
	border: 1px solid rgba(11, 43, 49, .15);
	border-radius: 2px;
	background: rgba(255, 255, 255, .94);
	color: var(--abismo);
	font-size: .8125rem;
	font-weight: 700;
	cursor: pointer;
	box-shadow: var(--sombra);
}

.mapa__abrir:hover {
	background: var(--espuma);
}

/* Arriba a la derecha: abajo chocaba con el botón en pantallas angostas. */
.mapa__credito {
	position: absolute;
	right: 0;
	top: 0;
	margin: 0;
	padding: .125rem .375rem;
	background: rgba(255, 255, 255, .82);
	font-size: .625rem;
	line-height: 1.4;
	color: var(--piedra);
}

.mapa__credito a {
	color: inherit;
}

/* Cuando el script mete el iframe, ocupa toda la caja */
.mapa > iframe {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}