/* ============================================================
   Visítenos — el CSS de los mockups aprobados, tal cual (brief §0): visitenos.html para la
   portada y «Después del tour», visitenos-tour-cinco.html para el tour, visitenos-grupos-
   comunidad.html para Grupos y Comunidad, y visitenos-antes-de-subir.html para la ficha y el
   cierre. Solo se quitaron las barras de demostración. Lo que pide el build va aparte, al final.
   ============================================================ */
  :root{
    --paper:#EFEBE1; --paper2:#E6E1D4; --ink:#1B211C; --rule:#CFC8B8;
    --contour:#A3AD95; --moss:#1F4D3A; --moss-soft:rgba(31,77,58,.14); --copper:#B4632E;
    --font:"Montserrat",system-ui,-apple-system,"Segoe UI",sans-serif;
  }
  html{color-scheme:light}
  body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);-webkit-font-smoothing:antialiased}
  .wrap{padding-inline:clamp(16px,5vw,64px)}
  .eb{font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--moss);margin:0 0 12px}
  .btn{display:inline-block;font-size:12px;letter-spacing:.12em;text-transform:uppercase;padding:13px 20px;border:1px solid var(--moss);border-radius:2px;color:#fff;background:var(--moss);text-decoration:none}
  .btn.ghost{background:transparent;color:var(--moss)}
  h1,h2,h3{text-wrap:balance}

  /* VIS-00 */
  .hero{padding-block:64px 56px;display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:end}
  .hero h1{font-weight:300;font-size:clamp(34px,5.6vw,68px);margin:0;line-height:1;letter-spacing:-.015em}
  .hero h1 b{font-weight:800;display:block}
  .hero p{color:#3B423C;line-height:1.55;margin:18px 0 0;font-size:clamp(15px,1.6vw,18px);max-width:46ch}
  .hero .btn{margin-top:22px}
  .ph{border:1px dashed var(--rule);border-radius:3px;background:rgba(255,255,255,.4);display:flex;align-items:flex-end;padding:12px;
      font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);box-sizing:border-box;line-height:1.6}
  .hero .ph{height:46vh;min-height:260px}

  /* VIS-01 */

  /* VIS-02 · el tour en cinco momentos (mockups/visitenos-tour-cinco.html, 16.09.2026).
     Reemplaza el mapa guía: con él se fueron .route, .map, .stop(s), .fin, el SVG y js/tour.js. */
  .entrada{padding:clamp(56px,7vw,96px) var(--borde) clamp(28px,4vw,52px);
    display:grid;grid-template-columns:.42fr .58fr;gap:clamp(24px,5vw,64px);align-items:start;
    border-top:1px solid var(--rule)}
  .entrada .eti{font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--muted);
    line-height:1.9;margin:0 0 14px}
  .entrada h2{font-weight:300;font-size:clamp(28px,3.6vw,46px);line-height:1.08;margin:0 0 14px;
    letter-spacing:-.01em}
  .entrada h2 b{font-weight:800}
  .entrada p{color:var(--muted);line-height:1.6;font-size:17px;margin:0;max-width:46ch}
  .pasos{display:flex;gap:9px;margin-top:6px}
  .pasos i{width:7px;height:7px;border-radius:50%;background:var(--numero)}
  .pasos i:first-child{background:var(--khaki)}

  /* capítulos alternados, a sangre por el lado de la foto */
  .cap{display:grid;align-items:center;gap:clamp(20px,3.4vw,52px);margin-bottom:clamp(28px,3.4vw,44px)}
  .cap .ph{min-height:clamp(260px,30vw,420px);border:0;border-radius:0;background:var(--placa)}
  .cap .txt{padding:clamp(8px,2vw,34px) clamp(12px,2.6vw,44px)}
  .cap .num{font-weight:300;font-size:clamp(78px,9vw,140px);line-height:.78;color:var(--numero);
    letter-spacing:-.04em;margin:0 0 10px}
  .cap h3{font-weight:300;font-size:clamp(26px,3.1vw,40px);line-height:1.06;margin:0 0 12px;
    letter-spacing:-.01em}
  .cap h3 b{font-weight:800}
  .cap p{color:var(--muted);line-height:1.6;font-size:17px;margin:0;max-width:46ch}
  .cap.izq{grid-template-columns:60% 1fr;padding-left:clamp(16px,2.5vw,36px);padding-right:var(--borde)}
  .cap.der{grid-template-columns:36% 1fr;padding-right:clamp(16px,2.5vw,36px);padding-left:var(--borde)}
  .cap.der .txt{order:1}.cap.der .ph{order:2}

  /* 05 · a sangre, con el velo de izquierda a derecha */
  .final{position:relative;min-height:clamp(420px,46vw,620px);display:flex;align-items:center;
    margin-top:clamp(24px,3vw,40px);overflow:hidden;background:var(--placa)}
  .final .ph{position:absolute;inset:0;border:0;border-radius:0;background:var(--placa)}
  /* El velo va de izquierda a derecha, como el mockup, pero sostiene .66 hasta pasado el texto:
     medido sobre el peor caso (una foto blanca), AA pide .610 en texto normal y .475 en el
     grande, y el degradado del mockup llegaba a .426 en 1440 y a 0 en móvil. El bloque de texto
     se acota al 46 % para que el velo siempre lo cubra; si creciera, volvería a quedar fuera. */
  .final .velo{position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(90deg,rgba(27,33,28,.72) 0%,rgba(27,33,28,.72) 52%,
      rgba(27,33,28,.30) 72%,rgba(27,33,28,0) 88%)}
  .final .in{position:relative;padding:0 var(--borde);color:#fff;max-width:min(760px,46%)}
  .final .num{font-weight:300;font-size:clamp(78px,9vw,140px);line-height:.78;letter-spacing:-.04em;
    margin:0 0 10px;color:rgba(255,255,255,.5)}
  /* en blanco y no en beech: medido sobre foto blanca, el beech exige un velo de .80 —la foto
     quedaría apagada—; el blanco pasa AA con .72 y holgura (6,48:1) */
  .final .eb{color:#fff}
  .final h3{font-weight:300;font-size:clamp(26px,3.1vw,40px);line-height:1.06;margin:0 0 12px;
    letter-spacing:-.01em;color:#fff}
  .final h3 b{font-weight:800}
  .final p{color:rgba(255,255,255,.82);line-height:1.6;font-size:17px;margin:0;max-width:40ch}

  /* VIS-03 */
  .after{padding-block:32px 72px}
  .after h2{font-weight:300;font-size:clamp(28px,4vw,50px);margin:0;line-height:1.05}
  .after h2 b{font-weight:800}
  .after>p{max-width:56ch;line-height:1.6;color:#3B423C;margin:14px 0 0}
  .cards{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:36px}
  .card{background:#fff;border:1px solid var(--rule);border-radius:3px;overflow:hidden;display:flex;flex-direction:column}
  .card .ph{height:240px;border:0;border-radius:0;border-bottom:1px solid var(--rule)}
  .card .body{padding:22px 24px 26px}
  .logo{display:inline-block;font-size:10px;letter-spacing:.2em;text-transform:uppercase;border:1px dashed var(--rule);padding:8px 12px;color:var(--muted);margin-bottom:14px}
  .card h3{font-weight:800;font-size:clamp(22px,2.6vw,32px);margin:0;line-height:1.05}
  .card p{line-height:1.6;color:#3B423C;margin:12px 0 0;font-size:15px}
  /* (16.10.2026) «Conozca … ↗», al Instagram del negocio hermano */
  .card .conozca{margin-top:16px}
  .card .conozca a{color:var(--pino);font-weight:700;font-size:14px;letter-spacing:.02em;text-decoration:underline;text-underline-offset:3px}
  /* Las redes del negocio hermano (mockup «redes aliados», opción B, aprobado el 20.09.2026).
     Una sola fila: el rótulo, una línea fina que se come el sobrante y las dos placas a la
     derecha. Reemplaza a los dos enlaces de texto, que se partían en dos filas con las rayitas
     sueltas —el componente venía de un mockup con un solo enlace por tarjeta—.
     En celular la fila se mantiene: 42 px ya pasa el mínimo táctil, así que no hace falta la
     regla de objetivos táctiles del final de la hoja. */
  .redes{display:flex;align-items:center;gap:14px;margin-top:20px}
  .redes .rot{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
    white-space:nowrap}
  .redes .raya{flex:1 1 auto;height:1px;background:var(--rule);min-width:12px}
  .redes .placas{display:flex;gap:8px;flex:0 0 auto}
  .redes .placa{width:42px;height:42px;border-radius:2px;background:var(--pino);
    color:var(--paper);display:inline-flex;align-items:center;justify-content:center;
    text-decoration:none;transition:background .25s,transform .25s}
  .redes .placa:hover{background:var(--oliva);transform:translateY(-2px)}
  .redes .placa:focus-visible{outline:2px solid var(--pino);outline-offset:3px}
  .redes .ico-red{display:block}

  /* VIS-04 / 05 / 06 / 07 */
  .sec{padding-block:64px;border-top:1px solid var(--rule)}
  .sec h2{font-weight:300;font-size:clamp(28px,4vw,50px);margin:0;line-height:1.05}
  .sec h2 b{font-weight:800}
  .sec p{line-height:1.6;color:#3B423C;margin:14px 0 0;max-width:56ch;font-size:16px}
  .sec .btn{margin-top:22px}
  /* VIS-04 y VIS-05 (mockups/visitenos-grupos-comunidad.html, 16.09.2026) */
  .grupos{padding:clamp(56px,6.5vw,92px) var(--borde);border-top:1px solid var(--rule);
    display:grid;grid-template-columns:1fr 40%;gap:clamp(28px,5vw,72px);align-items:center}
  .grupos h2{font-weight:300;font-size:clamp(28px,3.4vw,44px);line-height:1.08;margin:0 0 16px;
    letter-spacing:-.01em}
  .grupos h2 b{font-weight:800}
  .grupos p{color:var(--muted);line-height:1.62;font-size:16.5px;margin:0 0 14px;max-width:48ch}
  .grupos .ph{min-height:clamp(300px,34vw,460px);height:100%;border:0;background:var(--placa)}
  .btn.solido{background:var(--pino);border-color:var(--pino);color:#fff;margin-top:10px}

  .comunidad{padding:clamp(56px,6.5vw,92px) var(--borde) clamp(48px,6vw,84px);
    border-top:1px solid var(--rule)}
  .com-top{display:grid;grid-template-columns:1fr auto;gap:28px;align-items:end;
    margin-bottom:clamp(24px,3vw,40px)}
  .com-top h2{font-weight:300;font-size:clamp(28px,3.4vw,44px);line-height:1.08;margin:0 0 10px;
    letter-spacing:-.01em}
  .com-top h2 b{font-weight:800}
  .com-top p{color:var(--muted);line-height:1.62;font-size:16.5px;margin:0;max-width:48ch}
  .com-top p + p{margin-top:12px}     /* (16.10.2026) ahora son tres párrafos */
  .mosaico{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,1.4vw,18px)}
  .mosaico .ph{aspect-ratio:1/1;border:0;background:var(--placa)}
  .mosaico .ancha{grid-column:span 2;aspect-ratio:2/1}
  .comunidad .pie{margin-top:22px;display:flex;flex-wrap:wrap;gap:8px 12px;align-items:baseline;
    border-top:1px solid var(--rule);padding-top:18px}
  .comunidad .pie strong{font-weight:800;font-size:15px}
  .comunidad .pie em{font-style:normal;color:var(--muted);font-size:15px}

  /* «Antes de subir» (VIS-06) y el cierre unificado: mockups/visitenos-antes-de-subir.html,
     aprobado el 16.09.2026. La rejilla de datos, el mapa embebido y el cierre anterior se
     retiraron con él. */
  .antes .cols{display:grid;grid-template-columns:1fr 400px;gap:72px;align-items:start}
  .antes .txt p.intro{font-size:17px;line-height:1.65;color:var(--muted);max-width:52ch;margin:0 0 14px}
  /* (16.10.2026) la introducción ahora son tres párrafos: el aire grande, solo después del último */
  .antes .txt p.intro:last-of-type{margin-bottom:40px}
  .antes .bloque{border-top:1.5px solid var(--rule);padding-top:18px;margin-bottom:30px}
  .antes .bloque.ultimo{margin-bottom:0}
  .antes .bloque h3{font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--muted);font-weight:600;margin:0 0 12px}
  .antes .bloque p{margin:0;font-size:16px;line-height:1.6;max-width:50ch}
  .antes .lista{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:8px 28px}
  .antes .lista li{font-size:16px;line-height:1.6;padding-left:16px;position:relative}
  /* el documento las escribe en minúscula dentro de una frase; aquí son lista */
  .antes .lista li::first-letter{text-transform:uppercase}
  .antes .lista li::before{content:"";position:absolute;left:0;top:12px;width:6px;height:1.5px;background:var(--khaki)}

  /* la tarjeta: pino con las curvas del sitio en beech, al 22 % y a tamaño fijo */
  .reserva{position:sticky;top:32px;overflow:hidden;background:var(--pino);--curvas:var(--beech);
           box-shadow:0 14px 40px rgba(26,31,28,.16);padding:32px 32px 30px}
  .reserva > *{position:relative;z-index:1}
  .reserva .curvas-oscuro{z-index:0;opacity:.22;--curvas-tam:1400px}
  .reserva .precio{display:flex;align-items:baseline;gap:10px;margin:0 0 4px}
  .reserva .precio b{font-weight:300;font-size:42px;letter-spacing:-.02em;line-height:1;color:#fff}
  /* .78 y no el .72 del mockup: sobre el trazo de la curva, .72 se queda en 4,33:1 (AA pide 4,5) */
  .reserva .precio span,.reserva .iva,.reserva .fila span,.reserva .nota-card,.reserva .cont{
    color:rgba(239,235,227,.78)}
  .reserva .iva{margin:0 0 22px;font-size:13px}
  /* (16.10.2026) «La experiencia» y el rótulo «Precio» sobre el precio grande; sin la línea del
     IVA, que pasó a ser fila, el precio deja su aire antes de las filas */
  .reserva .tarjeta-t{margin:0 0 18px;font-size:11px;letter-spacing:.24em;text-transform:uppercase;font-weight:700;color:rgba(239,235,227,.92)}  /* beech daba 4,30:1 sobre la curva */
  .reserva .tarifa-t{margin:0 0 6px;font-size:12px;letter-spacing:.06em;color:rgba(239,235,227,.78)}
  .reserva .precio + .filas{margin-top:22px}
  .reserva .filas{border-top:1px solid rgba(239,235,227,.24)}
  .reserva .fila{display:flex;justify-content:space-between;gap:20px;padding:13px 0;
                 border-bottom:1px solid rgba(239,235,227,.24);font-size:15px}
  .reserva .fila span{font-size:13px;letter-spacing:.04em}
  .reserva .fila b{font-weight:600;text-align:right;color:#fff}
  .reserva .btn{display:block;margin-top:24px;padding:17px 22px;background:var(--paper);
                border-color:var(--paper);color:var(--pino);letter-spacing:.2em;font-weight:600}
  .reserva .nota-card{margin:14px 0 0;font-size:12.5px;line-height:1.5;text-align:center}
  .reserva .cont{margin:16px 0 0;padding-top:14px;border-top:1px solid rgba(239,235,227,.24);
                 font-size:13px;text-align:center}

  /* cierre unificado: la frase de marca y «Cómo llegar» en una sola sección, centradas */
  .cierre{padding-block:96px 104px;border-top:1px solid var(--rule);text-align:center}
  .cierre .in{position:relative;z-index:1}
  .cierre h2{font-weight:300;font-size:clamp(30px,4.6vw,58px);margin:0;line-height:1}
  .cierre h2 b{font-weight:800;display:block}
  .cierre .raya{border:0;border-top:1px solid var(--rule);width:min(420px,60%);margin:72px auto}
  .cierre h3{font-weight:300;font-size:clamp(22px,2.8vw,34px);margin:0;line-height:1.1}
  .cierre h3 b{font-weight:800}
  .cierre .ruta{color:var(--muted);font-size:15px;letter-spacing:.04em;margin:16px 0 0}
  .cierre .btn{margin-top:22px}

  @media (max-width:980px){
    .antes .cols{grid-template-columns:1fr;gap:40px}
    .reserva{position:static;order:-1}
    .antes .lista{grid-template-columns:1fr}
  }

  @media (max-width:760px){
    .hero,.cards{grid-template-columns:1fr}
  }

  /* los dos mockups nuevos cortan a 900: una columna y la foto arriba de su texto */
  @media (max-width:900px){
    .entrada{grid-template-columns:1fr;gap:18px;padding-top:48px}
    .cap,.cap.izq,.cap.der{grid-template-columns:1fr;padding-inline:var(--borde);gap:16px}
    .cap.der .txt{order:2}.cap.der .ph{order:1}
    .cap .ph{min-height:0;aspect-ratio:4/3}
    .cap .txt{padding:0}
    .final{min-height:480px}
    /* el texto ocupa el ancho: un velo direccional lo dejaría sin fondo en la mitad derecha */
    .final .velo{background:rgba(27,33,28,.72)}
    .final .in{max-width:none}
    .grupos{grid-template-columns:1fr;gap:26px}
    .grupos > .ph{order:-1}            /* foto arriba, texto abajo, como el resto (16.10.2026) */
    .grupos .ph{min-height:0;aspect-ratio:4/3}
    .com-top{grid-template-columns:1fr;align-items:start}
    .mosaico{grid-template-columns:repeat(2,1fr)}
    .mosaico .ancha{grid-column:span 2}
  }

  /* pulido */
  .after{background:#FBFAF6;padding-top:56px}
  .card{transition:transform .35s,box-shadow .35s}
  .card:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(27,33,28,.08)}
  .sec{content-visibility:auto;contain-intrinsic-size:auto 600px}
  @media (prefers-reduced-motion:reduce){.card{transition:none}}

/* ================================================================
   Adaptación al build (brief §0), lo único que no viene del mockup.
   ================================================================ */

/* El mockup se aprobó dentro del marco de artifact de claude.ai, cuyo reset pone el cuerpo a
   14 px (y las imágenes a max-width:100%): todo lo que el mockup mide en ch o hereda, se mide así. */
body{font-size:14px}
img{max-width:100%}
/* (d) Espacios de foto F##: el código y la descripción van dentro del .ph del mockup; la foto,
   cuando llega, lo llena */
.ph{position:relative;overflow:hidden}
.ph > .media,.ph > .foto{position:absolute;inset:0}
.ph > .media{background:none;padding:30px 12px 12px;align-items:flex-start;justify-content:flex-start;text-align:left}
.ph > .media::after{text-align:left;max-width:none}
.ph:has(> .foto){border-style:solid}

/* (tonos, 16.09.2026) Los dos mockups nuevos traen dos grises propios: el número decorativo de
   cada capítulo y la placa de los espacios de foto.
   --oliva (20.09.2026): el hover de las placas de redes, del mockup «redes aliados» opción B. */
:root{--numero:#D8D2C4;--placa:#E3DED0;--oliva:#556327}


/* Logos de los negocios hermanos (F91, F93), 18.09.2026: el recuadro «Logo oficial» del mockup es
   un inline-block sin ancho propio y la foto dentro mide 100 % de él: medía 0 × 0 y no se veía.
   El logo va a un alto fijo y su ancho sale de su proporción, sin deformarse. */
.logo-marca{display:block;margin-bottom:14px;line-height:0}
.logo-marca .foto{display:inline-block;overflow:visible}
.logo-marca img{height:56px;width:auto;max-width:220px;object-fit:contain;object-position:left center}
@media (max-width:760px){.logo-marca img{height:48px;max-width:180px}}
/* el hueco del logo ocupa el mismo alto que el logo (56 / 48 px): sin esto, al llegar el logo la
   tarjeta crecía 25 px y su título y su texto bajaban (medido el 18.09.2026) */
.card .logo{box-sizing:border-box;height:56px;display:inline-flex;align-items:center}
@media (max-width:760px){.card .logo{height:48px}}

/* objetivos táctiles de esta página (ver cedral.css, 18.09.2026). Las redes de las tarjetas ya
   no están acá: sus placas miden 42 px, que pasa el mínimo, y la fila es igual en celular. */

/* (09.10.2026) Fundidos entre bloques (mecánica en cedral.css): la foto de la última parada
   aparece desde el papel y se va en el papel, entera dentro de su bloque. «after» es una tarjeta
   del ancho del contenido: aparece y se va en el papel por su propio fondo (si la foto se fuera
   en su blanco, a los costados de la tarjeta quedaba un borde nuevo). */
.final{--funde-entra:var(--paper);--funde-sale:var(--paper);--funde-entra-alto:var(--funde);
  --funde-sale-alto:var(--funde);--funde-z:1}
.final .in{z-index:2}
.after{background:linear-gradient(180deg,var(--paper),#FBFAF6 56px,#FBFAF6 calc(100% - 56px),var(--paper))}