/* GUS-93 · Landing de anuncios «Rinoplastia ultrasónica» (site-anuncios/consulta-rinoplastia-ultrasonica.html).
   Primer pantallazo: la propuesta y el formulario. Solo afecta a .page-landing; usa los tokens de styles.css y
   los componentes de las páginas de procedimiento, Contacto y la portada. */

/* La cabecera y el menú son los de la web (copiados de Contacto por npm run anuncios:huellas): sin reglas propias. */

/* ───────── héroe: propuesta (oscura, con la foto del instrumental) y solicitud (marfil) ───────── */
/* En ordenador, mitad y mitad. El formulario deja a su derecha un pasillo para los botones flotantes (WhatsApp encima del
   chat, abajo a la derecha: el chat mide unos 165 px y va a 28 px del borde), así nunca quedan encima de un campo. */
.page-landing { --lp-flotantes: 212px; }
.lp-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; background: var(--ivory); }
.lp-hero__intro { position: relative; isolation: isolate; overflow: clip; background: var(--night); color: var(--ivory); }
/* El héroe empieza bajo la cabecera fija (main ya deja su altura): la propuesta se queda a la vista mientras se rellena el formulario. */
.lp-hero__stage { position: sticky; top: var(--header-h); display: flex; flex-direction: column; justify-content: center; min-height: calc(100svh - var(--header-h)); }
/* Foto A (vertical, 1024 × 1536; Víctor, 22-oct, sin nota «Imagen ilustrativa» por decisión suya): en ordenador,
   centrada; la punta del instrumental queda bajo la entradilla y la mano a la derecha del botón, nunca bajo el título
   ni el botón (lo mide la prueba de la foto). En móvil, abajo a la derecha (ver más abajo). */
.lp-hero__image { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
/* Velo como el de las portadas con fotos reales (site-completion.css), más denso donde va el texto: los guantes y
   el agua del instrumental son casi blancos y el texto marfil necesita 4,5:1 (comprobado con capturas). */
.lp-hero__stage::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgba(26, 23, 20, .92) 0%, rgba(26, 23, 20, .82) 50%, rgba(26, 23, 20, .74) 66%, rgba(26, 23, 20, .56) 88%, rgba(26, 23, 20, .46) 100%), linear-gradient(0deg, rgba(26, 23, 20, .5), transparent 45%);
}
.lp-hero__copy { position: relative; padding: clamp(36px, 6vh, 72px) var(--gutter) clamp(36px, 5vh, 64px); max-width: 780px; }
.lp-hero .t-kicker { color: var(--ivory-85); margin-bottom: 22px; }
.lp-hero h1 { margin: 0; font-size: clamp(48px, 5.4vw, 90px); line-height: .98; font-weight: 300; letter-spacing: -.05em; text-wrap: balance; }
.lp-hero h1 span { display: block; margin-top: 10px; font-size: .52em; line-height: 1.2; letter-spacing: -.025em; }
.lp-hero__lede { margin: 28px 0 0; max-width: 38ch; font-size: clamp(17px, 1.3vw, 20px); line-height: 1.6; text-wrap: pretty; }
.lp-hero__credentials { margin: 16px 0 0; max-width: 46ch; font-size: 15px; line-height: 1.65; color: var(--ivory-85); text-wrap: pretty; }
.lp-hero__credentials strong { font-weight: 500; color: var(--ivory); }
.lp-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 30px; margin-top: 32px; }
.lp-hero__cta { height: 54px; padding: 0 26px; gap: 14px; font-size: 15px; font-weight: 500; }
.lp-hero__phone { display: inline-flex; flex-direction: column; justify-content: center; gap: 3px; min-height: 48px; color: var(--ivory); }
.lp-hero__phone span { font-size: 10px; letter-spacing: .15em; text-transform: uppercase; color: var(--ivory-85); }
.lp-hero__phone strong { font-size: 18px; font-weight: 500; letter-spacing: .01em; text-underline-offset: 5px; }
.lp-hero__phone:hover strong { text-decoration: underline; }
.lp-hero__trust { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--hair-dark); }
.lp-hero__facts { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 0; padding: 0; list-style: none; font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ivory-85); }
/* El sello de Google de la portada, con fondo marfil para que el texto oscuro se lea sobre la foto. */
.lp-seal { display: inline-flex; background: rgba(239, 232, 225, .94); border-color: rgba(239, 232, 225, .6); }
.lp-seal:hover { background: var(--ivory-hi); }
/* Contorno marfil solo en la columna oscura: el formulario (fondo marfil) conserva el verde de contact-form.css. */
.lp-hero__intro :focus-visible { outline: 2px solid var(--ivory); outline-offset: 4px; }

