/* Maqueta F2 v4 · Tempo & Julieta. Estructura de Airbnb Experiencias (/experiences/112213), piel de Belmond VSOE, letra,
   logo y tokens de T&J (tempo-julieta/sitio/estilos.css). Las medidas de las referencias se bajaron con Playwright el
   4-nov (getComputedStyle a 1440 y 390): se citan como [A] Airbnb y [B] Belmond. Lo que es mío va marcado «mío». */

@font-face { font-family: 'EB Garamond'; font-style: normal; font-weight: 400; font-display: swap; src: url('fuentes/eb-garamond-400.woff2') format('woff2'); }
@font-face { font-family: 'EB Garamond'; font-style: italic; font-weight: 400; font-display: swap; src: url('fuentes/eb-garamond-400-italica.woff2') format('woff2'); }
@font-face { font-family: 'EB Garamond'; font-style: normal; font-weight: 500; font-display: swap; src: url('fuentes/eb-garamond-500.woff2') format('woff2'); }
@font-face { font-family: 'Jost'; font-style: normal; font-weight: 400; font-display: swap; src: url('fuentes/jost-400.woff2') format('woff2'); }
@font-face { font-family: 'Jost'; font-style: normal; font-weight: 500; font-display: swap; src: url('fuentes/jost-500.woff2') format('woff2'); }
@font-face { font-family: 'EB Garamond respaldo'; src: local('Georgia'); size-adjust: 85.24%; ascent-override: 118.14%; descent-override: 34.96%; line-gap-override: 0.00%; }
@font-face { font-family: 'Jost respaldo'; src: local('Arial'); size-adjust: 95.62%; ascent-override: 111.90%; descent-override: 39.22%; line-gap-override: 0.00%; }

:root {
  /* de T&J */
  --lienzo: #f8f7f5;        /* [B] usa rgb(244,244,242): el lienzo de T&J es el mismo papel tibio */
  --papel: #fff;
  --tinta: #15151a;
  --tinta-2: #5c5c66;       /* 6.17:1 sobre el lienzo */
  --linea: rgba(20, 20, 26, .1);
  --sombra: 16, 24, 40;
  --oro: #795616;           /* el oro profundo que Angel aprobó (F2-D8): botón y acento. 6.2:1 con el lienzo */
  /* piel de Belmond, medida */
  --arena: #c1a67f;         /* [B] rgb(193,166,127), el plano «Celebrations» */
  --azul: #29588c;          /* [B] rgb(41,88,140), plano «Accommodation» y pie */
  --sobre-azul: #fbfbfa;    /* [B] rgb(251,251,250), la letra sobre su azul */
  --apagado: #66666b;       /* [B] rgb(102,102,102), los nombres no activos del índice (5.4:1) */
  --serif: 'EB Garamond', 'EB Garamond respaldo', Georgia, serif;
  --sans: Jost, 'Jost respaldo', 'Helvetica Neue', Arial, sans-serif;
  --mov: .3s ease-out;      /* de T&J */
  /* [A] la ficha: contenedor de 1155, columna de 712, caja de 412, 31 entre ellas */
  --ancho: 1155px;
  --lado: 24px;             /* [A] 24 a 390 */
  --barra: 80px;
  font-size: 18px;
}
@media (max-width: 1199px) { :root { font-size: 16px; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--lienzo); color: var(--tinta); font-family: var(--sans); font-weight: 400; line-height: 1.5;
  font-variant-numeric: lining-nums; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; }
img { display: block; max-width: 100%; }
[id] { scroll-margin-top: calc(var(--barra) + 24px); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--oro); outline-offset: 3px; }
.contenedor { max-width: calc(var(--ancho) + 2 * var(--lado)); margin-inline: auto; padding-inline: var(--lado); }

