@font-face { font-family: "Newsreader"; src: url("fonts/newsreader.woff2") format("woff2"); font-weight: 400 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("fonts/newsreader-italic.woff2") format("woff2"); font-weight: 400 600; font-style: italic; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("fonts/figtree.woff2") format("woff2"); font-weight: 400 900; font-style: normal; font-display: swap; }

:root {
  --serif: "Newsreader", Georgia, serif;
  --sans: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --titulos: var(--serif);
  --radio: 14px;
  --caja: 1120px;
}
.estilo-robusto { --titulos: var(--sans); --radio: 6px; }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--fondo); color: var(--tinta); font-family: var(--sans); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-family: var(--titulos); font-weight: 500; line-height: 1.08; letter-spacing: -.015em; }
.estilo-robusto h1, .estilo-robusto h2 { font-weight: 850; letter-spacing: -.03em; text-transform: uppercase; }
p { margin: 0 0 1em; }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; }
section[id], main[id] { scroll-margin-top: 80px; }

.caja { max-width: var(--caja); margin: 0 auto; padding: 0 24px; }
@media (max-width: 600px) { .caja { padding: 0 16px; } }

/* Aviso de ejemplo */
.demo-aviso { background: #111; color: #eee; font-size: 13px; display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; padding: 8px 16px; text-align: center; }
.demo-aviso a { color: #ffd27a; font-weight: 700; text-decoration: none; }
.demo-toast { position: fixed; left: 50%; bottom: 90px; transform: translateX(-50%); background: #111; color: #fff; padding: 12px 18px; border-radius: 10px; font-size: 14px; z-index: 80; max-width: calc(100% - 32px); text-align: center; box-shadow: 0 10px 30px rgba(0,0,0,.25); }

/* Cabecera */
.cabecera { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--fondo) 94%, transparent); backdrop-filter: blur(6px); border-bottom: 1px solid color-mix(in srgb, var(--tinta) 12%, transparent); }
.cabecera-fila { display: flex; align-items: center; gap: 28px; height: 70px; }
.marca { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--titulos); font-size: 22px; font-weight: 600; white-space: nowrap; }
.estilo-robusto .marca { font-weight: 850; letter-spacing: -.02em; text-transform: uppercase; font-size: 19px; }
.marca-sello { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--primario); color: var(--sobre-primario); font-family: var(--sans); font-size: 14px; font-weight: 800; letter-spacing: .02em; }
.estilo-robusto .marca-sello { border-radius: 6px; background: var(--acento); color: #111; }
.menu { display: flex; gap: 22px; margin-left: auto; font-size: 15px; }
.menu a { text-decoration: none; opacity: .8; }
.menu a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 860px) { .menu { display: none; } .cabecera .boton-peq { margin-left: auto; } }
@media (max-width: 420px) { .cabecera .boton-peq { display: none; } }

/* Botones */
.boton { display: inline-flex; align-items: center; gap: 9px; background: var(--primario); color: var(--sobre-primario); text-decoration: none; font-weight: 700; font-size: 16px; padding: 14px 22px; border-radius: 999px; border: 2px solid var(--primario); transition: background .15s, transform .15s; }
.estilo-robusto .boton { border-radius: var(--radio); text-transform: uppercase; font-size: 14px; letter-spacing: .04em; }
.boton:hover { background: var(--primario-osc); border-color: var(--primario-osc); }
.boton:active { transform: translateY(1px); }
.boton svg { width: 18px; height: 18px; fill: currentColor; flex: none; }
.boton-linea { background: transparent; color: var(--tinta); border-color: color-mix(in srgb, var(--tinta) 30%, transparent); }
.boton-linea:hover { background: color-mix(in srgb, var(--tinta) 6%, transparent); border-color: var(--tinta); }
.boton-peq { padding: 9px 16px; font-size: 14px; }
.boton-invertido { background: var(--fondo); color: var(--tinta); border-color: var(--fondo); }
.boton-invertido:hover { background: #fff; border-color: #fff; }
.acciones { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 18px; }
.acciones-columna { flex-direction: column; align-items: stretch; }
.acciones-columna .boton { justify-content: center; }

.etiqueta { font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--primario); margin-bottom: 14px; }
.estilo-robusto .etiqueta { color: var(--tinta); display: inline-block; background: var(--acento); padding: 3px 8px; border-radius: 3px; }