.lp-hero__request { padding: clamp(28px, 4.5vh, 52px) var(--lp-flotantes) clamp(48px, 7vw, 88px) clamp(24px, 3.4vw, 56px); background: var(--ivory); }
.lp-request__intro { margin-bottom: 2.25rem; }
.lp-request__intro .t-kicker { color: var(--sage-deep); margin: 0 0 16px; }
.lp-request__intro h2 { margin: 0; font-size: clamp(30px, 2.6vw, 42px); line-height: 1.12; font-weight: 400; letter-spacing: -.04em; }
.lp-request__intro h2 em { font-style: normal; color: #596356; }
.lp-request__intro p { margin: 1rem 0 0; max-width: 40rem; font-size: 1rem; line-height: 1.7; color: #57554f; }
/* La cabecera fija no tapa ni el destino de «Solicitar una consulta» ni lo que recibe el foco con el teclado
   (scroll-padding en la página; sin el scroll-margin de los apartados, para no sumar dos veces la cabecera). */
html:has(> body.page-landing) { scroll-padding-top: calc(var(--header-h) + 16px); }
.page-landing section[id], .page-landing #solicitud { scroll-margin-top: 0; }
/* #formulario es la entrada de la solicitud (como en Contacto desde GUS-92 r3): se ven su título y la entradilla, y el
   formulario debajo. */
.page-landing #formulario { scroll-margin-top: 4px; }
/* Víctor (22-oct): en ordenador, con el formulario al lado de la propuesta, sin «Solicitar una consulta» ni en la
   cabecera ni en la propuesta. Por debajo de 1181 px el formulario queda debajo: sigue el de la propuesta (el de la
   cabecera ya lo quita la web y va en el menú). Al bajar, «Contacto» de la cabecera y los botones de los apartados
   siguen llevando al formulario. */
@media (min-width: 1181px) {
  .page-landing .header__actions .btn--cta, .lp-hero__cta { display: none; }
}

/* ───────── apartados ───────── */
.page-landing main h2 { text-wrap: balance; }
.page-landing a[href^="tel:"] { white-space: nowrap; }
.page-landing :is(a, button, summary, label, select) { touch-action: manipulation; }
.lp-technique .video-ultrasonica { margin-top: clamp(32px, 4vw, 56px); }
.lp-section-cta { margin-top: 30px; gap: 14px; }

.lp-doctor { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.lp-doctor h2 { margin: 0; font-size: clamp(40px, 4.6vw, 72px); line-height: 1; font-weight: 300; letter-spacing: -.05em; }
.lp-doctor h2 strong { font-weight: 700; }
.lp-doctor h2 span { display: block; margin-top: 14px; font-size: clamp(18px, 1.5vw, 22px); line-height: 1.35; font-weight: 400; letter-spacing: -.02em; word-spacing: normal; color: var(--ink-70); }
.lp-doctor__portrait { margin: 32px 0 0; max-width: 360px; }
.lp-doctor__portrait img { display: block; width: 100%; height: auto; aspect-ratio: 800 / 1109; object-fit: cover; }
.lp-doctor__cv { margin-top: 0; }

.lp-reviews .review-room__source { letter-spacing: .1em; }
.lp-closing .closing__cta, .lp-closing .closing__small-link { white-space: nowrap; }

/* ───────── portátil pequeño, tableta y móvil: la propuesta arriba y el formulario justo debajo ───────── */
/* Por debajo de 1181 px la columna del formulario, con el pasillo de los flotantes, quedaría demasiado estrecha. */
@media (max-width: 1180px) {
  .lp-hero { grid-template-columns: 1fr; }
  .lp-hero__stage { position: relative; top: auto; min-height: 0; }
  /* En tableta, la punta del instrumental queda bajo el título y la mano a la derecha del botón (medido de 768 a 1180 px). */
  .lp-hero__image { object-position: 60% 60%; }
  .lp-hero__stage::after { background: rgba(26, 23, 20, .74); }
  .lp-hero__copy { max-width: 780px; padding-bottom: 44px; }
  .lp-hero__request { padding: clamp(44px, 9vw, 64px) var(--gutter) clamp(48px, 7vw, 88px); }
}
@media (max-width: 960px) {
  .lp-hero__copy { max-width: none; }
  .lp-doctor { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  /* Móvil (Víctor, 22-oct): la foto, más pequeña, abajo a la derecha y fundida arriba y a la izquierda. A sangre, el
     botón (a todo el ancho) tapaba la mano; así la punta del instrumental y la mano quedan bajo él, junto al teléfono y
     los datos. Su alto sigue al espacio que queda bajo el botón (medido: 261 px hasta 414 px de ancho, 237 desde 430 y
     205 desde 600; cambia cuando los datos caben en una línea), con la punta siempre por debajo. */
  .lp-hero__image {
    inset: auto 0 0 auto; width: auto; height: 500px;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 34%), linear-gradient(to right, transparent 0, #000 22%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to bottom, transparent 0, #000 34%), linear-gradient(to right, transparent 0, #000 22%);
    mask-composite: intersect;
  }
  .lp-hero h1 { font-size: clamp(42px, 12vw, 56px); }
  .lp-hero__lede { font-size: 17px; }
  .lp-hero__actions { flex-direction: column; align-items: stretch; gap: 12px; margin-top: 28px; }
  .lp-hero__cta { justify-content: space-between; width: 100%; }
  .lp-hero__phone { align-items: flex-start; }
  .lp-hero__trust { margin-top: 26px; padding-top: 22px; }
  .lp-doctor__portrait { max-width: 260px; }
  .lp-section-cta { width: 100%; justify-content: space-between; }
}
@media (min-width: 415px) and (max-width: 540px) { .lp-hero__image { height: 450px; } }
@media (min-width: 541px) and (max-width: 640px) { .lp-hero__image { height: 390px; } }
@media (prefers-reduced-motion: reduce) {
  .lp-seal, .lp-section-cta { transition: none; }
}