/* =====================================================================
   AGENDAR CITA — Destino Castilla (LTSM-5688 / LTSM-5466)
   Figma cb3izHyJ3uWqfAzbtHjEGP · página "13. Agendar Cita"
     desktop 1366 x 1238 -> 31139:216299 (`contacto1-pp-desktop`)
     mobile   375 x 2188 -> 31139:216222 (`contacto1-pp-mobile`)
     toast                -> componente `Notification` (Success · Dismissible)

   Mobile-first: la base es el frame de 375 y el de 1366 entra en
   @media (min-width: 1200px). Todo bajo .ac-page — no toca castilla.css ni
   el chrome global.

   El orden de los bloques cambia entre breakpoints (en mobile el título abre
   la pantalla sobre blanco; en desktop es la cabecera de la tarjeta), y lo
   resuelve `order` sobre el flex de .ac-page. Ver el comentario del template.
   ===================================================================== */

.ac-page {
	--ac-gold:    #b08524;   /* secondary/base   — iconos, pastilla AM, CTA   */
	--ac-gold-6:  #9c7420;   /* hover del CTA                                */
	--ac-header:  #14142b;   /* Alias/Grayscale/Header                       */
	--ac-body:    #4e4b66;   /* Alias/Grayscale/Body                         */
	--ac-label:   #6e7191;   /* Alias/Grayscale/Label                        */
	--ac-line:    #d9dbe9;   /* Alias/Grayscale/Line — subrayado y CTA off   */
	--ac-bg:      #fcfcfc;   /* Alias/Grayscale/Background — tarjeta mobile  */
	--ac-white:   #ffffff;
	--ac-ok-bg:   #e6faee;   /* positive/50  — fondo del toast               */
	--ac-ok-txt:  #17723f;   /* positive/700 — título del toast              */
	--ac-error:   #c0392b;

	display: flex;
	flex-direction: column;
	background: var(--ac-white);
	color: var(--ac-header);
	font-family: 'Montserrat', sans-serif;
	overflow-x: hidden;
}
/* Reset con especificidad (0,1,0), igual que en el Home, para que las reglas
   de clase de abajo puedan ajustar márgenes sin pelearse con él. */
.ac-page *,
.ac-page *::before,
.ac-page *::after { box-sizing: border-box; }
.ac-page * { margin: 0; }
.ac-page img { display: block; max-width: 100%; }

/* =====================================================================
   1. INTRO  (Figma mobile: `Frame 830` 293x132, top 137, left 44)

   Las medidas del frame son absolutas y su cabecera mide 65; la nuestra, 55.
   Lo que se reproduce es la distancia AL CHROME, no la coordenada: el título
   arranca 72 por debajo del header (137 - 65) y la fotografía, 256 (321 - 65).
   Ese segundo número se fija con `min-height` y no sumando paddings, porque el
   bloque de texto cambia de alto según si la bajada cabe en una línea o en dos
   —y ahí Montserrat decide por milímetros—. Con la altura fija, la fotografía
   y la tarjeta caen donde el Figma dice pase lo que pase con el texto.
   ===================================================================== */
.ac-intro {
	order: 1;
	position: relative;
	padding: 72px 38px 24px 44px;
	min-height: 256px;
	background: var(--ac-white);
}

/* La "Ð" del Figma es el isotipo de marca enmascarado, el mismo que ya usan
   Amenidades, Ubicación y FAQs (`isotipo-castilla.svg`). Enmascarado y no como
   <img> para poder darle el color desde CSS. Ojo: NO es
   `le-textura-castilla.svg`, que es la textura diagonal de las secciones
   oscuras del Home y aquí sale como un borrón. Va detrás del título y no se
   lee en voz alta. */
/* `Group 378` del frame de 375: 166x166, a 5 del borde izquierdo y a 103 del
   alto del frame —o sea 38 por debajo de la cabecera—. En desktop es otro nodo
   y mide 131. */
