/* ===========================================================================
 * DOM Tenerife Holidays — micro-interacciones.
 * Victor 2026-07-31: «cuando paso el ratón por los botones, ¿alguna animación
 * bonita? Está todo muy estático».
 *
 * Criterio: nada que llame la atención sobre sí mismo. El movimiento sirve para
 * confirmar que algo responde al ratón, no para lucirse — en una web donde se
 * reserva, la animación que distrae cuesta dinero. Todo por debajo de 300 ms,
 * y sin nada que desplace el layout (solo transform y opacidad, que no fuerzan
 * recálculo de posiciones).
 *
 * Se respeta prefers-reduced-motion: quien pide menos movimiento no ve ninguno.
 * ======================================================================== */

/* --- peso de botones: 500, no 700 (Victor 2026-09-29, opción C) ---
 * La voz de la marca es fina: titulares Playfair 600, pero los botones en
 * Montserrat 700 eran lo que más se alejaba. El 700 va en estilos en línea
 * repartidos por ~40 fuentes y generadores; aquí se corrige en un solo sitio y
 * el refresco diario lo mantiene (inject_motion). Solo button y enlaces con
 * relleno (píldoras y CTA); textos, precios y titulares no se tocan. */
button[style*="font-weight:700"],
button[style*="font-weight: 700"],
button.fw7,
a[style*="font-weight:700"][style*="padding"],
a[style*="font-weight: 700"][style*="padding"],
a.fw7[style*="padding"] {
  font-weight: 500 !important;
}

@media (hover: hover) and (pointer: fine) {

  /* --- botones y píldoras: se elevan un pelo y ganan sombra --- */
  a[style*="border-radius:999px"],
  button:not([data-c]),
  a[style*="border-radius: 999px"] {
    transition: transform .22s cubic-bezier(.22,.61,.36,1),
                box-shadow .22s ease,
                filter .22s ease;
  }
  a[style*="border-radius:999px"]:hover,
  button:not([data-c]):hover {
    transform: translateY(-2px);
    filter: brightness(1.07);
  }
  a[style*="border-radius:999px"]:active,
  button:not([data-c]):active {
    transform: translateY(0) scale(.985);
    transition-duration: .09s;
  }

  /* --- tarjetas: la foto se acerca despacio dentro de su marco --- */
  a[style*="overflow:hidden"] img,
  a[style*="overflow: hidden"] img {
    transition: transform .6s cubic-bezier(.22,.61,.36,1);
    will-change: transform;
  }
  a[style*="overflow:hidden"]:hover img,
  a[style*="overflow: hidden"]:hover img {
    transform: scale(1.045);
  }
  a[style*="border-radius:24px"],
  a[style*="border-radius:22px"],
  a[style*="border-radius:20px"],
  a[style*="border-radius:18px"] {
    transition: transform .28s cubic-bezier(.22,.61,.36,1), box-shadow .28s ease;
  }
  a[style*="border-radius:24px"]:hover,
  a[style*="border-radius:22px"]:hover,
  a[style*="border-radius:20px"]:hover,
  a[style*="border-radius:18px"]:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 48px rgba(6,58,52,.22);
  }

  /* --- la flecha → de las tarjetas avanza al pasar por encima --- */
  a .dom-arrow, a span[style*="→"] { display: inline-block; }
  a:hover .dom-arrow { transform: translateX(5px); }
  .dom-arrow { transition: transform .24s cubic-bezier(.22,.61,.36,1); }

  /* --- enlaces de texto: el subrayado se dibuja de izquierda a derecha --- */
  footer a, nav a {
    position: relative;
    transition: color .2s ease;
  }
  footer a::after, nav a::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -3px;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .26s cubic-bezier(.22,.61,.36,1);
    opacity: .55;
  }
  footer a:hover::after, nav a:hover::after { transform: scaleX(1); }
}

/* --- steppers / botones circulares: crecen un 10% (diseño §6) --- */
@media (hover: hover) and (pointer: fine) {
  button[style*="border-radius:50%"] { transition: transform .2s ease; }
  button[style*="border-radius:50%"]:hover { transform: scale(1.1); }
}

/* Foco visible por teclado: la accesibilidad no se sacrifica por estética. */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid #a9ece2;
  outline-offset: 3px;
  border-radius: 6px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* CAP-15 (2026-10-15): las tarjetas de vivienda pintan la foto como background-image
   (no <img>), así que loading="lazy" no les llega y el móvil bajaba las 27 fotos al
   cargar (~5 MB). Con content-visibility el navegador no pinta ni descarga las que
   están fuera de pantalla hasta que se acercan; la altura reservada evita saltos.
   Misma foto y mismo tamaño (?width=1600 sigue igual). */