/* ───────── botones ───────── */
/* [A] un solo botón de color, la única tinta: el rosa de Airbnb pasa al oro profundo aprobado. Radio [A] 30, alto 52 */
.boton { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 14px 24px; border-radius: 30px;
  background: var(--oro); color: var(--lienzo); text-decoration: none; font: 500 1rem/1.2 var(--sans); white-space: nowrap;
  transition: background-color var(--mov), transform var(--mov); }
.boton:hover { background: #5f430f; }
.boton.claro { background: var(--lienzo); color: var(--azul); }     /* sobre el plano azul: invertido (como la píldora de la v3) */
.boton.claro:hover { background: #fff; }
.boton.claro:focus-visible { outline-color: var(--sobre-azul); }
/* el .enlace de T&J (subrayado de 1 px que se encoge), con alto táctil */
.enlace { position: relative; display: inline-flex; align-items: center; min-height: 48px; text-decoration: none; font: 400 .95rem/1 var(--sans); letter-spacing: .02em; }
.enlace::after { content: ''; position: absolute; left: 0; bottom: 12px; height: 1px; width: 100%; background: currentColor; transform-origin: left; transition: transform var(--mov); }
.enlace:hover::after, .enlace:focus-visible::after { transform: scaleX(.15); }
.botones { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }

/* ───────── marca de foto provisional (no se publica; foto-plan.md dice qué toma la reemplaza) ───────── */
.foto { position: relative; overflow: hidden; background: #d9d4cb; }
.foto img { width: 100%; height: 100%; object-fit: cover; object-position: var(--encuadre, 50% 50%); }
.marca { position: absolute; left: 6px; top: 6px; padding: 3px 6px; border-radius: 4px; background: rgba(255, 255, 255, .92); color: var(--tinta);
  font: 500 10px/1.2 var(--sans); letter-spacing: .02em; pointer-events: none; }

/* ───────── §0 barra [A]: blanca, fija, con su sombra de 1 px ───────── */
.barra { position: sticky; top: 0; z-index: 1000; background: var(--papel); box-shadow: 0 1px 1px rgba(0, 0, 0, .08); }
.barra-in { max-width: calc(var(--ancho) + 2 * var(--lado)); margin-inline: auto; padding-inline: var(--lado); min-height: var(--barra);
  display: flex; align-items: center; gap: 32px; }
.casa { margin-right: auto; display: flex; }
.barra .logo { height: 46px; width: auto; }
.barra nav ul { display: flex; gap: 28px; }
.barra nav a { display: flex; align-items: center; min-height: 44px; font: 500 15px/1 var(--sans); text-decoration: none; }  /* [A] menú 14–15/18 500 */
.barra nav a:hover { color: var(--oro); }
.wa-barra { min-height: 44px; padding: 12px 22px; font-size: 15px; }
.tres-rayas, .velo { display: none; }

/* ───────── §1 la idea [A]: mosaico 2 × 2 (353 por foto, radios de afuera) + título a la derecha ───────── */
.idea { display: grid; grid-template-columns: minmax(0, 712fr) minmax(0, 412fr); gap: 31px; padding-top: 24px; align-items: center; }
.mosaico { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.mosaico .foto { aspect-ratio: 1; border-radius: 6px; }
/* [A] 36 en la esquina de afuera y 6 en las de adentro; el 36 baja al 26 de las fotos de T&J (mío: la marca ya tiene ese radio) */
.mosaico .foto:nth-child(1) { border-top-left-radius: 26px; }
.mosaico .foto:nth-child(2) { border-top-right-radius: 26px; }
.mosaico .foto:nth-child(3) { border-bottom-left-radius: 26px; }
.mosaico .foto:nth-child(4) { border-bottom-right-radius: 26px; }
/* el h1 de T&J (EB Garamond 400), al tamaño que cabe en la columna de 412 de [A] */
.titulo h1 { font: 400 clamp(2.1rem, 3.3vw, 2.65rem)/1.04 var(--serif); letter-spacing: -.01em; text-wrap: balance; }
.entrada { margin-top: 18px; font-size: 1rem; line-height: 1.55; color: var(--tinta-2); text-wrap: pretty; }   /* [A] la descripción en gris */
/* [B] «Step onto a legend»: las partes como viñetas con raya, 15/21 */
.partes { margin-top: 20px; display: grid; gap: 2px; }
.partes li { display: flex; align-items: baseline; gap: 12px; font: 400 .95rem/1.45 var(--sans); }
.partes li::before { content: ''; flex: none; width: 14px; height: 1px; background: var(--oro); transform: translateY(-4px); }
.titulo .botones { margin-top: 28px; }

/* ───────── la ficha [A]: columna de contenido + caja fija ───────── */
.ficha { display: grid; grid-template-columns: minmax(0, 712fr) minmax(0, 412fr); column-gap: 31px; padding-top: 48px; }
.ficha > .bloque, .cotizacion > .cabeza, .condiciones { grid-column: 1; }
.cotizacion { display: contents; }
/* [A] cada sección separada por un filete de 1 px y 48 de aire */
.bloque { padding-block: 48px; border-top: 1px solid var(--linea); }
.ficha > .bloque:first-child { border-top: 0; padding-top: 24px; }
/* la .cabeza de las hojas de T&J: h2 EB Garamond 500, subtítulo 1.05rem */
.cabeza { display: grid; gap: 8px; margin-bottom: 32px; }
.cabeza h2 { font: 500 clamp(1.75rem, 2.6vw, 2.2rem)/1.05 var(--serif); }
.cabeza p { font-size: 1.05rem; line-height: 1.45; color: var(--tinta-2); }
.nota-bloque { margin-top: 32px; font-size: .9rem; line-height: 1.55; color: var(--tinta-2); max-width: 34em; }

/* ───────── §2 los momentos, modo pasos [A] «Lo que harás»: miniatura 96 × 96 radio 16, texto a 24 ───────── */
.momentos { display: grid; gap: 28px; }
.momentos > li { display: grid; grid-template-columns: 96px minmax(0, 1fr); column-gap: 24px; align-items: start; }
.momentos h3 { grid-column: 2; font: 500 1.35rem/1.15 var(--serif); }      /* el .grupo h3 de T&J; [A] usa 14/18 */
.m-cuerpo { display: contents; }
.m-foto { grid-column: 1; grid-row: 1 / span 2; width: 96px; height: 96px; border-radius: 16px; }
.m-detalle { grid-column: 2; margin-top: 6px; }
.m-foto .marca { left: 4px; top: 4px; padding: 2px 4px; font-size: 8px; }
[data-momentos="indice"] .m-foto .marca { left: 6px; top: 6px; padding: 3px 6px; font-size: 10px; }
/* [A] la línea gris bajo el título: los servicios corridos, separados por «·» de CSS (mío: no es texto, es el separador) */
.servicios { display: flex; flex-wrap: wrap; color: var(--tinta-2); font-size: .95rem; line-height: 1.5; }
.servicios li:not(:last-child)::after { content: '·'; margin: 0 .45em; }
.nota-m { font: italic 400 1.1rem/1.3 var(--serif); margin-bottom: 4px; }
/* la etiqueta de los artistas: el .genero de T&J, en el oro aprobado */
.etiqueta { margin-top: 14px; font: 500 .7rem/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--oro); }
.artistas { margin-top: 6px; display: grid; gap: 2px; font-size: .95rem; line-height: 1.45; color: var(--tinta-2); }
.artistas b { font-weight: 500; color: var(--tinta); }

/* ───────── §2 modo índice [B]: nombres en serif de 30/32 a la izquierda, la foto del activo a la derecha ───────── */
[data-momentos="indice"] .momentos { grid-template-columns: minmax(0, 250px) minmax(0, 1fr); column-gap: 32px; row-gap: 0; align-items: start; }
[data-momentos="indice"] .momentos > li { display: contents; }
[data-momentos="indice"] .momentos h3 { grid-column: 1; font-size: 1.7rem; line-height: 1.2; }
[data-momentos="indice"] .momentos h3 button { all: unset; cursor: pointer; display: flex; align-items: center; min-height: 44px; padding: 2px 0; color: var(--apagado); transition: color var(--mov); }
[data-momentos="indice"] .momentos li.activo h3 button { color: var(--tinta); }
[data-momentos="indice"] .momentos h3 button:hover { color: var(--tinta); }
[data-momentos="indice"] .momentos h3 button:focus-visible { outline: 2px solid var(--oro); outline-offset: 2px; }
[data-momentos="indice"] .m-cuerpo { display: none; grid-column: 2; grid-row: 1 / span 6; }
[data-momentos="indice"] li.activo .m-cuerpo { display: block; }
[data-momentos="indice"] .m-foto { width: 100%; height: auto; aspect-ratio: 4 / 5; border-radius: 0; }   /* [B] foto 4:5 a sangre, sin radio */
[data-momentos="indice"] .m-detalle { margin-top: 14px; }
/* (la miniatura de los pasos usa la versión de 400; en el índice se pide la de 800 por srcset) */

/* ───────── §3 tipos [B]: el plano oro arena a todo el ancho, con la caja de [A] por encima ───────── */
.plano-arena { background: var(--arena); box-shadow: 0 0 0 100vmax var(--arena); clip-path: inset(0 -100vmax); border-top: 0; padding-block: 72px; }
.plano-arena .cabeza p { color: var(--tinta); }      /* sobre el arena solo la tinta pasa AA (tinta-2 da 2.8:1) */
.tipos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 18px; }
.tipos a { display: grid; gap: 10px; text-decoration: none; }
.tipos .foto { aspect-ratio: 5 / 4; }                 /* [B] 1.25 en sus piezas apaisadas, sin radio */
.tipos img { transition: transform .6s ease-out; }
.tipos a:hover img { transform: scale(1.03); }
/* [B] el pie bajo la foto; aquí el pie es el nombre del tipo (texto aprobado), en la serif de T&J a su h3 de 20/29 */
.tipos .pie { font: 400 1.3rem/1.2 var(--serif); text-underline-offset: 5px; }
.tipos a:hover .pie, .tipos a:focus-visible .pie { text-decoration: underline; text-decoration-thickness: 1px; }
.testimonio { margin-top: 40px; padding: 22px 24px; border: 1px dashed rgba(21, 21, 26, .45); max-width: 34em; }
.testimonio blockquote { font: italic 400 1.25rem/1.35 var(--serif); }
.testimonio figcaption { margin-top: 8px; font-size: .8rem; }

/* ───────── §4 cotización [A] «Qué debes saber»: casillas con ícono de 24 y 16 de aire ───────── */
.cotizacion > .cabeza { margin-bottom: 0; padding-bottom: 32px; border-top: 0; }
.condiciones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 40px; padding-bottom: 64px; }
.condiciones svg { display: block; width: 24px; height: 24px; fill: none; stroke: var(--tinta); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 14px; }
.condiciones dt { font: 500 1rem/1.3 var(--sans); }                  /* [A] h3 14/18 500 */
.condiciones dd { margin-top: 4px; font-size: .95rem; line-height: 1.5; color: var(--tinta-2); }

/* [A] la caja fija: blanca, radio 24, sombra 0 0 0 1px .02 + 0 8 24 .1, arranca a la altura del primer bloque y se queda */
.caja { grid-column: 2; grid-row: 1 / span 4; position: relative; z-index: 2; padding-top: 24px; }
.caja-in { position: sticky; top: calc(var(--barra) + 32px); background: var(--papel); border-radius: 24px; padding: 24px 24px 22px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .02), 0 8px 24px rgba(0, 0, 0, .1); }
.caja h3 { font: 500 1.45rem/1.1 var(--serif); margin-bottom: 14px; }          /* el .lado-tit de T&J */
.tabla { width: 100%; border-collapse: collapse; }
.tabla th { font: 500 .7rem/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-2); text-align: left; padding: 0 0 8px; }
.tabla th:last-child, .tabla td:last-child { text-align: right; }
/* airbnb-servicio-b: un renglón por menú con su precio; aquí un renglón por partida, filete de 1 px entre ellos */
.tabla td { padding: 11px 0; border-top: 1px solid var(--linea); font-size: .95rem; line-height: 1.35; vertical-align: top; }
.tabla td:last-child { padding-left: 12px; color: var(--tinta-2); }
.tabla .con-precio td { font-weight: 500; color: var(--tinta); }
.tabla .con-precio td:last-child { color: var(--oro); white-space: nowrap; }   /* [A] el «Desde $… por participante» en peso 500 */
.caja .nota { margin-top: 10px; font-size: .82rem; line-height: 1.45; color: var(--tinta-2); }

