/* Barbería El Tito — estilos de la web */

@font-face { font-family: "Playfair Display"; font-weight: 700; font-style: normal; font-display: swap; src: url("/fonts/PlayfairDisplay-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Playfair Display"; font-weight: 400; font-style: italic; font-display: swap; src: url("/fonts/PlayfairDisplay-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Lato"; font-weight: 400; font-style: normal; font-display: swap; src: url("/fonts/Lato-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Lato"; font-weight: 700; font-style: normal; font-display: swap; src: url("/fonts/Lato-700-normal.woff2") format("woff2"); }

:root {
  --marfil: #F0ECE3;
  --marfil-2: #E7E1D4;
  --azul: #253F58;
  --azul-2: #1B3045;
  --granate: #783B42;
  --ocre: #B38140;
  --verde: #4E6B4F;
  --carbon: #30302C;
  --gris: #5E5D57;
  --whatsapp: #1F8F4E;
  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --sans: "Lato", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ancho: 1080px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--marfil); color: var(--carbon); font-family: var(--sans); font-size: 17px; line-height: 1.6; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--azul); }
h1, h2, h3 { font-family: var(--serif); color: var(--azul); line-height: 1.15; margin: 0 0 .5em; }
h2 { font-size: clamp(1.8rem, 4vw, 2.5rem); }
h3 { font-size: 1.25rem; }
.cursiva { font-family: var(--serif); font-style: italic; font-weight: 400; }
.envoltura { max-width: var(--ancho); margin: 0 auto; padding: 0 20px; }
.seccion { padding: 72px 0; scroll-margin-top: 82px; }
.seccion--oscura { background: var(--azul); color: var(--marfil); }
.seccion--oscura h2, .seccion--oscura h3 { color: var(--marfil); }
.seccion--oscura a { color: var(--marfil); }
.seccion--clara { background: var(--marfil-2); }
.antetitulo { font-size: .8rem; letter-spacing: .18em; text-transform: uppercase; color: var(--granate); font-weight: 700; margin: 0 0 .6em; }
.seccion--oscura .antetitulo { color: #D9B27A; }
.entradilla { font-size: 1.1rem; color: var(--gris); max-width: 640px; }
.seccion--oscura .entradilla { color: #D6DDE4; }

/* Franja de azulejos, inspirada en la pared del local */
.azulejos {
  height: 14px;
  background:
    linear-gradient(90deg,
      var(--granate) 0 12.5%, var(--ocre) 0 25%, var(--azul) 0 37.5%, var(--verde) 0 50%,
      var(--ocre) 0 62.5%, var(--granate) 0 75%, var(--verde) 0 87.5%, var(--azul) 0 100%);
  background-size: 320px 100%;
}

/* Cabecera */
.cabecera { position: sticky; top: 0; z-index: 20; background: rgba(240, 236, 227, .96); backdrop-filter: blur(6px); border-bottom: 1px solid rgba(37, 63, 88, .12); }
.cabecera .envoltura { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 76px; }
.marca { display: flex; align-items: center; text-decoration: none; }
.marca__logo { height: 62px; width: auto; }
.marca__logo--pie { height: 84px; }
.menu { display: flex; align-items: center; gap: 22px; }
.menu a { text-decoration: none; font-size: .95rem; color: var(--carbon); }
.menu a:hover { color: var(--granate); }
.idioma { font-weight: 700; border: 1px solid rgba(37, 63, 88, .3); border-radius: 999px; padding: 4px 12px; }
@media (max-width: 820px) { .menu .opcional { display: none; } }

/* Botones */
.botones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.boton { display: inline-flex; align-items: center; gap: 10px; padding: 14px 24px; border-radius: 999px; font-weight: 700; text-decoration: none; font-size: 1rem; transition: transform .15s ease, box-shadow .15s ease; }
.boton:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0, 0, 0, .12); }
.boton svg { width: 20px; height: 20px; flex: none; }
.boton--whatsapp { background: var(--whatsapp); color: #fff; }
.boton--principal { background: var(--azul); color: var(--marfil); }
.boton--borde { border: 1.5px solid var(--azul); color: var(--azul); }
.seccion--oscura .boton--borde { border-color: var(--marfil); color: var(--marfil); }

/* Portada */
.portada { padding: 56px 0 72px; }
.portada .envoltura { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; }
.portada__logo { width: 190px; margin-bottom: 28px; }
.portada h1 { font-size: clamp(2.3rem, 5.4vw, 3.6rem); }
.portada .detalles { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: .95rem; color: var(--gris); }
.portada .detalles strong { color: var(--carbon); }
.portada__foto { position: relative; }
.portada__foto img { border-radius: 6px; box-shadow: 0 24px 48px rgba(37, 63, 88, .22); aspect-ratio: 4 / 5; object-fit: cover; width: 100%; }
.portada__foto::before { content: ""; position: absolute; inset: -14px 14px 14px -14px; border: 2px solid var(--ocre); border-radius: 6px; z-index: -1; }
@media (max-width: 820px) {
  .portada .envoltura { grid-template-columns: 1fr; gap: 36px; }
  .portada__foto { max-width: 440px; }
}

/* Servicios */
.carta { margin-top: 36px; display: grid; grid-template-columns: 1fr 1fr; gap: 0 56px; }
.servicio { display: grid; grid-template-columns: 1fr auto; gap: 2px 16px; padding: 18px 0; border-bottom: 1px dashed rgba(37, 63, 88, .25); }
.servicio h3 { margin: 0; font-size: 1.15rem; }
.servicio .precio { font-family: var(--serif); font-weight: 700; font-size: 1.3rem; color: var(--granate); }
.servicio .duracion { grid-column: 1 / -1; font-size: .82rem; font-weight: 700; letter-spacing: .04em; color: var(--azul); opacity: .75; }
.servicio p { grid-column: 1 / -1; margin: 0; color: var(--gris); font-size: .95rem; }
.premium { display: inline-block; vertical-align: middle; margin-left: 6px; background: var(--ocre); color: #fff; font-family: var(--sans); font-size: .62rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; }
.carta__nota { margin-top: 26px; font-size: .92rem; color: var(--gris); }
.sello-lavado { display: inline-block; margin-top: 30px; padding: 10px 18px; border: 1.5px solid var(--ocre); border-radius: 4px; color: var(--azul); font-weight: 700; }
@media (max-width: 720px) { .carta { grid-template-columns: 1fr; } }

/* Historia */
.historia .envoltura { display: grid; grid-template-columns: .8fr 1.2fr; gap: 56px; align-items: center; }
.historia__foto { margin: 0; max-width: 380px; justify-self: center; }
.historia__foto img { width: 100%; border-radius: 6px; box-shadow: 0 0 0 8px rgba(240, 236, 227, .12), 0 20px 40px rgba(0, 0, 0, .3); }
.historia__foto figcaption { margin-top: 14px; font-family: var(--serif); font-style: italic; color: #E9DCC6; text-align: center; }
.historia blockquote { margin: 26px 0 0; padding-left: 20px; border-left: 3px solid var(--ocre); font-family: var(--serif); font-style: italic; font-size: 1.2rem; color: #E9DCC6; }
@media (max-width: 820px) {
  .historia .envoltura { grid-template-columns: 1fr; gap: 32px; }
  .historia__foto { max-width: 320px; justify-self: start; }
}

/* Trabajos */
.galeria { margin-top: 32px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.galeria img { border-radius: 4px; aspect-ratio: 4 / 5; object-fit: cover; width: 100%; }
.galeria .hueco { border-radius: 4px; aspect-ratio: 4 / 5; display: grid; place-items: center; text-align: center; padding: 20px; background: var(--marfil-2); border: 1.5px dashed rgba(37, 63, 88, .3); color: var(--gris); font-size: .95rem; }
@media (max-width: 720px) { .galeria { grid-template-columns: 1fr 1fr; } }

/* Opiniones */
.opiniones { text-align: center; }
.opiniones .entradilla { margin: 0 auto; }
.estrellas { color: var(--ocre); font-size: 1.6rem; letter-spacing: .1em; }

/* Horario y ubicación */
.visita { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.horario { width: 100%; border-collapse: collapse; margin-top: 10px; }
.horario th, .horario td { text-align: left; padding: 11px 0; border-bottom: 1px solid rgba(37, 63, 88, .15); font-weight: 400; }
.horario th { font-weight: 700; color: var(--azul); }
.horario td { text-align: right; }
.horario .cerrado { color: var(--gris); }
.direccion { font-size: 1.15rem; margin: 10px 0 0; }
@media (max-width: 720px) { .visita { grid-template-columns: 1fr; } }

/* Preguntas frecuentes */
.preguntas { margin-top: 28px; max-width: 760px; }
.preguntas details { border-bottom: 1px solid rgba(37, 63, 88, .18); padding: 16px 0; }
.preguntas summary { cursor: pointer; font-weight: 700; color: var(--azul); list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.preguntas summary::-webkit-details-marker { display: none; }
.preguntas summary::after { content: "+"; font-size: 1.3rem; line-height: 1; color: var(--granate); }
.preguntas details[open] summary::after { content: "–"; }
.preguntas details p { margin: 10px 0 0; color: var(--gris); }

/* Zonas */
.zonas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; padding: 0; list-style: none; }
.zonas li { border: 1px solid rgba(37, 63, 88, .25); border-radius: 999px; padding: 6px 14px; font-size: .92rem; }

/* Pie */
.pie { background: var(--azul-2); color: #C9D2DB; padding: 44px 0 170px; font-size: .92rem; }
.pie .envoltura { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px; }
.pie a { color: #E9EEF2; }


.pie nav { display: flex; flex-wrap: wrap; gap: 16px; }

/* Botón flotante de WhatsApp (sobre todo para el móvil) */
.flotante { position: fixed; right: 18px; bottom: 84px; z-index: 30; width: 60px; height: 60px; border-radius: 50%; background: var(--whatsapp); color: #fff; display: grid; place-items: center; box-shadow: 0 8px 22px rgba(0, 0, 0, .25); }
.flotante svg { width: 30px; height: 30px; }

/* Páginas de texto (aviso legal) */
.texto-legal { max-width: 760px; padding: 56px 20px 80px; margin: 0 auto; }
.texto-legal h1 { font-size: 2.2rem; }
.texto-legal h2 { font-size: 1.4rem; margin-top: 1.8em; }

:focus-visible { outline: 3px solid var(--ocre); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .boton { transition: none; } }

/* Bonos */
.bonos__lista { margin-top: 36px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.bono { position: relative; background: #FBF9F4; border: 1px solid rgba(37, 63, 88, .15); border-top: 4px solid var(--azul); border-radius: 6px; padding: 26px 20px 22px; display: flex; flex-direction: column; gap: 8px; }
.bono p { margin: 0; }
.bono__tipo { font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--granate); }
.bono__precio { font-family: var(--serif); font-weight: 700; font-size: 2.4rem; color: var(--azul); line-height: 1; }
.bono__precio span { font-family: var(--sans); font-weight: 400; font-size: .95rem; color: var(--gris); margin-left: 4px; }
.bono__detalle { color: var(--carbon); flex: 1; }
.bono__ahorro { font-size: .88rem; font-weight: 700; color: var(--verde); }
.bono--destacado { border-top-color: var(--ocre); box-shadow: 0 14px 30px rgba(37, 63, 88, .14); }
.bono__etiqueta { position: absolute; top: -13px; left: 20px; background: var(--ocre); color: #fff; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; }
.bonos__pasos { margin-top: 44px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.bonos__pasos h3 { margin: 10px 0 4px; }
.bonos__pasos p { margin: 0; color: var(--gris); }
.bonos__num { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--azul); color: var(--marfil); font-family: var(--serif); font-weight: 700; }
.bonos__condiciones { margin-top: 40px; border: 1px solid rgba(37, 63, 88, .2); border-radius: 6px; padding: 16px 20px; background: #FBF9F4; max-width: 860px; }
.bonos__condiciones summary { cursor: pointer; font-weight: 700; color: var(--azul); }
.bonos__condiciones ul { margin: 14px 0 0; padding-left: 20px; color: var(--carbon); }
.bonos__condiciones li { margin-bottom: 10px; }
@media (max-width: 960px) { .bonos__lista { grid-template-columns: 1fr 1fr; } }
@media (max-width: 720px) { .bonos__pasos { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .bonos__lista { grid-template-columns: 1fr; } }

/* ───────── Dinamismo (nov 2026): mismo diseño, con más vida ───────── */

/* Fondo: papel con un grano muy suave y una luz cálida arriba */
body {
  background-color: var(--marfil);
  background-image:
    radial-gradient(ellipse at 80% -10%, rgba(179, 129, 64, .10), transparent 55%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
}
.seccion--clara { background-color: rgba(231, 225, 212, .7); }

/* La franja de azulejos se desliza despacio */
.azulejos { animation: azulejos 30s linear infinite; }
@keyframes azulejos { to { background-position: 320px 0; } }

/* Cabecera: sombra al bajar */
.cabecera { transition: box-shadow .3s ease, background .3s ease; }
.cabecera--scroll { background: rgba(240, 236, 227, .98); box-shadow: 0 8px 24px rgba(37, 63, 88, .10); }
.menu a:not(.idioma):not(.menu__bonos) { position: relative; }
.menu a:not(.idioma):not(.menu__bonos)::after { content: ""; position: absolute; left: 0; right: 0; bottom: -5px; height: 2px; background: var(--ocre); transform: scaleX(0); transform-origin: left; transition: transform .25s ease; }
.menu a:not(.idioma):not(.menu__bonos):hover::after { transform: scaleX(1); }
.menu .menu__bonos { font-weight: 700; color: var(--azul); border: 1.5px solid var(--ocre); border-radius: 999px; padding: 5px 14px; transition: background .2s ease, color .2s ease; }
.menu .menu__bonos:hover, .menu .menu__bonos[aria-current="page"] { background: var(--ocre); color: #fff; }
.menu .menu__reservar { font-weight: 700; color: var(--marfil); background: var(--azul); border-radius: 999px; padding: 6px 15px; transition: background .2s ease, transform .2s ease; }
.menu .menu__reservar:hover { background: var(--azul-2); color: var(--marfil); transform: translateY(-1px); }
@media (max-width: 420px) { .menu { gap: 10px; } .menu .menu__bonos, .menu .menu__reservar { padding: 5px 11px; font-size: .88rem; } .marca__logo { height: 48px; } }

/* Botones: más cuerpo, brillo que los cruza y flecha que avanza */
.boton { position: relative; overflow: hidden; letter-spacing: .02em; transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease, opacity .2s ease; }
.boton::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .35), transparent); transform: skewX(-20deg); transition: left .6s ease; pointer-events: none; }
.boton:hover { transform: translateY(-2px); }
.boton:hover::after { left: 130%; }
.boton:active { transform: translateY(0) scale(.98); }
.boton--whatsapp { background: linear-gradient(135deg, #25A85C, var(--whatsapp)); box-shadow: 0 6px 18px rgba(31, 143, 78, .28); }
.boton--whatsapp:hover { box-shadow: 0 10px 26px rgba(31, 143, 78, .38); }
.boton--principal { box-shadow: 0 6px 18px rgba(37, 63, 88, .22); }
.boton--principal:hover { background: var(--azul-2); box-shadow: 0 10px 26px rgba(37, 63, 88, .3); }
.boton--borde:hover { background: var(--azul); color: var(--marfil); }
.boton .flecha { transition: transform .2s ease; }
.boton:hover .flecha { transform: translateX(4px); }
.boton--apagado { opacity: .45; filter: grayscale(.6); cursor: not-allowed; }
.boton--apagado:hover { transform: none; }

/* Entrada de la portada al cargar */
.portada .envoltura > div:first-child > * { animation: entrar .9s cubic-bezier(.2, .7, .2, 1) both; }
.portada .envoltura > div:first-child > :nth-child(2) { animation-delay: .1s; }
.portada .envoltura > div:first-child > :nth-child(3) { animation-delay: .2s; }
.portada .envoltura > div:first-child > :nth-child(4) { animation-delay: .3s; }
.portada .envoltura > div:first-child > :nth-child(5) { animation-delay: .4s; }
.portada .envoltura > div:first-child > :nth-child(6) { animation-delay: .5s; }
@keyframes entrar { from { opacity: 0; transform: translateY(24px); } }
.portada__foto img { transition: transform .6s ease, box-shadow .6s ease; }
.portada__foto:hover img { transform: translate(-4px, -4px); box-shadow: 0 30px 56px rgba(37, 63, 88, .28); }
.portada__foto::before { transition: inset .6s ease; }
.portada__foto:hover::before { inset: -20px 20px 20px -20px; }

/* Aparición al explorar (solo con JavaScript; sin él, todo se ve normal) */
.js .revelar { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); transition-delay: var(--retraso, 0s); }
.js .revelar.visible { opacity: 1; transform: none; }
.js .revelar-img { opacity: 0; transform: translateY(40px) scale(.94); transition: opacity .9s ease, transform .9s cubic-bezier(.2, .7, .2, 1); transition-delay: var(--retraso, 0s); }
.js .revelar-img.visible { opacity: 1; transform: none; }
.js .historia__foto.revelar-img { transform: translateX(-40px) rotate(-3deg); }
.js .historia__foto.revelar-img.visible { transform: none; }
.js .portada__foto.revelar-img { transform: translateX(40px) scale(.96); }
.js .portada__foto.revelar-img.visible { transform: none; }

/* Pequeños detalles al pasar el ratón */
.servicio { transition: opacity .7s ease, transform .7s ease, background .25s ease, padding .25s ease; border-radius: 4px; }
.servicio:hover { background: rgba(255, 255, 255, .55); padding-left: 10px; padding-right: 10px; }
.js .galeria img.revelar-img.visible:hover { transform: scale(1.03); box-shadow: 0 18px 36px rgba(37, 63, 88, .2); transition-delay: 0s; }
.bono { transition: opacity .7s ease, transform .4s ease, box-shadow .3s ease; }
.bono.visible:hover { transform: translateY(-6px); box-shadow: 0 20px 40px rgba(37, 63, 88, .16); transition-delay: 0s; }
.zonas li { transition: opacity .7s ease, transform .7s ease, background .2s ease, color .2s ease; }
.zonas li:hover { background: var(--azul); color: var(--marfil); }
.preguntas summary::after { transition: transform .3s ease; }
.preguntas details[open] summary::after { content: "+"; transform: rotate(45deg); }

/* Botón flotante con onda */
.flotante::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--whatsapp); animation: onda 2.4s ease-out infinite; }
.flotante { transition: transform .2s ease; }
.flotante:hover { transform: scale(1.08); }
@keyframes onda { from { transform: scale(1); opacity: .8; } to { transform: scale(1.7); opacity: 0; } }

/* Aviso en la sección de bonos de la portada */
.bonos__aviso { margin: 30px 0 0; max-width: 760px; padding: 14px 18px; border-left: 3px solid var(--ocre); background: rgba(179, 129, 64, .08); border-radius: 0 6px 6px 0; }

/* Página de bonos */
.bonos h1 { font-size: clamp(2.2rem, 5vw, 3.3rem); max-width: 820px; }
.bono .boton { margin-top: 10px; padding: 10px 18px; font-size: .92rem; }
.bono--elegido { outline: 3px solid var(--ocre); outline-offset: 2px; }
.normas { margin: 28px 0 0; padding: 0; list-style: none; counter-reset: norma; display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; }
.norma { counter-increment: norma; position: relative; padding: 16px 0 16px 46px; border-bottom: 1px dashed rgba(37, 63, 88, .25); }
.norma::before { content: counter(norma); position: absolute; left: 0; top: 16px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--azul); color: var(--marfil); font-family: var(--serif); font-weight: 700; font-size: .9rem; }
.norma h3 { font-size: 1.05rem; margin: 0 0 .2em; }
.norma p { margin: 0; color: var(--gris); font-size: .97rem; }
.contratar { margin-top: 40px; background: #FBF9F4; border: 1px solid rgba(37, 63, 88, .15); border-top: 4px solid var(--ocre); border-radius: 6px; padding: 28px; max-width: 760px; }
.contratar h3 { margin-bottom: .4em; }
.contratar__elegido { font-weight: 700; color: var(--azul); margin: 0 0 14px; }
.contratar label { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; font-size: 1rem; }
.contratar input[type="checkbox"] { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--azul); flex: none; }
.contratar .botones { margin-top: 20px; }
.contratar--aviso { animation: sacudir .4s ease; border-color: var(--granate); }
.contratar--aviso label { color: var(--granate); }
@keyframes sacudir { 25% { transform: translateX(-6px); } 50% { transform: translateX(6px); } 75% { transform: translateX(-3px); } }
@media (max-width: 760px) { .normas { grid-template-columns: 1fr; } .contratar { padding: 22px 18px; } }

/* Charlas de barbería (blog) */
.seccion--papel { background-color: #FBF9F4; }
.entradas { margin-top: 36px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.entrada { display: flex; flex-direction: column; background: #FBF9F4; border: 1px solid rgba(37, 63, 88, .12); border-radius: 6px; overflow: hidden; text-decoration: none; color: inherit; transition: opacity .7s ease, transform .4s ease, box-shadow .3s ease; }
.seccion--papel .entrada { background: var(--marfil); }
.entrada.visible:hover { transform: translateY(-5px); box-shadow: 0 18px 36px rgba(37, 63, 88, .14); transition-delay: 0s; }
.entrada__foto { aspect-ratio: 16 / 10; overflow: hidden; background: var(--marfil-2); }
.entrada__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.entrada:hover .entrada__foto img { transform: scale(1.05); }
.entrada__cuerpo { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.entrada__meta { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--granate); }
.entrada__meta time { color: var(--gris); font-weight: 400; letter-spacing: .04em; text-transform: none; }
.entrada h3 { margin: 0; font-size: 1.3rem; }
.entrada p { margin: 0; color: var(--gris); font-size: .97rem; flex: 1; }
.entrada__mas { font-weight: 700; color: var(--azul); font-size: .92rem; }
.entrada__mas::after { content: " →"; transition: margin .2s ease; }
.entrada:hover .entrada__mas::after { margin-left: 4px; }
.entrada--aviso { border-top: 4px solid var(--ocre); }
.filtros { display: none; }
.js .filtros { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.filtro { font: inherit; font-size: .92rem; font-weight: 700; cursor: pointer; border: 1.5px solid rgba(37, 63, 88, .3); background: transparent; color: var(--azul); border-radius: 999px; padding: 7px 16px; transition: background .2s ease, color .2s ease, border-color .2s ease; }
.filtro:hover { border-color: var(--azul); }
.filtro[aria-pressed="true"] { background: var(--azul); border-color: var(--azul); color: var(--marfil); }
.entrada[hidden] { display: none; }
.tablon { margin-top: 30px; max-width: 760px; padding: 16px 20px; border-left: 3px solid var(--ocre); background: rgba(179, 129, 64, .08); border-radius: 0 6px 6px 0; }
.tablon strong { color: var(--azul); }
@media (max-width: 960px) { .entradas { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .entradas { grid-template-columns: 1fr; } }

/* Artículo */
.articulo { max-width: 740px; margin: 0 auto; padding: 56px 20px 40px; }
.migas-blog { font-size: .9rem; color: var(--gris); margin-bottom: 22px; }
.migas-blog a { color: var(--gris); }
.articulo h1 { font-size: clamp(2rem, 5vw, 2.9rem); margin-top: 6px; }
.articulo__entradilla { font-size: 1.2rem; color: var(--gris); margin: 0 0 28px; }
.articulo__foto { margin: 0 0 32px; }
.articulo__foto img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 6px; box-shadow: 0 18px 40px rgba(37, 63, 88, .15); }
.articulo h2 { font-size: 1.6rem; margin-top: 1.8em; }
.articulo p, .articulo li { font-size: 1.06rem; line-height: 1.75; }
.articulo ul, .articulo ol { padding-left: 22px; }
.articulo li { margin-bottom: 8px; }
.articulo__firma { margin-top: 36px; font-family: var(--serif); font-style: italic; color: var(--azul); font-size: 1.1rem; }
.recuadro { margin: 30px 0; padding: 22px 24px; background: #FBF9F4; border: 1px solid rgba(37, 63, 88, .15); border-top: 4px solid var(--azul); border-radius: 6px; }
.recuadro h3 { margin-top: 0; }
.recuadro p { margin: 0; }
.recuadro .botones { margin-top: 16px; }
.mas-charlas { border-top: 1px solid rgba(37, 63, 88, .15); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .revelar, .js .revelar-img { opacity: 1; transform: none; }
}

/* ---------- Club El Tito (lista de correo) ---------- */
.club__rejilla { display: grid; grid-template-columns: 1.15fr .85fr; gap: 56px; align-items: start; }
.club h1 { font-size: clamp(2.1rem, 4.6vw, 3.1rem); }
.club__subtitulo { font-size: 1.35rem; margin-top: 34px; }
.club__ventajas { list-style: none; padding: 0; margin: 0; }
.club__ventajas li { position: relative; padding: 10px 0 10px 30px; border-bottom: 1px dashed rgba(37, 63, 88, .2); }
.club__ventajas li::before { content: ""; position: absolute; left: 4px; top: 19px; width: 10px; height: 10px; background: var(--ocre); transform: rotate(45deg); }
.club__filtro p { color: var(--gris); margin: 0; }
.club__form { position: sticky; top: 100px; background: #FBF9F4; border: 1px solid rgba(37, 63, 88, .15); border-top: 4px solid var(--ocre); border-radius: 6px; padding: 28px 24px; box-shadow: 0 14px 30px rgba(37, 63, 88, .12); display: flex; flex-direction: column; gap: 6px; }
.club__form h2 { font-size: 1.7rem; margin-bottom: 8px; }
.club__form label { font-weight: 700; font-size: .92rem; color: var(--azul); margin-top: 8px; }
.club__form input[type="text"], .club__form input[type="email"], .club__form select { font: inherit; font-size: 1rem; padding: 12px 14px; border: 1.5px solid rgba(37, 63, 88, .3); border-radius: 6px; background: #fff; color: var(--carbon); width: 100%; }
.club__form input:focus, .club__form select:focus { outline: none; border-color: var(--ocre); box-shadow: 0 0 0 3px rgba(179, 129, 64, .25); }
.opcional-txt { font-weight: 400; color: var(--gris); }
.club__permiso { display: flex; gap: 10px; align-items: flex-start; font-weight: 400 !important; color: var(--carbon) !important; font-size: .86rem !important; line-height: 1.45; margin-top: 14px !important; }
.club__permiso input { margin-top: 3px; width: 18px; height: 18px; flex: none; accent-color: var(--azul); }
.club__form .boton { justify-content: center; margin-top: 14px; border: 0; cursor: pointer; font-family: inherit; }
.club__letra { font-size: .8rem; color: var(--gris); margin: 10px 0 0; }
.club__respuesta { margin: 10px 0 0; padding: 12px 14px; border-radius: 6px; background: rgba(78, 107, 79, .12); color: var(--verde); font-weight: 700; font-size: .92rem; }
.club__respuesta--error { background: rgba(120, 59, 66, .1); color: var(--granate); }
.club__trampa { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.club__pd { max-width: 760px; margin: 0; font-family: var(--serif); font-style: italic; font-size: 1.25rem; color: var(--azul); }
.club__pd strong { font-style: normal; color: var(--granate); }
@media (max-width: 820px) { .club__rejilla { grid-template-columns: 1fr; gap: 36px; } .club__form { position: static; } }

/* Invitación al club al final de otras páginas */
.invitacion-club { background: var(--azul); color: var(--marfil); }
.invitacion-club .envoltura { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 32px; }
.invitacion-club h2 { color: var(--marfil); font-size: clamp(1.5rem, 3vw, 2rem); margin: 0 0 6px; }
.invitacion-club p { margin: 0; color: #D6DDE4; max-width: 560px; }
.invitacion-club .boton { background: var(--ocre); color: #fff; box-shadow: 0 6px 18px rgba(0, 0, 0, .2); }

/* ---------- La web como app ---------- */
.instalar-app { font: inherit; font-size: inherit; color: #E9EEF2; background: none; border: 1px solid rgba(233, 238, 242, .45); border-radius: 999px; padding: 3px 12px 3px 10px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.instalar-app::before { content: ""; width: 9px; height: 14px; border: 1.5px solid currentColor; border-radius: 2px; }
.instalar-app:hover { background: rgba(233, 238, 242, .12); }
.instalar-app[hidden] { display: none; }
.pie > .envoltura > .instalar-app { align-self: center; }

.aviso-app { display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: #FBF9F4; border-bottom: 1px solid rgba(37, 63, 88, .15); box-shadow: 0 6px 16px rgba(37, 63, 88, .08); }
.aviso-app img { width: 36px; height: 36px; border-radius: 9px; flex: none; box-shadow: 0 1px 4px rgba(0, 0, 0, .15); }
.aviso-app p { margin: 0; flex: 1; font-size: .92rem; font-weight: 700; color: var(--azul); line-height: 1.25; }
.aviso-app__si { font: inherit; font-size: .88rem; font-weight: 700; color: var(--marfil); background: var(--azul); border: 0; border-radius: 999px; padding: 7px 14px; cursor: pointer; }
.aviso-app__no { font: inherit; font-size: 1.4rem; line-height: 1; color: var(--gris); background: none; border: 0; padding: 2px 6px; cursor: pointer; }

.dialogo-app { max-width: 380px; width: calc(100% - 32px); border: 0; border-top: 4px solid var(--ocre); border-radius: 10px; padding: 26px 22px 22px; background: var(--marfil); color: var(--carbon); text-align: center; box-shadow: 0 24px 60px rgba(0, 0, 0, .3); }
.dialogo-app::backdrop { background: rgba(27, 48, 69, .55); }
.dialogo-app img { margin: 0 auto 12px; border-radius: 16px; box-shadow: 0 2px 8px rgba(0, 0, 0, .18); }
.dialogo-app h2 { font-size: 1.35rem; }
.dialogo-app ol { text-align: left; padding-left: 22px; margin: 0 0 18px; }
.dialogo-app li { margin-bottom: 8px; }
.dialogo-app .boton { border: 0; cursor: pointer; font-family: inherit; justify-content: center; width: 100%; }

/* Abierta como app: sin el botón de instalar */
@media (display-mode: standalone) { .instalar-app, .aviso-app { display: none !important; } }

/* ---------- Cuentas: Mi cuenta y panel ---------- */
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.envoltura--estrecha { max-width: 640px; }
.seccion--cuenta { padding: 48px 0 72px; min-height: 60vh; }
.enlace { font: inherit; color: var(--azul); background: none; border: 0; padding: 0; text-decoration: underline; cursor: pointer; }
.enlace--peligro { color: var(--granate); }
.cuenta__cargando { color: var(--gris); }
.cuenta__aviso { background: #FBF9F4; border-left: 4px solid var(--ocre); padding: 14px 16px; border-radius: 4px; }
.cuenta__cabeza, .panel__cabeza { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.cuenta__cabeza h1, .panel__cabeza h1 { margin: 0; font-size: clamp(1.9rem, 5vw, 2.5rem); }
.cuenta__acciones { display: flex; align-items: center; gap: 16px; }
.cuenta__acciones .boton { padding: 9px 16px; font-size: .92rem; }

.acceso { background: #FBF9F4; border: 1px solid rgba(37, 63, 88, .15); border-top: 4px solid var(--ocre); border-radius: 6px; padding: 28px 24px; display: flex; flex-direction: column; gap: 8px; box-shadow: 0 14px 30px rgba(37, 63, 88, .1); }
.acceso h2 { margin: 0; }
.acceso__intro { margin: 0 0 8px; color: var(--gris); }
.acceso label { font-weight: 700; font-size: .92rem; color: var(--azul); }
.acceso input, .form-bono input, .form-bono select, .fila-cita__botones input, .fila-bono__botones select { font: inherit; font-size: 1rem; padding: 12px 14px; border: 1.5px solid rgba(37, 63, 88, .3); border-radius: 6px; background: #fff; color: var(--carbon); width: 100%; }
.acceso input:focus, .form-bono input:focus, .form-bono select:focus { outline: none; border-color: var(--ocre); box-shadow: 0 0 0 3px rgba(179, 129, 64, .25); }
.acceso__codigo { font-size: 1.8rem !important; letter-spacing: .4em; text-align: center; font-variant-numeric: tabular-nums; }
.acceso .boton, .form-bono .boton { justify-content: center; border: 0; cursor: pointer; font-family: inherit; margin-top: 8px; }
.acceso__aviso { margin: 4px 0 0; padding: 10px 12px; border-radius: 6px; background: rgba(120, 59, 66, .1); color: var(--granate); font-weight: 700; font-size: .92rem; }
.acceso__letra { margin: 4px 0 0; font-size: .85rem; color: var(--gris); }
.acceso__enlaces { margin: 0; font-size: .9rem; color: var(--gris); }

.tarjeta-bono { background: #FBF9F4; border: 1px solid rgba(37, 63, 88, .15); border-top: 4px solid var(--azul); border-radius: 6px; padding: 24px 22px; box-shadow: 0 14px 30px rgba(37, 63, 88, .1); display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.tarjeta-bono h2 { font-size: 1.3rem; margin: 10px 0 0; }
.tarjeta-bono p { margin: 0; }
.tarjeta-bono__tipo { font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--granate); }
.tarjeta-bono__quedan { font-family: var(--serif); font-size: 1.7rem; color: var(--azul); line-height: 1.2; }
.tarjeta-bono__quedan strong { font-size: 2.6rem; color: var(--granate); }
.tarjeta-bono__listo { color: var(--verde); font-weight: 700; }
.tarjeta-bono__cambio { font-size: .9rem; color: var(--gris); }
.contador { display: flex; gap: 8px; }
.contador__punto { width: 18px; height: 18px; border-radius: 4px; border: 2px solid var(--ocre); }
.contador__punto--usado { background: var(--ocre); }
.citas { list-style: none; padding: 0; margin: 0; width: 100%; }
.cita { display: grid; grid-template-columns: 1fr auto; gap: 0 12px; padding: 10px 0; border-bottom: 1px dashed rgba(37, 63, 88, .2); }
.cita__fecha { font-weight: 700; color: var(--azul); }
.cita__fecha::first-letter { text-transform: uppercase; }
.cita__hora { font-family: var(--serif); font-weight: 700; color: var(--granate); }
.cita__estado { grid-column: 1 / -1; font-size: .85rem; color: var(--gris); }
.cita--hecha .cita__fecha, .cita--falta .cita__fecha, .cita--hecha .cita__hora, .cita--falta .cita__hora { text-decoration: line-through; opacity: .55; }
.cita--hecha .cita__estado { color: var(--verde); font-weight: 700; }
.cita--hoy { background: rgba(179, 129, 64, .12); margin: 0 -8px; padding: 10px 8px; border-radius: 4px; }
.cuenta__anteriores { margin-top: 24px; color: var(--gris); }
.cuenta__anteriores summary { cursor: pointer; font-weight: 700; color: var(--azul); }

/* Panel */
.pagina-panel .envoltura--estrecha { max-width: 760px; }
.pestanas { display: flex; gap: 6px; border-bottom: 2px solid rgba(37, 63, 88, .15); margin-bottom: 20px; overflow-x: auto; }
.pestanas button { font: inherit; font-weight: 700; color: var(--gris); background: none; border: 0; padding: 10px 14px; border-bottom: 3px solid transparent; margin-bottom: -2px; cursor: pointer; white-space: nowrap; }
.pestanas button[aria-selected="true"] { color: var(--azul); border-bottom-color: var(--ocre); }
.navegar-dia { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; text-align: center; margin-bottom: 16px; }
.navegar-dia strong::first-letter { text-transform: uppercase; }
.navegar-dia .boton { padding: 8px 14px; }
.panel__resumen { font-size: .88rem; color: var(--gris); }
.panel__vacio { color: var(--gris); text-align: center; padding: 24px 0; }
.lista-citas, .lista-bonos { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.fila-cita, .fila-bono { background: #FBF9F4; border: 1px solid rgba(37, 63, 88, .15); border-left: 4px solid var(--azul); border-radius: 6px; padding: 14px; display: grid; gap: 10px; }
.fila-cita { grid-template-columns: auto 1fr; }
.fila-cita--hecha { border-left-color: var(--verde); opacity: .8; }
.fila-cita--falta { border-left-color: var(--granate); opacity: .8; }
.fila-cita__hora { font-family: var(--serif); font-weight: 700; font-size: 1.4rem; color: var(--granate); }
.fila-cita__quien, .fila-bono > div:first-child { display: flex; flex-direction: column; }
.fila-cita__quien span, .fila-bono span { font-size: .88rem; color: var(--gris); }
.fila-cita__botones, .fila-bono__botones { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.fila-cita__botones .boton, .fila-bono__botones .boton { padding: 10px 16px; font-size: .95rem; border: 0; cursor: pointer; font-family: inherit; }
.fila-cita__botones .boton--borde, .fila-bono__botones .boton--borde { border: 1.5px solid var(--azul); }
.fila-cita__botones input, .fila-bono__botones select { width: auto; padding: 8px 10px; }
.fila-cita__estado { font-weight: 700; color: var(--verde); }
.fila-cita--falta .fila-cita__estado { color: var(--granate); }
.etiqueta-ok { font-size: .85rem; font-weight: 700; color: var(--verde); }
.form-bono { display: flex; flex-direction: column; gap: 18px; }
.form-bono fieldset { border: 1px solid rgba(37, 63, 88, .15); border-radius: 6px; padding: 16px; background: #FBF9F4; display: flex; flex-direction: column; gap: 6px; margin: 0; }
.form-bono legend { font-family: var(--serif); font-weight: 700; color: var(--azul); font-size: 1.15rem; padding: 0 6px; }
.form-bono label { font-weight: 700; font-size: .9rem; color: var(--azul); margin-top: 6px; }
.form-bono__dos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-bono__dos > div { display: flex; flex-direction: column; gap: 6px; }
.form-bono__ayuda { font-size: .85rem; color: var(--gris); margin: 0; }
#nb-citas { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.panel-aviso { position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%); z-index: 50; background: var(--verde); color: #fff; font-weight: 700; padding: 12px 18px; border-radius: 999px; box-shadow: 0 10px 26px rgba(0, 0, 0, .25); max-width: calc(100% - 32px); text-align: center; }
.panel-aviso--error { background: var(--granate); }
.pagina-panel .flotante { display: none; }
.bonos__ya { margin: 14px 0 0; font-weight: 700; color: var(--azul); }
.pestanas { scrollbar-width: none; }
.pestanas::-webkit-scrollbar { display: none; }