span:has(> span[role="img"][aria-label]) {
  content-visibility: auto;
  contain-intrinsic-size: auto 230px;
}


/* Lanzamiento mínimo (Victor 2026-10-16): DOM Coins no se enseña hasta que esté al 100 %.
   La página sigue existiendo (noindex, fuera del sitemap: .build/hide_unready.py); aquí se
   esconden sus enlaces, también los que monta el runtime del diseño. Para publicarla, borrar
   esta regla y quitarla de HIDDEN. */
/* Auditoría 2026-10-21: también «Get DOM Coins with every stay — join free» del buscador de la
   home y «Sign in and claim my Coins» de la confirmación, que llevan a my-cabinet.html. */
a[href$="dom-coins.html"], a[data-dom-coins-cta], a[href$="my-cabinet.html"] { display: none !important; }
/* Excepción (Victor 2026-11-01, opción B): SOLO el botón «Sign in to claim» de la tarjeta dorada
   de booking-confirmed vuelve a verse. El resto de enlaces al cabinet siguen ocultos. */
.card.coins a.coins-claim[href$="my-cabinet.html"] { display: flex !important; }

/* --- controles de formulario de marca (auditoría de diseño 2026-10-21) ---
 * 1. Botones y campos heredan la tipografía de la página: sin esto el navegador
 *    les pone Arial / la del sistema (rótulo HOLIDAYS del menú, «Elegir fecha» y
 *    los − / + de las excursiones). Un font-family en línea sigue mandando.
 * 2. En el móvil los campos van a 16 px: por debajo, Safari en iPhone hace zoom
 *    al tocar el campo y la página se queda ampliada.
 * 3. Desplegables y casillas sin el aspecto del sistema: flecha y casilla de marca.
 */
