/* Lo que la web necesita y Casa no tiene: menú, secciones, rejilla y pie. Todo lo
   demás (colores, tipografía, tarjetas, botones, prosa, modo oscuro) sale tal cual
   de estilo.css, que se copia de Casa al construir. Solo usa sus variables. */

.web-cabecera{margin-bottom:30px}
.web-cabecera .topbar{margin-bottom:12px}
.web-menu{display:flex;flex-wrap:wrap;gap:6px 22px;padding-bottom:14px;
  border-bottom:1px solid var(--linea);font-size:.95rem}
.web-menu a{color:var(--dim);text-decoration:none}
.web-menu{align-items:center}
.web-menu a:hover,.web-menu a:focus-visible{color:var(--azul)}
.web-menu a[aria-current]{color:var(--azul);font-weight:650}
.web-menu a.web-menu-reservar{margin-left:auto;padding:6px 14px;border-radius:999px;
  background:var(--azul-solido);color:#fff;font-weight:650}
.web-menu a.web-menu-reservar:hover,.web-menu a.web-menu-reservar:focus-visible{color:#fff}
.web-entrada{margin:-6px 0 22px}

.web-seccion{margin-top:44px}
.web-seccion .seccion-tit{margin-bottom:16px}
.web-seccion > .cta{max-width:320px;margin-left:auto;margin-right:auto}

.web-destacada-tit{font-size:2rem;line-height:1.1;margin:6px 0 8px;color:var(--tinta)}
.web-destacada-lema{margin:0 0 16px;font-size:1.1rem;line-height:1.45;color:var(--tinta)}
.web-reserva .cta{margin-top:14px}
.web-firma{margin:-8px 0 22px}

.web-ediciones{list-style:none;margin:0;padding:0}
.web-ediciones li{display:flex;gap:10px;align-items:baseline;margin:8px 0;font-size:.94rem;line-height:1.45}
/* Mismo tamaño que la fecha que acompaña, y sobre la misma línea base. */
.web-estado{flex:none;font-size:inherit;line-height:inherit;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--dim)}
.web-estado-abierta{color:var(--ok)}
.web-horario{color:var(--dim);font-size:.88rem}
.web-para{margin:10px 0 0;font-size:.94rem}
.prosa .web-ediciones{margin:14px 0}

.web-tres{display:grid;gap:22px;grid-template-columns:1fr}
@media (min-width:760px){.web-tres{grid-template-columns:repeat(3,minmax(0,1fr))}}
.web-dos{display:grid;gap:28px;grid-template-columns:1fr}
@media (min-width:760px){.web-dos{grid-template-columns:repeat(2,minmax(0,1fr))}}
.web-mentoria{display:flex;flex-direction:column}
.web-mentoria .web-ediciones{flex:1}
.web-mentoria-res{margin:12px 0 4px}
.web-tres .tarjeta-tit{font-size:1.4rem}
.web-mentoria .tarjeta{flex:none}

/* Reservar sin volver arriba: solo en móvil, y solo mientras se lee la ficha. */
.web-barra{position:sticky;bottom:0;z-index:5;display:flex;align-items:center;gap:14px;
  margin:24px -16px 0;padding:10px 16px;background:var(--fondo);border-top:1px solid var(--linea)}
.web-barra-dato{flex:none;display:flex;flex-direction:column;font-size:.8rem;color:var(--dim);line-height:1.25}
.web-barra-dato b{font-size:1.05rem;color:var(--tinta)}
.web-barra .cta{margin-top:0;padding-top:11px;padding-bottom:11px}
/* Al llegar al final, la barra ya es el botón de reservar: en móvil no se repite. */
@media (max-width:759.98px){.web-reserva-final{display:none}}
@media (min-width:760px){.web-barra{display:none}}

.web-pliegue{border-bottom:1px solid var(--linea);padding:4px 0}
.web-pliegue > summary{cursor:pointer;padding:12px 0;font-weight:650;font-size:1.05rem;color:var(--tinta)}
.web-pliegue > summary:hover{color:var(--azul)}
.web-pliegue > summary:focus-visible{outline:2px solid var(--azul);outline-offset:2px;border-radius:4px}

.web-video video{display:block;width:100%;max-height:70vh;border-radius:10px;background:#111}
.prosa .web-video{margin:18px 0}
.prosa .tarjetas{margin:20px 0}
.prosa pre{overflow-x:auto}
.web-mas{max-width:680px}

.web-pie{margin-top:56px}
.web-pie-suscribe{padding-top:22px;margin-bottom:48px}
.web-pie-tit{font-size:1.25rem;color:var(--tinta);margin:0}
.web-boton{max-width:260px;margin:18px auto 0}
.web-pie-enlaces{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 18px;margin-bottom:0}

/* La sombra que deja leer el título sobre la foto: en estilo.css, la foto va después en
   el documento y la tapa. Se manda la foto detrás sin tocar lo que viene de Casa. */
.tarjeta.con-imagen{isolation:isolate}
.tarjeta.con-imagen .tarjeta-img{z-index:-1}

.prosa .web-pie-foto{color:var(--dim);font-size:.88rem;margin-top:-6px}

/* Las tarjetas dentro de una página de texto: sin las reglas de .prosa para sus fotos. */
.prosa .tarjeta-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;margin:0;border-radius:0;max-width:none}
.prosa .web-mentoria a.cta,.prosa .web-mentoria a.tarjeta{text-decoration:none}