/* ───────── §5 contacto y §6 pie, en el plano azul de [B]; la tarjeta del anfitrión de [A] ───────── */
.plano-azul { background: var(--azul); color: var(--sobre-azul); margin-top: 24px; }
.contacto { display: grid; grid-template-columns: minmax(0, 712fr) minmax(0, 412fr); gap: 31px; padding-block: 80px 64px; align-items: center; }
.plano-azul .cabeza p { color: var(--sobre-azul); }
/* [A] «Conoce a los anfitriones»: tarjeta blanca de radio 24 con la foto redonda de 104 y el nombre debajo */
.anfitrion { background: var(--papel); color: var(--tinta); border-radius: 24px; padding: 28px; display: grid; justify-items: start; gap: 14px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .12); }
.anfitrion .foto { width: 104px; height: 104px; border-radius: 50%; }
.anfitrion .marca { left: 50%; top: auto; bottom: 8px; transform: translateX(-50%); }
.anfitrion .logo { height: 42px; width: auto; }
.anfitrion p { font-size: .95rem; line-height: 1.55; color: var(--tinta-2); }
.pie-final { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 32px; padding-block: 18px 32px;
  border-top: 1px solid rgba(251, 251, 250, .3); font-size: .8rem; line-height: 1.5; }
.pie-final .enlace { font-size: .85rem; }
.pie-final a:focus-visible, .contacto a:focus-visible { outline-color: var(--sobre-azul); }