.ac-intro__textura {
	position: absolute;
	left: 5px;
	top: 38px;
	width: 166px;
	height: 166px;
	/* `Alias/Grayscale/Input`, el mismo token que trae el vector en el Figma.
	   Es un gris sólido, no una opacidad del color de texto. */
	background-color: #eff0f6;
	-webkit-mask: url(../../images/isotipo-castilla.svg) no-repeat center / contain;
	        mask: url(../../images/isotipo-castilla.svg) no-repeat center / contain;
	pointer-events: none;
}

/* En el Figma el bloque de texto es `frase`, de ancho FIJO 289 —no fluido—.
   La diferencia se ve en cuanto el teléfono es más ancho que 375: dejándolo
   fluido, en un iPhone Pro Max (430) "AGENDA TU CITA" entra de una sola línea y
   el bloque deja de partir donde manda el diseño. Con el ancho fijo, el corte
   es el mismo en cualquier teléfono. */
.ac-intro__txt { position: relative; max-width: 289px; }
.ac-intro__title {
	font-size: 36px;
	line-height: 1.1;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--ac-header);
}
.ac-intro__sub {
	margin-top: 8px;
	/* En el Figma la bajada ocupa DOS líneas dentro de una caja de 289 (el nodo
	   mide 289x44 = 2 x 22.4). En el navegador la misma frase entra en una sola
	   por muy poco: la Montserrat de Figma corre un pelo más ancha que la del
	   webfont. Se acota la caja para que rompa por el mismo sitio —después de
	   "apartamento"— y el bloque conserve los 132 de alto del diseño. */
	max-width: 250px;
	font-size: 16px;
	line-height: 1.4;
	font-weight: 500;
	color: var(--ac-body);
}

/* =====================================================================
   2. HERO  (Figma: `image 398` — mobile 375x354, desktop 1366x500)

   La capa de negro al 40 % que trae el diseño es un segundo relleno del mismo
   nodo, así que viene horneada en la exportación: aquí NO se superpone otra.
   ===================================================================== */
.ac-hero {
	order: 2;
	position: relative;
	height: 354px;
	overflow: hidden;
}
/* El render es muy apaisado (2.7:1) y el hueco de mobile casi cuadrado, así
   que un recorte centrado deja la fachada fuera y llena la pantalla de cielo.
   El encuadre se corre a la derecha hasta dejar el edificio al centro, como en
   el frame de 375. En desktop el hueco ya tiene la proporción del original y
   el recorte vuelve al centro. */
.ac-hero img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; }

/* =====================================================================
   3. TARJETA DEL FORMULARIO
      (Figma mobile: `Frame 496` 327x754, top 442, left 24, radio 24,
       padding 16, gap 40, fondo Alias/Grayscale/Background)
   ===================================================================== */
.ac-card {
	order: 3;
	position: relative;
	z-index: 1;
	/* Sube sobre la fotografía: el hero termina en 675 y la tarjeta arranca
	   en 442 (Figma), o sea 233 px de solape.
	   Y por abajo monta sobre el pie: la tarjeta acaba en 1196.65 y
	   `footer/mobile` empieza en 1182.11, así que se solapan 15. Es lo que hace
	   que en el diseño el oliva asome por detrás de las esquinas redondeadas
	   en vez de arrancar con una franja blanca. */
	margin: -233px auto -15px;
	width: calc(100% - 48px);
	max-width: 327px;
	padding: 16px;
	border-radius: 24px;
	background: var(--ac-bg);
	display: flex;
	flex-direction: column;
	gap: 40px;
}

/* ------------------------------- campos ------------------------------ */
/* En mobile los seis campos van PEGADOS, sin hueco entre ellos: el frame de
   375 mide 382.65 para seis inputs de 63.66, o sea gap 0. Lo que los separa es
   el propio subrayado de cada uno. En desktop sí hay 24 de aire entre filas
   porque ahí la rejilla es de 3x2. */
.ac-grid { display: grid; gap: 0; }