/* Portada */
.portada { padding: 64px 0 72px; }
.portada-rejilla { display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: center; }
.portada h1 { font-size: clamp(40px, 6vw, 72px); margin-bottom: 22px; }
.portada h1 em { color: var(--primario); }
.estilo-robusto .portada h1 em { font-style: normal; background: var(--acento); color: #111; padding: 0 .12em; }
.entradilla { font-size: 19px; color: var(--suave); max-width: 50ch; }
.valoracion { font-size: 15px; color: var(--suave); }
.valoracion strong { color: var(--tinta); }
.estrellas { color: #e2a21b; letter-spacing: 1px; }
.nota { font-size: 12px; opacity: .7; }
.portada-foto { position: relative; aspect-ratio: 4 / 5; border-radius: calc(var(--radio) * 2); overflow: visible; }
.foto-portada { width: 100%; height: 100%; object-fit: cover; border-radius: calc(var(--radio) * 2); }
.portada-foto.sin-foto { display: grid; place-items: center; background: var(--primario); color: color-mix(in srgb, var(--sobre-primario) 85%, transparent); }
.portada-foto.sin-foto > span { font-family: var(--titulos); font-size: 140px; font-style: italic; }
.sello-horario { position: absolute; left: -22px; bottom: 28px; background: var(--fondo); color: var(--tinta); border-radius: 12px; padding: 12px 16px; box-shadow: 0 14px 34px rgba(0,0,0,.14); display: flex; flex-direction: column; font-size: 14px; line-height: 1.3; }
.sello-horario strong { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--primario); }
.estilo-robusto .portada { background: var(--tinta); color: var(--fondo); }
.estilo-robusto .portada .entradilla, .estilo-robusto .portada .valoracion { color: color-mix(in srgb, var(--fondo) 75%, transparent); }
.estilo-robusto .portada .valoracion strong { color: var(--fondo); }
.estilo-robusto .portada .boton { background: var(--acento); border-color: var(--acento); color: #111; }
.estilo-robusto .portada .boton-linea { background: transparent; color: var(--fondo); border-color: color-mix(in srgb, var(--fondo) 40%, transparent); }
.estilo-robusto .portada .etiqueta { background: transparent; color: var(--acento); padding: 0; }
@media (max-width: 860px) {
  .portada { padding: 36px 0 48px; }
  .portada-rejilla { grid-template-columns: 1fr; gap: 36px; }
  .portada-foto { aspect-ratio: 4 / 3; }
  .sello-horario { left: 12px; bottom: 12px; }
}

/* Ventajas */
.ventajas { border-block: 1px solid color-mix(in srgb, var(--tinta) 12%, transparent); }
.ventajas-rejilla { display: grid; grid-template-columns: repeat(3, 1fr); }
.ventaja { padding: 26px 24px 22px 0; }
.ventaja + .ventaja { padding-left: 24px; border-left: 1px solid color-mix(in srgb, var(--tinta) 12%, transparent); }
.ventaja strong { display: block; font-size: 17px; margin-bottom: 4px; }
.ventaja p { margin: 0; color: var(--suave); font-size: 15px; }
@media (max-width: 760px) {
  .ventajas-rejilla { grid-template-columns: 1fr; }
  .ventaja, .ventaja + .ventaja { padding: 18px 0; border-left: 0; }
  .ventaja + .ventaja { border-top: 1px solid color-mix(in srgb, var(--tinta) 12%, transparent); }
}

/* Secciones */
.seccion { padding: 88px 0; }
.seccion h2 { font-size: clamp(32px, 4.4vw, 50px); margin-bottom: 36px; max-width: 18ch; }
.seccion-suave { background: var(--fondo-2); }
@media (max-width: 700px) { .seccion { padding: 60px 0; } }

/* Carta de servicios */
.carta { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px 56px; }
.carta-grupo h3 { font-size: 24px; padding-bottom: 10px; margin-bottom: 6px; border-bottom: 2px solid var(--tinta); }
.estilo-robusto .carta-grupo h3 { font-weight: 800; text-transform: uppercase; font-size: 18px; letter-spacing: .02em; }
.carta-grupo ul { list-style: none; margin: 0 0 18px; padding: 0; }
.carta-grupo li { display: flex; align-items: baseline; gap: 10px; padding: 12px 0; border-bottom: 1px solid color-mix(in srgb, var(--tinta) 10%, transparent); }
.carta-nombre { display: flex; flex-direction: column; font-weight: 600; }
.carta-nombre small { font-weight: 400; color: var(--suave); font-size: 14px; }
.carta-puntos { flex: 1; border-bottom: 1px dotted color-mix(in srgb, var(--tinta) 35%, transparent); transform: translateY(-4px); min-width: 20px; }
.carta-precio { font-weight: 700; white-space: nowrap; color: var(--primario); }
.estilo-robusto .carta-precio { color: var(--tinta); }
.nota-precios { color: var(--suave); font-size: 14px; margin-top: 10px; }
@media (max-width: 760px) { .carta { grid-template-columns: 1fr; } }

/* Galería */
.galeria { padding-bottom: 88px; }
.galeria-rejilla { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 14px; }
.foto-galeria { width: 100%; height: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radio); }
.galeria-rejilla .foto-galeria:first-child { grid-row: span 2; aspect-ratio: auto; }
@media (max-width: 700px) { .galeria-rejilla { grid-template-columns: 1fr 1fr; } .galeria-rejilla .foto-galeria:first-child { grid-column: span 2; grid-row: auto; aspect-ratio: 4 / 3; } }

/* Horario y contacto */
.dos-columnas { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.horario { width: 100%; border-collapse: collapse; font-size: 17px; }
.horario th, .horario td { text-align: left; padding: 13px 0; border-bottom: 1px solid color-mix(in srgb, var(--tinta) 12%, transparent); }
.horario th { font-weight: 600; }
.horario td { text-align: right; font-variant-numeric: tabular-nums; }
.horario td.cerrado { color: var(--suave); }
.tarjeta-contacto { background: var(--fondo); border-radius: calc(var(--radio) * 1.5); padding: 32px; box-shadow: 0 1px 0 color-mix(in srgb, var(--tinta) 10%, transparent); }
.tarjeta-contacto h2 { font-size: 30px; margin-bottom: 12px; }
.tarjeta-contacto p { color: var(--suave); }
@media (max-width: 860px) { .dos-columnas { grid-template-columns: 1fr; gap: 36px; } .tarjeta-contacto { padding: 24px 20px; } }

/* Preguntas */
.preguntas details { border-top: 1px solid var(--tinta); }
.preguntas details:last-child { border-bottom: 1px solid var(--tinta); }
.preguntas summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 16px; padding: 18px 0; font-weight: 600; font-size: 17px; }
.preguntas summary::-webkit-details-marker { display: none; }
.preguntas summary::after { content: "+"; color: var(--primario); font-size: 24px; line-height: .8; }
.preguntas details[open] summary::after { content: "–"; }
.preguntas details p { color: var(--suave); padding-bottom: 18px; margin: 0; }

/* Llamada final */
.final { background: var(--primario); color: var(--sobre-primario); padding: 64px 0; }
.estilo-robusto .final { background: var(--acento); color: #111; }
.estilo-robusto .final .boton-invertido { background: #111; color: #fff; border-color: #111; }
.final-fila { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.final h2 { font-size: clamp(30px, 4vw, 46px); max-width: 20ch; }

/* Pie */
.pie { padding: 36px 0 110px; font-size: 14px; color: var(--suave); }
.pie-fila { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; align-items: center; }
.pie strong { color: var(--tinta); }
.firma a { font-weight: 700; }
@media (min-width: 861px) { .pie { padding-bottom: 40px; } }

/* Barra fija en móvil */
.barra-movil { display: none; }
@media (max-width: 860px) {
  .barra-movil { display: grid; grid-template-columns: repeat(3, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; background: var(--fondo); border-top: 1px solid color-mix(in srgb, var(--tinta) 15%, transparent); padding: 8px 8px calc(8px + env(safe-area-inset-bottom)); }
  .barra-movil a { display: flex; flex-direction: column; align-items: center; gap: 3px; text-decoration: none; font-size: 12px; font-weight: 700; padding: 6px 0; border-radius: 10px; }
  .barra-movil a:first-child { background: var(--primario); color: var(--sobre-primario); }
  .estilo-robusto .barra-movil a:first-child { background: var(--acento); color: #111; }
  .barra-movil svg { width: 20px; height: 20px; fill: currentColor; }
}
.estilo-robusto .portada-foto.sin-foto {
  background:
    repeating-linear-gradient(-45deg, #111 0 18px, transparent 18px 36px) bottom / 100% 34px no-repeat,
    var(--acento);
  color: #111;
}
.estilo-robusto .portada-foto.sin-foto > span { font-family: var(--sans); font-style: normal; font-weight: 900; letter-spacing: -.04em; }