button, input, select, textarea { font-family: inherit; }
@media (max-width: 700px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]),
  select, textarea { font-size: 16px !important; }
}
select {
  -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23a9ece2' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 16px center !important;
  background-size: 12px 8px !important;
  padding-right: 42px !important;
}
input[type="checkbox"] {
  -webkit-appearance: none; appearance: none;
  flex: none; width: 20px; height: 20px; margin: 1px 0 0;
  border-radius: 6px; border: 1.5px solid #0d6e65; background: #fff;
  display: inline-grid; place-content: center; cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
input[type="checkbox"]::before {
  content: ""; width: 11px; height: 11px; transform: scale(0); transition: transform .12s ease;
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0, 43% 62%);
  background: #fff;
}
input[type="checkbox"]:checked { background: #0d6e65; border-color: #0d6e65; }
input[type="checkbox"]:checked::before { transform: scale(1); }

/* --- calendario del buscador de la home, estilo Airbnb (Victor 2026-10-21) ---
 * Móvil: un mes dentro de la tarjeta, 7 columnas que pueden encoger (nada se sale).
 * ≥ 768 px: ventana flotante bajo «Cuándo», dos meses, celdas de 42 px como máximo.
 * La plantilla la escribe .build/patch_home_calendar.py. */
#search { position: relative; z-index: 5; }  /* por encima de los iconos de confianza */
.dcal {
  position: relative; box-sizing: border-box; width: 100%;
  display: flex; flex-direction: column; gap: 12px;
  padding: 16px 14px 14px; border-radius: 22px;
  background: #063a34; border: 0.5px solid rgba(169,236,226,.35);
  box-shadow: 0 18px 44px rgba(3,30,27,.45); text-align: center;
}
.dcal-months { display: flex; gap: 32px; }
.dcal-month { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.dcal-second { display: none; }
.dcal-title { font-family: 'Playfair Display', serif; font-size: 16px; font-weight: 600; color: #fff; line-height: 38px; }
.dcal-dow, .dcal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px 0; }
.dcal-dow span { font-size: 10px; font-weight: 600; letter-spacing: .08em; color: #a9ece2; }
.dcal-grid button { min-height: 0 !important; }
.dcal-nav {
  position: absolute; top: 16px; width: 36px; height: 36px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; padding: 0;
  border: 0.5px solid rgba(169,236,226,.4); background: rgba(13,100,91,.25);
  color: #fff; font-size: 17px; cursor: pointer;
}
.dcal-prev { left: 14px; }
.dcal-next { right: 14px; }
.dcal-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding-top: 10px; border-top: 1px solid rgba(169,236,226,.15);
}
.dcal-hint { flex: 1 1 100%; order: -1; font-size: 12px; color: rgba(234,255,251,.8); text-align: left; }
.dcal-foot { flex-wrap: wrap; }
.dcal-clear {
  background: none; border: 0; padding: 6px 2px; color: #a9ece2; font-size: 13px; font-weight: 500;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.dcal-close {
  padding: 9px 22px; border-radius: 999px; border: 0.5px solid rgba(169,236,226,.7);
  background: #a9ece2; color: #063a34; font-size: 13px; font-weight: 500; cursor: pointer;
}
@media (min-width: 768px) {
  .dcal {
    position: absolute; left: 50%; transform: translateX(-50%); z-index: 70;
    width: min(740px, calc(100vw - 32px)); padding: 22px 26px 18px; margin-top: -4px;
  }
  .dcal-second { display: flex; }
  .dcal-nav { top: 22px; }
  .dcal-prev { left: 26px; }
  .dcal-next { right: 26px; }
  .dcal-hint { flex: 1 1 auto; order: 0; }
}
/* la insignia de Trustindex no tapa el calendario abierto */
body:has(.dcal) .ti-widget { display: none !important; }

/* --- «Dónde» de la home: cualquier lugar / sur / norte + zonas (Victor 2026-10-21) ---
 * La plantilla la escribe .build/patch_home_where.py. La segunda fila se abre con altura y
 * opacidad; se desliza con el dedo y, en escritorio, con flechas y bordes difuminados. */
.wz { display: flex; flex-direction: column; min-width: 0; }
.wz-seg { display: flex; gap: 6px; padding: 2px; }
.wz-row { position: relative; display: flex; align-items: center; min-width: 0; overflow: hidden;
  transition: max-height .28s ease, opacity .22s ease, margin-top .28s ease; }
.wz-track { display: flex; gap: 6px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none;
  -webkit-overflow-scrolling: touch; padding: 2px; min-width: 0; flex: 1 1 auto;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%); }
.wz-track::-webkit-scrollbar { display: none; }
.wz-arr { display: none; flex: none; width: 30px; height: 30px; border-radius: 50%; padding: 0;
  align-items: center; justify-content: center; border: 0.5px solid rgba(169,236,226,.45);
  background: rgba(6,58,52,.55); color: #eafffb; font-size: 16px; cursor: pointer; }
.wz-l { margin-right: 4px; }
.wz-r { margin-left: 4px; }
@media (hover: hover) and (pointer: fine) { .wz-arr { display: inline-flex; } }
.wz-pill:focus-visible, .wz-chip:focus-visible { outline: 2px solid #a9ece2; outline-offset: 2px; }

/* ===========================================================================
 * Escala de botones y desplegables (spec-holidays-ui-controls, Victor 2026-10-22, todo «A»).
 * Tres papeles, un solo sitio: principal/CTA 48 px, secundario 44 px, chip/stepper 36 px
 * visibles con 44 px de zona táctil; radio 999 px, peso 500, rótulo en una línea y
 * centrado. Las páginas llevan los estilos en línea (diseño + generadores), así que el
 * papel se asigna por lo que ya dicen esos estilos y se fuerza con !important.
 * `--btn-role` lo lee .build/ui_controls_selftest.py: si alguien cambia esto, el test lo ve.
 * Desplegables: radio 22 px y opciones de 44 px (--picker-*).
 * ======================================================================== */
:root {
  --btn-primary: 48px; --btn-secondary: 44px; --btn-chip: 36px; --btn-hit: 44px; --btn-radius: 999px;
  --picker-radius: 22px; --picker-option: 44px;
}

/* principal (por defecto): toda píldora de acción */
:is(a, button):is([style*="border-radius:999px"], [style*="border-radius: 999px"]):not([aria-expanded]):not([style*="flex-direction:column"]):not([style*="flex-direction: column"]):not([data-c]):not([style*="padding:10px 18px"]):not([style*="padding: 10px 18px"]):not([hreflang]):not(.wz-pill):not(.wz-chip):not(.dcal-close):not(.dcal-clear),
button:is([style*="min-height:54px"], [style*="min-height: 54px"]),
a.cta, #dom-book, #dom-bk-pay, #exc-go {
  --btn-role: primary; --btn-h: var(--btn-primary);
  box-sizing: border-box !important;
  height: var(--btn-h) !important; min-height: var(--btn-h) !important;
  padding-top: 0 !important; padding-bottom: 0 !important;
  border-radius: var(--btn-radius) !important;
  font-weight: 500 !important;
  white-space: nowrap;
}
/* el CTA de la ficha: su JS lo enseña con display:'' y se quedaba sin flex (texto a la izquierda) */
#dom-book, a.cta { display: flex; align-items: center; justify-content: center; text-align: center; }
a.cta { display: inline-flex; }

/* secundario */
:is(a, button):is([style*="min-height:44px"], [style*="min-height: 44px"], [style*="min-height:46px"], [style*="min-height: 46px"]),
#dom-bk-lockb, #dom-map-show, .wa-pill, button[data-c] {
  --btn-role: secondary; --btn-h: var(--btn-secondary);
  box-sizing: border-box !important;
  height: var(--btn-h) !important; min-height: var(--btn-h) !important;
  padding-top: 0 !important; padding-bottom: 0 !important;
  border-radius: var(--btn-radius) !important;
  font-weight: 500 !important; white-space: nowrap;
}

/* chip: zonas, filtros pequeños, idiomas, cerrar/borrar del calendario */
.wz-pill, .wz-chip, .dcal-close, .dcal-clear,
a:is([style*="padding:10px 18px"], [style*="padding: 10px 18px"]),
a[hreflang]:is([style*="padding:3px"], [style*="padding: 3px"]) {
  --btn-role: chip; --btn-h: var(--btn-chip);
  box-sizing: border-box !important;
  height: var(--btn-chip) !important; min-height: var(--btn-chip) !important;
  padding-top: 0 !important; padding-bottom: 0 !important;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 500 !important; white-space: nowrap;
}
.dcal-clear { padding-left: 8px !important; padding-right: 8px !important; border-radius: 999px; font-size: 14px !important; }
/* «Ya tengo una reserva» del cabinet: enlace-botón de texto → chip */
button[data-dom="claim-link"] { --btn-role: chip; box-sizing: border-box; min-height: var(--btn-chip); height: var(--btn-chip);
  padding: 0 10px !important; border-radius: 999px !important; font-weight: 500 !important; position: relative; }
button[data-dom="claim-link"]::after { content: ""; position: absolute; inset: -4px; }
/* idiomas del menú: 14 px y un poco más de aire (eran 10 px y 19 px de alto) */
a[hreflang]:is([style*="padding:3px"], [style*="padding: 3px"]) {
  font-size: 14px !important; padding-left: 12px !important; padding-right: 12px !important; border-radius: 999px;
  min-width: 44px; box-sizing: border-box;   /* sin solapar la zona táctil del vecino (van a 1 px) */
}
/* steppers y botones redondos: 36 px visibles (los de 44 px se quedan como están) */
button:is([style*="border-radius:50%"], [style*="border-radius: 50%"]):not([style*="width:44px"]):not([style*="width: 44px"]):not([style*="aspect-ratio"]),
.dcal-nav, .wz-arr {
  --btn-role: chip;
  box-sizing: border-box !important;
  width: var(--btn-chip) !important; height: var(--btn-chip) !important; min-height: var(--btn-chip) !important;
  font-weight: 500 !important;
}
/* zona táctil de 44 px alrededor de los 36 px visibles */
:is(.wz-pill, .wz-chip, .dcal-close, .dcal-clear,
    a:is([style*="padding:10px 18px"], [style*="padding: 10px 18px"]),
    a[hreflang]:is([style*="padding:3px"], [style*="padding: 3px"]),
    button:is([style*="border-radius:50%"], [style*="border-radius: 50%"]):not([style*="width:44px"]):not([style*="width: 44px"]):not([style*="aspect-ratio"])
   ):not([style*="position:"]):not([style*="position: "]) { position: relative; }
.wz-pill, .wz-chip { overflow: visible !important; }
:is(.wz-pill, .wz-chip, .dcal-close, .dcal-clear, .dcal-nav, .wz-arr,
    a:is([style*="padding:10px 18px"], [style*="padding: 10px 18px"]),
    a[hreflang]:is([style*="padding:3px"], [style*="padding: 3px"]),
    button:is([style*="border-radius:50%"], [style*="border-radius: 50%"]):not([style*="width:44px"]):not([style*="width: 44px"]):not([style*="aspect-ratio"])
   )::after { content: ""; position: absolute; inset: -4px; }

/* lista de opciones de la excursión: su pie «ver todas» llega a 44 px */
#exc-more { min-height: 44px; }
/* disparadores con forma de campo: nunca por debajo de 44 px */
#dom-when { min-height: 48px; }

/* pulsado en el móvil (el :hover de arriba solo existe con ratón) */
:is(button, [role="button"], a[style*="padding"], a.cta):active { filter: brightness(.9); transition-duration: .08s; }
/* `scale` (propiedad propia) se suma a cualquier transform de la hoja en vez de pisarlo */
:is(button, [role="button"], a[style*="padding"], a.cta):not([style*="transform"]):not([style*="translate"]):active { scale: .97; }
/* deshabilitado: se ve y no se pulsa */
button:disabled:not([style*="aspect-ratio"]):not(.dcal-grid button), [aria-disabled="true"] {
  opacity: .45 !important; cursor: not-allowed !important;
}
[aria-disabled="true"] { pointer-events: none !important; }

/* campos en píldora: texto y placeholder centrados */
input:is([style*="border-radius:999px"], [style*="border-radius: 999px"]) { text-align: center; }

/* desplegables: un solo radio */
#dom-nav-menu,
div[aria-hidden="true"] + div[style*="overflow-y"] {
  border-radius: var(--picker-radius) !important;
}
.dcal-grid button { font-size: 14px !important; }
.dcal-close, .dcal-close * { font-size: 14px !important; }
/* 360–380 px: los rótulos largos (DE/RU) caben en una línea con menos relleno lateral */
@media (max-width: 380px) {
  :is(a, button):is([style*="border-radius:999px"], [style*="border-radius: 999px"]):not([aria-expanded]):not([data-c]):not([style*="padding:10px 18px"]):not([style*="padding: 10px 18px"]):not([hreflang]):not(.wz-pill):not(.wz-chip):not(.dcal-close):not(.dcal-clear),
  #dom-book, #dom-bk-pay, #dom-bk-lockb, #exc-go, a.cta {
    padding-left: 14px !important; padding-right: 14px !important;
  }
  #dom-book { font-size: 14px !important; }
  /* «Alle Unterkünfte im Norden ansehen» en la tarjeta de la home (250 px de ancho) */
  :is(a[href*="?region="], a[href$="puerto-de-la-cruz.html"]):is([style*="border-radius:999px"], [style*="border-radius: 999px"]) { font-size: 12.5px !important; }
}