/* ───────── tableta: la caja deja de ser columna ───────── */
@media (max-width: 1023px) {
  .idea, .ficha, .contacto { grid-template-columns: minmax(0, 1fr); }
  .idea { gap: 28px; }
  .caja { grid-column: 1; grid-row: auto; padding-top: 0; padding-bottom: 48px; }
  .caja-in { position: static; }
}

/* ───────── teléfono, 390 ───────── */
@media (max-width: 760px) {
  :root { --barra: 64px; }
  .barra-in { gap: 8px; padding-inline: 16px 8px; }
  .barra .logo { height: 40px; }
  /* [A] la barra inferior del teléfono: flota a 24 de los lados y 16 del fondo, radio 48, con la sombra de su cápsula.
     Aquí lleva solo el WhatsApp del menú (§0): el «Desde $…» de Airbnb no tiene renglón aprobado que lo repita */
  .wa-barra { position: fixed; left: 24px; right: 24px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 999;
    min-height: 56px; border-radius: 48px; font-size: 1rem;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .02), 0 6px 8px rgba(0, 0, 0, .08), 0 2px 18px rgba(0, 0, 0, .12); }
  .wa-barra { transition: transform var(--mov), visibility 0s; }
  .con-inicio .wa-barra { transform: translateY(140%); visibility: hidden; transition: transform var(--mov), visibility 0s linear .3s; }
  body { padding-bottom: 96px; }
  .plano-azul { margin-bottom: -96px; padding-bottom: 96px; }   /* el azul llega al fondo; el pie no queda tapado por la barra */
  /* el panel del menú (el de la v3) */
  .barra nav { position: fixed; top: 0; right: 0; bottom: 0; width: 75%; background: var(--papel); padding: 30px; z-index: 1002;
    transform: translateX(100%); visibility: hidden; transition: transform var(--mov), visibility 0s linear .3s; }
  .barra.abierta nav { transform: none; visibility: visible; transition: transform var(--mov), visibility 0s; }
  .barra nav ul { flex-direction: column; gap: 4px; }
  .barra nav a { font-size: 1.05rem; }
  .velo { position: fixed; inset: 0; background: rgba(0, 0, 0, .5); z-index: 1001; }
  .barra.abierta .velo { display: block; }
  .tres-rayas { display: grid; place-content: center; gap: 6px; width: 44px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; }
  .tres-rayas span { display: block; width: 26px; height: 2px; background: var(--tinta); }

  /* [A] a 390 el mosaico pasa a una foto a todo el ancho; aquí, las cuatro en fila con la siguiente asomando ([B] su carrusel) */
  .idea { padding-top: 16px; gap: 22px; }
  .mosaico { display: flex; gap: 6px; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(-1 * var(--lado)); padding-inline: var(--lado);
    scrollbar-width: none; overscroll-behavior-x: contain; }
  .mosaico::-webkit-scrollbar { display: none; }
  .mosaico .foto { flex: 0 0 82%; aspect-ratio: 1 / .82; border-radius: 6px; scroll-snap-align: center; }
  .mosaico .foto:nth-child(1) { border-radius: 20px 6px 6px 20px; }
  .mosaico .foto:nth-child(4) { border-radius: 6px 20px 20px 6px; }
  .titulo h1 { font-size: 2.05rem; }                    /* 32.8 px: [A] 26/30, [B] 35/36 */
  .entrada { margin-top: 14px; }
  .partes { margin-top: 16px; }
  .titulo .botones { margin-top: 22px; }

  .ficha { padding-top: 24px; }
  .bloque { padding-block: 40px; }
  .cabeza { margin-bottom: 24px; }
  .momentos > li { grid-template-columns: 80px minmax(0, 1fr); column-gap: 16px; }   /* [A] 80 × 80 a 390 */
  .m-foto { width: 80px; height: 80px; }
  .momentos h3 { font-size: 1.3rem; }

  /* [B] a 390 el índice pasa a carrusel de tarjetas de 302 (foto 4:5) con la siguiente asomando */
  [data-momentos="indice"] .momentos { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory;
    margin-inline: calc(-1 * var(--lado)); padding-inline: var(--lado); scrollbar-width: none; }
  [data-momentos="indice"] .momentos > li { display: flex; flex-direction: column; flex: 0 0 min(302px, 80vw); scroll-snap-align: start; }
  [data-momentos="indice"] .m-cuerpo, [data-momentos="indice"] li.activo .m-cuerpo { display: contents; }
  [data-momentos="indice"] .m-foto { order: -1; margin-bottom: 12px; }
  [data-momentos="indice"] .momentos h3 { font-size: 1.45rem; }
  [data-momentos="indice"] .momentos h3 button, [data-momentos="indice"] .momentos li.activo h3 button { color: var(--tinta); cursor: default; }

  .plano-arena { padding-block: 48px; }
  .tipos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 14px; }
  .tipos .pie { font-size: 1.15rem; }
  .condiciones { grid-template-columns: minmax(0, 1fr); gap: 22px; padding-bottom: 40px; }
  /* [A] a 390 el ícono va a la izquierda y el texto a 40 */
  .condiciones > div { position: relative; padding-left: 40px; }
  .condiciones svg { position: absolute; left: 0; top: 0; margin: 0; }
  .contacto { padding-block: 56px 40px; gap: 28px; }
  .anfitrion { padding: 22px; }
  .pie-final { flex-direction: column; align-items: flex-start; }
}

/* sitio: blanco táctil de 24 px en los enlaces de texto del pie (sonda «controles») */
footer a { display: inline-block; min-height: 24px; line-height: 24px; }