.ac-field {
	position: relative;
	height: 64px;
	border-bottom: 1px solid var(--ac-line);
	display: flex;
	align-items: center;
	gap: 12px;
}
.ac-field input {
	width: 100%;
	height: 100%;
	border: 0;
	outline: 0;
	background: none;
	font-family: inherit;
	font-size: 16px;
	color: var(--ac-header);
	padding: 18px 0 0;
}
.ac-field label {
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	font-size: 16px;
	color: var(--ac-label);
	pointer-events: none;
	transition: top .16s ease, font-size .16s ease, transform .16s ease;
}
.ac-field--ico label { left: 36px; }
.ac-field--ico > [class^="icon-"] { flex: 0 0 24px; font-size: 22px; color: var(--ac-label); }
.ac-field input:focus ~ label,
.ac-field input:not(:placeholder-shown) ~ label { top: 14px; transform: none; font-size: 12px; }

/* input[type=date] nunca hace match con :placeholder-shown, así que con la
   regla de arriba la etiqueta flotaría desde el inicio. Mientras el campo siga
   vacío se devuelve a su sitio y se oculta el "dd/mm/aaaa" nativo, que en el
   Figma no existe.
   Ojo con el selector: antes esto colgaba de `:invalid`, y `:invalid` no es lo
   mismo que "vacío" —una fecha anterior al `min`, o a medio teclear, también lo
   es—. El resultado era que al escribir una fecha fuera de rango el texto se
   volvía transparente y parecía que se borraba sola. La clase la lleva el JS y
   sólo mira si hay valor. */
.ac-field.is-vacio input[type="date"]:not(:focus) ~ label {
	top: 50%; transform: translateY(-50%); font-size: 16px;
}
.ac-field.is-vacio input[type="date"]:not(:focus)::-webkit-datetime-edit { color: transparent; }
.ac-field input[type="date"]::-webkit-calendar-picker-indicator { opacity: 0; cursor: pointer; }

/* La pastilla AM/PM del Figma: el CRM espera la hora en un solo campo, así
   que el <input> guarda HH:MM y este botón decide el meridiano. */
.ac-field--hora input { padding-right: 52px; }
.ac-ampm {
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	background: var(--ac-gold);
	color: #fff;
	border: 0;
	border-radius: 6px;
	font-family: inherit;
	font-size: 13px;
	font-weight: 700;
	padding: 4px 10px;
	cursor: pointer;
}
.ac-ampm:hover { background: var(--ac-gold-6); }

/* El error sólo se pinta cuando el campo ya se tocó (clase desde el JS):
   marcar en rojo algo que el usuario todavía no llenó es ruido. */
.ac-field__error {
	position: absolute;
	left: 0;
	bottom: -16px;
	font-size: 12px;
	line-height: 14px;
	color: var(--ac-error);
	opacity: 0;
	transition: opacity .16s ease;
	pointer-events: none;
}
.ac-field.is-invalid { border-bottom-color: var(--ac-error); }
.ac-field.is-invalid .ac-field__error { opacity: 1; }
/* El aviso cuelga por debajo del subrayado y en mobile no hay hueco entre
   campos: sin este respiro caería encima de la etiqueta del siguiente. Sólo se
   abre cuando el campo está en error, así que la pantalla en reposo mantiene
   las medidas del Figma. */
.ac-field.is-invalid { margin-bottom: 18px; }

/* ------------------------------- enviar ------------------------------ */
/* En el frame de 375 el botón NO es un bloque aparte: es el último hijo de la
   misma columna que los campos, a 16 de distancia. Los 40 de separación son los
   que hay hasta la sala de ventas. */
.ac-form__actions { margin-top: 16px; display: flex; flex-direction: column; align-items: stretch; }

/* `Button - Primary`. Cambia de talla entre breakpoints, y no es un detalle:
     mobile  → Size Medium, 295 (relleno) x 56, padding 16/32
     desktop → Size Small,  180 (fijo)    x 41, padding 12/24
   Arranca en State=Disabled (relleno Alias/Grayscale/Line) y sólo se pinta de
   dorado cuando el formulario valida. */