/* Listados: en el móvil «Filters» baja a su propia línea y el margin-left:auto del diseño
   lo pegaba al borde derecho. Ahí se alinea a la izquierda con el titular y las zonas
   (Victor 2026-10-22). En escritorio sigue a la derecha de la fila de zonas. */
@media (max-width: 700px) {
  button:has(> svg path[d="M3 5h18l-7 8v5l-4 2v-7z"]) { margin-left: 0 !important; }
}

/* Formularios en dos columnas (reserva del coche: vuelo, origen, fechas y horas): una
   columna 1fr no encoge por debajo del ancho propio del input y «Origin» se salía de la
   ventana; las fechas heredaban el espaciado de la etiqueta («A d d  a  d a t e») y las
   horas vacías salían más altas (Victor 2026-10-22). */
div:is([style*="grid-template-columns:1fr 1fr"], [style*="grid-template-columns: 1fr 1fr"]) > label { min-width: 0; }
div:is([style*="grid-template-columns:1fr 1fr"], [style*="grid-template-columns: 1fr 1fr"]) > label > :is(input, button, select, div) {
  width: 100%; min-width: 0; box-sizing: border-box;
  min-height: 46px; letter-spacing: normal; text-transform: none;
}
div:is([style*="grid-template-columns:1fr 1fr"], [style*="grid-template-columns: 1fr 1fr"]) > label > input[type="time"] { -webkit-appearance: none; appearance: none; line-height: 20px; }
/* Ninguna ventana fija se desliza de lado (Victor 2026-10-22: «this can't happen on any
   screen»): sin scroll horizontal y los nombres largos (fichero del billete) parten línea. */
:is([style*="position:fixed"][style*="overflow-y:auto"], [style*="position: fixed"][style*="overflow-y: auto"]) {
  overflow-x: hidden !important; overscroll-behavior-x: none;
}
:is([role="dialog"], [aria-modal="true"], [style*="position:fixed"][style*="overflow-y:auto"], [style*="position: fixed"][style*="overflow-y: auto"]) :is(span, strong, b, p, div) {
  overflow-wrap: anywhere;
}
div:is([style*="grid-template-columns:1fr 1fr"], [style*="grid-template-columns: 1fr 1fr"]) > label [role="button"] { min-height: 46px !important; box-sizing: border-box; letter-spacing: normal; text-transform: none; font-weight: 500; }

/* buscador del prefijo sobre el panel oscuro (Victor 2026-10-22: superficie única) */
[role="dialog"][style*="#063a34"] input[type="search"]::placeholder { color: rgba(234,255,251,.55); }

/* --- zonas seguras del iPhone (Dynamic Island, notch, indicador de inicio) ---
 * Victor 2026-11-01: la isla del iPhone tapaba la cabecera y la tarjeta «Booked».
 * Todas las páginas llevan viewport-fit=cover (inject_keyboard.py lo pone y lo comprueba),
 * y con eso Safari deja la página llegar al borde: lo que va fijo arriba/abajo se separa
 * de la zona segura aquí, en un solo sitio. Las variables --dom-sa* valen env() en el
 * iPhone y 0 en el resto; los tests de Playwright las fuerzan (Chromium no emula env()).
 * Horizontal: los fondos siguen a sangre; lo que se aparta del notch en apaisado es el
 * contenido. Casi todo va en contenedores width:min(Npx,92vw) (4 vw de margen = 34 px en un
 * iPhone apaisado, menos que el notch): su ancho máximo deja al menos la zona segura + 8 px
 * a cada lado. En vertical (zonas laterales 0) la regla da 92vw: no cambia nada. */