.ac-send {
	width: 100%;
	min-height: 56px;
	padding: 16px 32px;
	border: 0;
	border-radius: 100px;
	background: var(--ac-line);
	color: var(--ac-label);
	cursor: not-allowed;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	font-family: inherit;
	font-size: 16px;
	line-height: 1.4;
	font-weight: 600;
	transition: background .16s ease, color .16s ease;
}
.ac-send [class^="icon-"] { font-size: 20px; line-height: 1; }
.ac-send:not(:disabled) { background: var(--ac-gold); color: #fff; cursor: pointer; }
.ac-send:not(:disabled):hover { background: var(--ac-gold-6); }

.ac-form__feedback {
	margin-top: 16px;
	font-size: 14px;
	line-height: 20px;
	text-align: center;
	color: var(--ac-body);
}
.ac-form__feedback.is-error { color: var(--ac-error); }

/* =====================================================================
   4. SALA DE VENTAS  (Figma desktop: `Frame 496` 989x70, gap 10)
   ===================================================================== */
/* `Sala de ventas` es Desktop/Text Medium SemiBold: 600, no 700. */
.ac-sala__title { font-size: 16px; line-height: 1.4; font-weight: 600; color: var(--ac-header); }
/* Del rótulo a las filas hay 32 y entre filas 24 (Frame 1248 / Frame 1247). */
.ac-sala__cols { margin-top: 32px; display: grid; gap: 24px; }
.ac-sala__item {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 14px;
	line-height: 1.4;
	color: var(--ac-body);
}
.ac-sala__item > [class^="icon-"] { flex: 0 0 24px; font-size: 22px; line-height: 1.2; color: var(--ac-gold); }
.ac-sala__txt { flex: 1 1 auto; }
/* En la columna del teléfono el enlace va pegado a los números, no empujado al
   borde de la columna: por eso ahí el bloque de texto no crece. */
.ac-sala__item--tel .ac-sala__txt { flex: 0 1 auto; }
.ac-sala__tel { display: block; white-space: nowrap; }
.ac-sala__link {
	flex: 0 0 auto;
	align-self: center;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	font-weight: 600;
	color: var(--ac-gold);
	text-decoration: none;
}
/* El reset heredado trae `a:visited { color: purple }` y gana por
   especificidad (0,1,1) a la regla de arriba (0,1,0). */
.ac-sala__link:visited { color: var(--ac-gold); }
.ac-sala__link:hover { color: var(--ac-gold-6); }

/* =====================================================================
   5. TOAST  (componente `Notification`: 327x112, radio 12, padding 24,
              fondo positive/50, título positive/700 SemiBold 16/140 %)
   ===================================================================== */
.ac-toast {
	position: fixed;
	z-index: 1200;
	top: 88px;
	left: 16px;
	right: 16px;
	display: flex;
	align-items: flex-start;
	gap: 16px;
	padding: 24px;
	border-radius: 12px;
	background: var(--ac-ok-bg);
	box-shadow: 0 8px 10px rgba(0, 0, 0, .08);
	opacity: 0;
	transform: translateY(-8px);
	transition: opacity .2s ease, transform .2s ease;
}
.ac-toast[hidden] { display: none; }
.ac-toast.is-open { opacity: 1; transform: none; }
.ac-toast__ico { flex: 0 0 24px; font-size: 22px; line-height: 1; color: var(--ac-ok-txt); }
.ac-toast__txt { flex: 1 1 auto; }
.ac-toast__title { font-size: 16px; line-height: 1.4; font-weight: 600; color: var(--ac-ok-txt); }
.ac-toast__desc { font-size: 14px; line-height: 1.4; font-weight: 500; color: var(--ac-body); }
.ac-toast__close {
	flex: 0 0 auto;
	background: none;
	border: 0;
	padding: 0;
	font-size: 16px;
	line-height: 1;
	color: var(--ac-header);
	cursor: pointer;
}

/* =====================================================================
   6. TABLET — el formulario ya cabe en dos columnas antes de llegar al
      layout de 1366. El Figma no trae este frame; es una interpolación.
   ===================================================================== */
@media (min-width: 768px) {
	.ac-card { max-width: 640px; width: calc(100% - 96px); padding: 32px; }
	/* El corte en dos líneas y el bloque de 289 son del frame de 375. De tablet
	   para arriba el título va en una línea y la bajada también, como en el
	   frame de 1366. */
	.ac-intro__txt { max-width: none; }
	.ac-intro__sub { max-width: none; }
	.ac-grid { grid-template-columns: repeat(2, 1fr); column-gap: 16px; row-gap: 24px; }
	/* En el frame de 1366 la sala mide 989x70: rótulo 22 + 10 + fila 38. Los 32
	   de separación son sólo del layout de mobile. */
	.ac-sala__cols { grid-template-columns: repeat(2, 1fr); margin-top: 10px; gap: 16px; }

	/* Con la rejilla ya en columnas, el botón vuelve a la talla del frame de
	   1366: Size Small, ancho fijo y centrado, separado 40 de los campos. */
	.ac-form__actions { margin-top: 40px; align-items: center; }
	.ac-send {
		width: auto;
		min-width: 180px;
		min-height: 41px;
		padding: 12px 24px;
		font-size: 14px;
		line-height: 1.2;
	}
	.ac-send [class^="icon-"] { font-size: 16px; }
	/* Aquí las filas ya llevan 24 de aire: el aviso de error cabe sin empujar. */
	.ac-field.is-invalid { margin-bottom: 0; }
}

/* =====================================================================
   7. DESKTOP  (frame `contacto1-pp-desktop`, 1366x1238)

   Medidas del Figma, para que se puedan comprobar:
     hero            1366 x 500
     tarjeta         1097 de ancho, arranca en y=325 (solapa 175 del hero),
                     radio 32, padding 54, gap interno 24
     cabecera        989 x 185 (padding vertical 27)
     rejilla         3 columnas de 319, gap 16 · filas de 64, gap 24
     sala de ventas  989 x 70
     pie             empieza en y=976  (325 + 644 + 7)
   ===================================================================== */
@media (min-width: 1200px) {
	/* La fotografía se adelanta y la intro pasa a ser la cabecera de la
	   tarjeta: mismo fondo blanco, radio arriba aquí y abajo en .ac-card. */
	.ac-hero  { order: 1; height: 500px; }
	.ac-hero img { object-position: 50% 50%; }
	.ac-intro { order: 2; }
	.ac-card  { order: 3; }

	.ac-intro {
		width: 1097px;
		margin: -175px auto 0;
		/* 54 de padding de tarjeta + 27 de padding vertical de la cabecera */
		padding: 81px 54px 0;
		/* Aquí la intro es la cabecera de la tarjeta y se ajusta a su contenido:
		   el alto mínimo de mobile la dejaría con un hueco muerto debajo. */
		min-height: 0;
		border-radius: 32px 32px 0 0;
	}
	/* 54 del padding de la tarjeta + 27 del padding vertical de la cabecera:
	   la textura queda centrada con el bloque del título, como en el Figma. */
	.ac-intro__textura { left: 54px; top: 81px; width: 131px; height: 131px; }
	/* En el Figma el título arranca 51 px dentro de la textura, no alineado
	   con los campos: la "Ð" asoma por detrás de la primera letra. */
	.ac-intro__txt { padding-left: 51px; }

	.ac-card {
		width: 1097px;
		max-width: none;
		margin: 0 auto;
		/* 27 restantes de la cabecera + 24 de gap entre cabecera y formulario */
		padding: 51px 54px 54px;
		border-radius: 0 0 32px 32px;
		background: var(--ac-white);
		gap: 24px;
	}
	/* En escritorio no hay solape: la tarjeta acaba en 969 y el pie empieza en
	   976, así que se devuelve el margen y se dejan los 7 px de aire. */
	.ac-card { margin-bottom: 0; }
	.ac-page { padding-bottom: 7px; }

	.ac-grid { grid-template-columns: repeat(3, 1fr); column-gap: 16px; row-gap: 24px; }

	.ac-sala__cols { grid-template-columns: repeat(3, 1fr); gap: 16px; }
	.ac-sala__item { align-items: flex-start; }

	.ac-toast { top: 128px; right: 48px; left: auto; width: 327px; }
}

@media (prefers-reduced-motion: reduce) {
	.ac-page *,
	.ac-page *::before,
	.ac-page *::after { transition: none !important; }
}