:root {
  --dom-sat: env(safe-area-inset-top, 0px);
  --dom-sab: env(safe-area-inset-bottom, 0px);
  --dom-sal: env(safe-area-inset-left, 0px);
  --dom-sar: env(safe-area-inset-right, 0px);
}
[style*="92vw"] {
  max-width: calc(100vw - 2 * max(4vw, var(--dom-sal) + 8px, var(--dom-sar) + 8px));
}
/* isla del menú: nav.py y NavBar.dc.html ya la bajan con calc(); esto cubre las páginas
   que aún lleven la isla antigua hasta que patch_nav_island / el refresco las rehaga */
:is(header[style^="position:fixed;top:10px"], div[style^="position: fixed; top: 10px; left: 0px; right: 0px; z-index: 50"]) {
  top: calc(10px + var(--dom-sat)) !important;
}
/* paneles de reserva pegajosos de ficha y excursión (top:110px bajo la isla) */
:is([style*="position:sticky;top:110px"], [style*="position: sticky; top: 110px"]) {
  top: calc(110px + var(--dom-sat)) !important;
}
/* ventanas centradas con max-height:92vh (alquiler de coche, cabinet) */
:is([style*="max-height:92vh"], [style*="max-height: 92vh"]) {
  max-height: calc(92vh - var(--dom-sat) - var(--dom-sab)) !important;
}
/* velo a pantalla completa de la ficha (#dom-md) y del cabinet: la caja no se mete bajo el notch */
#dom-md, #dom-coins-confirm {
  padding: max(20px, var(--dom-sat)) max(20px, var(--dom-sar)) max(20px, var(--dom-sab)) max(20px, var(--dom-sal)) !important;
}
/* cabecera de las guías (gen_guides.py): el texto baja con la isla */
.g-hero { padding-top: calc(64px + var(--dom-sat)) !important; }
/* cabeceras de las páginas del diseño (portada, cabinet, my-booking, coche…): el primer
   bloque baja lo mismo que la isla. Valores sacados de las páginas; uno nuevo no se cubre solo. */
:is([style*="padding:clamp(110px,16vw,140px)"], [style*="padding: clamp(110px, 16vw, 140px)"]) { padding-top: calc(clamp(110px, 16vw, 140px) + var(--dom-sat)) !important; }
:is([style*="padding:clamp(120px,16vw,150px)"], [style*="padding: clamp(120px, 16vw, 150px)"]) { padding-top: calc(clamp(120px, 16vw, 150px) + var(--dom-sat)) !important; }
:is([style*="padding:clamp(120px,16vw,180px)"], [style*="padding: clamp(120px, 16vw, 180px)"]) { padding-top: calc(clamp(120px, 16vw, 180px) + var(--dom-sat)) !important; }
:is([style*="padding:clamp(120px,18vw,150px)"], [style*="padding: clamp(120px, 18vw, 150px)"]) { padding-top: calc(clamp(120px, 18vw, 150px) + var(--dom-sat)) !important; }
:is([style*="padding:clamp(120px,18vw,160px)"], [style*="padding: clamp(120px, 18vw, 160px)"]) { padding-top: calc(clamp(120px, 18vw, 160px) + var(--dom-sat)) !important; }