@import url('https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@75..125,400..900&family=Hanken+Grotesk:ital,wght@0,400..800;1,400..600&display=swap');

/*
  Sustitución tipográfica temporal (igual que en el diseño original):
  - Titulares -> "Benzin Bold" (privada). Aquí: Archivo (ancho, heavy) como reemplazo cercano.
  - Cuerpo    -> "Grift" (privada). Aquí: Hanken Grotesk como reemplazo cercano.
*/

:root {
    --cream: #fbf3dd;
    --forest: #16321f;
    --wine: #5c1420;

    --font-display: 'Archivo', sans-serif;
    --font-body: 'Hanken Grotesk', sans-serif;

    color-scheme: light;
}

/* ============ Base ============ */

*,
*::before,
*::after { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    min-height: 100vh;
    font-family: var(--font-body);
    line-height: 1.5;
    background: var(--cream);
    color: var(--forest);
    -webkit-font-smoothing: antialiased;
}

body.is-locked { overflow: hidden; }

img { display: block; max-width: 100%; }
h1, h2, h3, h4, p, blockquote, figure { margin: 0; }
a { color: inherit; }

::selection {
    background: var(--wine);
    color: var(--cream);
}

/* Scrollbar: ocultar salvo al desplazar */
* {
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
}
*:hover {
    scrollbar-color: color-mix(in srgb, currentColor 25%, transparent) transparent;
}

/* Titulares tipo "Benzin": ancho máximo, peso alto, tracking cerrado, mayúsculas */
.display {
    font-family: var(--font-display);
    font-variation-settings: 'wdth' 125;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    line-height: 0.92;
}

/* Micro-labels: display en chico, mayúscula, tracking amplio */
.micro-label {
    font-family: var(--font-display);
    font-variation-settings: 'wdth' 100;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.22em;
}

/* ============ Botones ============ */

.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    border: 2px solid transparent;
    padding: 0.75rem 1.75rem;
    font: inherit;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.btn--outline { border-color: currentColor; }

.section--wine .btn--outline:hover,
.section--wine .btn--outline:focus-visible {
    background: var(--cream);
    color: var(--wine);
}

.btn--solid {
    border-color: var(--forest);
    background: var(--forest);
    padding: 0.75rem 2rem;
    color: var(--cream);
}

.btn--solid:hover:not(:disabled),
.btn--solid:focus-visible:not(:disabled) {
    border-color: var(--wine);
    background: var(--wine);
}

.btn--solid:disabled {
    border-color: transparent;
    background: rgb(22 50 31 / 0.25);
    cursor: not-allowed;
}

/* ============ Header fijo ============ */

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    border-bottom: 1px solid rgb(251 243 221 / 0.15);
    background: rgb(92 20 32 / 0.95);
    backdrop-filter: blur(8px);
    color: var(--cream);
}

.site-header__bar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    margin-inline: auto;
    max-width: 72rem;
    padding: 1rem 1.5rem;
}

.site-header__mark {
    font-size: 1rem;
    line-height: 0.9;
    white-space: nowrap;
    text-decoration: none;
}

.site-nav {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    flex-direction: column;
    gap: 0;
    border-top: 1px solid rgb(251 243 221 / 0.15);
    background: rgb(92 20 32 / 0.98);
    padding: 0.5rem 1.5rem 1.5rem;
}

.site-header[data-menu='open'] .site-nav { display: flex; }

.site-nav__link {
    border-bottom: 1px solid rgb(251 243 221 / 0.1);
    padding: 0.75rem 0;
    font-size: 0.75rem;
    color: rgb(251 243 221 / 0.8);
    text-decoration: none;
    transition: color 0.2s ease;
}

.site-nav__link:hover { color: var(--cream); }

.site-nav__cta {
    margin-top: 1rem;
    border: 2px solid var(--cream);
    padding: 0.75rem 1.25rem;
    font-size: 0.75rem;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.site-nav__cta:hover {
    background: var(--cream);
    color: var(--wine);
}

.site-header__toggle {
    display: flex;
    flex: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    width: 2.25rem;
    height: 2.25rem;
    border: 0;
    background: none;
    cursor: pointer;
}

.site-header__toggle span {
    display: block;
    width: 1.5rem;
    height: 2px;
    background: var(--cream);
    transition: transform 0.2s ease;
}

.site-header__toggle[aria-expanded='true'] span:first-child { transform: translateY(4px) rotate(45deg); }
.site-header__toggle[aria-expanded='true'] span:last-child { transform: translateY(-4px) rotate(-45deg); }

/* ============ Layout de secciones ============ */

.section {
    position: relative;
    padding: 6rem 1.5rem;
}

.section[id] { scroll-margin-top: 5rem; }

.section--wine {
    overflow: hidden;
    background: var(--wine);
    color: var(--cream);
}

.section--forest {
    overflow: hidden;
    background: var(--forest);
    color: var(--cream);
}

.wrap {
    margin-inline: auto;
    max-width: 64rem;
}

.deco {
    position: absolute;
    pointer-events: none;
}

/* ============ Motivo gráfico: barra + "+" ============ */

.barcode {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
}

.barcode--v { flex-direction: column; }

.barcode__bar { display: flex; }
.barcode__bar--v { flex-direction: column; }

.barcode__cell {
    display: block;
    flex: none;
}

.barcode__plus {
    line-height: 1;
    font-weight: 300;
    user-select: none;
}

/* ============ Wordmark ============ */

/* El wordmark sigue ajustándose a su texto (los tags quedan alineados
   debajo); quien hace de contenedor de consulta es el padre, que sí tiene
   un ancho definido. */
.wordmark { display: inline-block; }

/* El wordmark va en una sola línea (white-space: nowrap), así que su ancho
   mínimo mandaba sobre la pista de grid y terminaba recortado por el
   overflow:hidden de la sección. Se mide contra el contenedor: 12cqw es el
   tamaño con el que "de Oración" entra justo, y --wordmark-size mantiene el
   tope de diseño de cada uso. */
.wordmark__text {
    line-height: 0.88;
    white-space: nowrap;
    font-size: var(--wordmark-size);
    font-size: min(12cqw, var(--wordmark-size));
}

.wordmark__tags {
    display: flex;
    justify-content: space-between;
    margin-top: 1rem;
    font-size: clamp(0.6rem, 1.2vw, 0.8rem);
    letter-spacing: 0.24em;
}

.wordmark__tags span:last-child { margin-right: -0.24em; }

/* ============ Hero ============ */

.hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    gap: 3rem;
    margin-inline: auto;
    max-width: 80rem;
}

.hero__text {
    display: flex;
    container-type: inline-size;
    flex-direction: column;
}

.hero__eyebrow {
    margin-bottom: 2.5rem;
    font-size: 0.875rem;
    color: rgb(251 243 221 / 0.8);
}

.hero__lead {
    margin-top: 3.5rem;
    max-width: 36rem;
    font-size: 1.25rem;
    line-height: 1.625;
    color: rgb(251 243 221 / 0.9);
}

.hero__lead strong {
    font-weight: 600;
    color: var(--cream);
}

.hero__cta { margin-top: 3rem; }

.deco--hero-tr { right: 1.5rem; top: 2rem; }
.deco--hero-bl { left: 1.5rem; bottom: -1.5rem; }

/* ============ Video de bienvenida ============ */

.vplayer {
    display: block;
    margin-inline: auto;
    width: 100%;
    max-width: 36rem;
    border: 2px solid rgb(251 243 221 / 0.25);
    text-decoration: none;
}

.vplayer__frame {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: var(--forest);
}

.vplayer__video,
.vmodal__video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.vplayer__tint {
    position: absolute;
    inset: 0;
    background: rgb(92 20 32 / 0.15);
    mix-blend-mode: multiply;
}

.vplayer__play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vplayer__play-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    border: 2px solid rgb(251 243 221 / 0.8);
    border-radius: 9999px;
    background: rgb(92 20 32 / 0.4);
    backdrop-filter: blur(4px);
    transition: transform 0.3s ease;
}

.vplayer:hover .vplayer__play-circle,
.vplayer:focus-visible .vplayer__play-circle { transform: scale(1.1); }

.vplayer__play-circle svg {
    width: 1.5rem;
    height: 1.5rem;
    margin-left: 0.15rem;
    color: var(--cream);
}

.vplayer__caption,
.vmodal__caption {
    position: absolute;
    left: 1rem;
    bottom: 1rem;
    font-size: 0.875rem;
    color: var(--cream);
    text-shadow: 0 1px 3px rgb(0 0 0 / 0.5);
}

.vplayer__tag,
.vmodal__tag {
    position: absolute;
    left: 1rem;
    top: 1rem;
    background: var(--cream);
    padding: 0.25rem 0.75rem;
    font-size: 0.6rem;
    color: var(--wine);
}

.vplayer__barcode { position: absolute; right: 1rem; bottom: 1rem; }

.vmodal {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgb(22 50 31 / 0.85);
    backdrop-filter: blur(4px);
}

.vmodal[hidden] { display: none; }

.vmodal__close {
    position: absolute;
    right: 1.25rem;
    top: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 2px solid rgb(251 243 221 / 0.6);
    border-radius: 9999px;
    background: none;
    color: var(--cream);
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.vmodal__close:hover {
    background: var(--cream);
    color: var(--forest);
}

.vmodal__close svg { width: 1.25rem; height: 1.25rem; }

.vmodal__box {
    position: relative;
    width: 100%;
    max-width: 64rem;
    border: 2px solid rgb(251 243 221 / 0.25);
}

.vmodal__frame {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--forest);
}

.vmodal__iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

.vmodal__tint {
    position: absolute;
    inset: 0;
    background: rgb(92 20 32 / 0.1);
    mix-blend-mode: multiply;
    pointer-events: none;
}

.vmodal__caption { left: 1.5rem; bottom: 1.25rem; font-size: 1rem; }
.vmodal__tag { left: 1.5rem; top: 1.25rem; font-size: 0.75rem; }
.vmodal__barcode { position: absolute; right: 1.5rem; top: 1.25rem; }

.vmodal__caption,
.vmodal__tag,
.vmodal__barcode { pointer-events: none; }

/* ============ Cómo participar ============ */

.steps__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 4rem;
}

.steps__title { font-size: 1.875rem; }

.steps {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1px;
    background: rgb(22 50 31 / 0.15);
}

.step {
    background: var(--cream);
    padding: 2rem;
    transition: background-color 0.2s ease;
}

.step:hover { background: rgb(22 50 31 / 0.03); }

.step__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2rem;
}

.step__n {
    font-size: 0.75rem;
    color: rgb(22 50 31 / 0.4);
}

.step__verb {
    font-size: clamp(1.75rem, 3.2vw, 2.75rem);
    font-variation-settings: 'wdth' 100;
}

.step__obj {
    margin-top: 0.75rem;
    font-size: 1.125rem;
    color: rgb(22 50 31 / 0.7);
}

/* ============ Experiencias de Oración ============ */

.exp__title { font-size: 2.25rem; }

.deco--exp-tr { right: 2rem; top: 2.5rem; }

.exp__lead {
    margin-top: 2rem;
    max-width: 42rem;
    font-size: 1.125rem;
    line-height: 1.625;
    color: rgb(251 243 221 / 0.85);
}

.events {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin-top: 3.5rem;
}

.event {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    overflow: hidden;
    border: 2px solid rgb(251 243 221 / 0.25);
    background: var(--forest);
}

.event__media {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--forest);
}

.event__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.85;
}

/* Slideshow con fundido: sin JS queda visible la primera foto. */
.slideshow { position: absolute; inset: 0; }

.slideshow__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.slideshow__img.is-active { opacity: 0.9; }

.event__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgb(22 50 31 / 0.9), rgb(22 50 31 / 0.3) 50%, transparent);
}

.event__tag {
    position: absolute;
    left: 1.25rem;
    top: 1.25rem;
    background: var(--cream);
    padding: 0.375rem 1rem;
    font-size: 0.75rem;
    color: var(--forest);
}

.event__barcode { position: absolute; right: 1.25rem; top: 1.25rem; }

.event__dates {
    position: absolute;
    left: 1.25rem;
    right: 1.25rem;
    bottom: 1.25rem;
}

.event__dates-head {
    border-bottom: 1px solid rgb(251 243 221 / 0.4);
    padding-bottom: 0.25rem;
}

.event__dates-head .micro-label {
    font-size: 0.6rem;
    color: rgb(251 243 221 / 0.7);
}

.event__dates-list {
    display: flex;
    gap: 1.5rem;
    padding-top: 0.5rem;
}

.event__date {
    font-size: 2.25rem;
    color: var(--cream);
}

.event__body {
    display: flex;
    container-type: inline-size;
    flex-direction: column;
    padding: 2rem;
}

.event__title {
    font-size: 2.25rem;
    color: var(--cream);
}

.event__text {
    margin-top: 1.25rem;
    line-height: 1.625;
    color: rgb(251 243 221 / 0.85);
}

.event__where { margin-top: 2rem; }

.event__where-label {
    font-size: 0.65rem;
    color: rgb(251 243 221 / 0.45);
}

.campus {
    margin: 1rem 0 0;
    padding: 0;
    border-top: 1px solid rgb(251 243 221 / 0.15);
    border-bottom: 1px solid rgb(251 243 221 / 0.15);
    list-style: none;
}

.campus__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 0;
}

.campus__row + .campus__row { border-top: 1px solid rgb(251 243 221 / 0.15); }

/* En mobile el modo baja debajo del nombre: con "PRESENCIAL" en la misma
   línea el ancho mínimo de la fila supera el del card (~278px en un iPhone
   14) y el horario quedaba recortado por el overflow:hidden del .event. */
.campus__name {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: 0.75rem;
    row-gap: 0.125rem;
    min-width: 0;
    font-size: 1.125rem;
    color: var(--cream);
}

.campus__dot {
    flex: none;
    width: 0.375rem;
    height: 0.375rem;
    background: var(--cream);
}

.campus__nombre { min-width: 0; }

.campus__mode {
    grid-column: 2;
    font-size: 0.6rem;
    color: rgb(251 243 221 / 0.45);
}

.campus__time {
    flex: none;
    font-size: 1rem;
    color: var(--cream);
}

/* Oración y Ayuno: en lugar de la lista de campus, una jornada por noche de
   la semana con sus propias fechas (ver experiencia_ayuno()). */

/* auto-fit y no un breakpoint: el card mide 27rem de contenido en desktop, por
   debajo del umbral de 30rem que usa .campus, así que las dos jornadas quedan
   una al lado de la otra apenas entran y apiladas cuando no. */
.jornadas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: 1px;
    margin-top: 1rem;
    border: 1px solid rgb(251 243 221 / 0.15);
    background: rgb(251 243 221 / 0.15);
}

.jornada {
    display: flex;
    flex-direction: column;
    background: var(--forest);
    padding: 1.25rem;
}

.jornada__dia {
    font-size: 0.75rem;
    color: var(--cream);
}

.jornada__fechas {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.75rem;
}

.jornada__fecha {
    font-size: 1.875rem;
    color: var(--cream);
}

.jornada__sep {
    font-size: 1.5rem;
    color: rgb(251 243 221 / 0.3);
}

.jornada__campus {
    margin-top: 1rem;
    border-top: 1px solid rgb(251 243 221 / 0.15);
    padding-top: 0.75rem;
}

.jornada__modo {
    font-size: 0.6rem;
    color: rgb(251 243 221 / 0.45);
}

.jornada__nombre {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.25rem;
    color: var(--cream);
}

.jornada__hora {
    display: block;
    margin-top: 0.25rem;
    color: rgb(251 243 221 / 0.7);
}

/* Con el card ancho el modo vuelve a la misma línea que el nombre. */
@container (min-width: 30rem) {
    .campus__name { grid-template-columns: auto minmax(0, 1fr) auto; }
    .campus__mode { grid-column: auto; }
    .campus__time { font-size: 1.125rem; }
}

/* ============ Ora Primero ============ */

.ora {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    gap: 3rem;
    margin-inline: auto;
    max-width: 64rem;
}

.kicker {
    font-size: 0.75rem;
    color: var(--wine);
}

.ora__title {
    margin-top: 1rem;
    font-size: 3rem;
}

.ora__text {
    margin-top: 1.5rem;
    max-width: 28rem;
    font-size: 1.125rem;
    line-height: 1.625;
    color: rgb(22 50 31 / 0.75);
}

.muted { color: rgb(22 50 31 / 0.5); }
.muted-cream { color: rgb(251 243 221 / 0.5); }

.schedule { border: 2px solid var(--forest); }

.schedule__head {
    border-bottom: 2px solid var(--forest);
    background: var(--forest);
    padding: 1rem 1.5rem;
}

.schedule__head span {
    font-size: 0.875rem;
    color: var(--cream);
}

.schedule__body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2rem 1.5rem;
}

.schedule__hours { font-size: 2.25rem; }

.schedule__sub {
    margin-top: 0.25rem;
    color: rgb(22 50 31 / 0.6);
}

.schedule__via { text-align: right; }

.schedule__via-label {
    font-size: 0.75rem;
    color: rgb(22 50 31 / 0.5);
}

.schedule__via-value { font-size: 1.125rem; }

/* ============ Guía de Oración (acordeón) ============ */

.days__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 3rem;
}

.days__title {
    margin-top: 0.75rem;
    font-size: 2.25rem;
}

.days__hint {
    max-width: 24rem;
    color: rgb(22 50 31 / 0.65);
}

.weeks {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    column-gap: 2.5rem;
}

.week__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.week__label {
    font-size: 0.75rem;
    color: var(--wine);
}

.week__range {
    font-size: 0.75rem;
    color: rgb(22 50 31 / 0.45);
}

.week__list { border-top: 1px solid rgb(22 50 31 / 0.15); }

.day + .day { border-top: 1px solid rgb(22 50 31 / 0.15); }

.day__btn {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1rem 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.day__label {
    display: flex;
    min-width: 0;
    align-items: baseline;
    gap: 0.75rem;
}

.day__tema { min-width: 0; }

.day__n { font-size: 1.25rem; }

.day__tema {
    font-size: 0.875rem;
    color: rgb(22 50 31 / 0.6);
}

.day__plus {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border: 2px solid var(--forest);
    font-size: 1.25rem;
    font-weight: 300;
    line-height: 1;
    transition: transform 0.3s ease;
}

.day__btn[aria-expanded='true'] .day__plus { transform: rotate(45deg); }

/* Días todavía no publicados: en gris y sin abrir. */
.day--locked .day__btn {
    color: rgb(22 50 31 / 0.35);
    cursor: not-allowed;
}

.day--locked .day__tema { color: rgb(22 50 31 / 0.3); }

.day--locked .day__plus {
    border-color: rgb(22 50 31 / 0.2);
    color: rgb(22 50 31 / 0.25);
}

.day__panel {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows 0.3s ease-out, opacity 0.3s ease-out;
}

.day__btn[aria-expanded='true'] + .day__panel {
    grid-template-rows: 1fr;
    opacity: 1;
}

.day__panel-inner { overflow: hidden; }

.day__content { padding: 0.25rem 0 1.75rem; }

.day__barcode { margin-bottom: 1.25rem; }

.day__quote {
    margin-bottom: 1.25rem;
    border-left: 2px solid var(--wine);
    padding-left: 1rem;
    font-style: italic;
    line-height: 1.625;
    color: var(--forest);
}

.day__quote cite {
    display: block;
    margin-top: 0.5rem;
    font-style: normal;
    font-size: 0.65rem;
    color: var(--wine);
}

.day__h {
    margin-bottom: 0.5rem;
    font-size: 0.65rem;
    font-weight: 700;
    color: rgb(22 50 31 / 0.5);
}

.day__list {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    margin: 0 0 1.25rem;
    padding: 0;
    list-style: none;
}

.day__list li {
    display: flex;
    gap: 0.625rem;
    font-size: 0.875rem;
    color: rgb(22 50 31 / 0.8);
}

.day__bullet {
    flex: none;
    width: 0.375rem;
    height: 0.375rem;
    margin-top: 0.5rem;
    background: var(--wine);
}

/* Motivo con encabezado propio (ver days.php: motivos como {titulo, texto}). */
.day__motivo {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.day__motivo-t {
    font-weight: 600;
    color: var(--forest);
}

.day__motivo-d { color: rgb(22 50 31 / 0.7); }

.day__list li:has(.day__motivo) { margin-bottom: 0.5rem; }

.day__reflexion {
    font-size: 0.875rem;
    line-height: 1.625;
    color: rgb(22 50 31 / 0.8);
}

/* ============ ¿Qué es el ayuno? ============ */

.fast {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 3rem;
    margin-inline: auto;
    max-width: 64rem;
}

.deco--fast-tr { right: 1.5rem; top: 2.5rem; }

.fast__kicker {
    font-size: 0.75rem;
    color: rgb(251 243 221 / 0.6);
}

.fast__title {
    margin-top: 1rem;
    font-size: 2.25rem;
    color: var(--cream);
}

.fast__figure {
    position: relative;
    margin-top: 2rem;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border: 2px solid rgb(251 243 221 / 0.25);
    background: var(--forest);
}

.fast__figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.9;
}

.fast__figure-tint {
    position: absolute;
    inset: 0;
    background: rgb(92 20 32 / 0.2);
    mix-blend-mode: multiply;
}

.fast__figure-barcode { position: absolute; right: 1rem; bottom: 1rem; }

.fast__body > * + * { margin-top: 1.5rem; }

.fast__p1 {
    font-size: 1.125rem;
    line-height: 1.625;
    color: rgb(251 243 221 / 0.9);
}

.fast__p2 {
    line-height: 1.625;
    color: rgb(251 243 221 / 0.8);
}

.fast__types {
    display: grid;
    gap: 1px;
    background: rgb(251 243 221 / 0.15);
}

.fast__type {
    background: var(--wine);
    padding: 1.5rem;
}

.fast__type-icon {
    width: 2.25rem;
    height: 2.25rem;
    margin-bottom: 1.25rem;
    color: var(--cream);
}

.fast__type h3 {
    margin-bottom: 0.5rem;
    font-size: 0.65rem;
    color: rgb(251 243 221 / 0.55);
}

.fast__type p {
    font-size: 0.875rem;
    line-height: 1.625;
    color: rgb(251 243 221 / 0.85);
}

.fast__note {
    font-size: 0.875rem;
    line-height: 1.625;
    color: rgb(251 243 221 / 0.7);
}

/* ============ Pedido de oración ============ */

.pform { border: 2px solid var(--forest); }

.pform__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 2px solid var(--forest);
    background: var(--forest);
    padding: 1rem 1.5rem;
    color: var(--cream);
}

.pform__step {
    font-size: 0.75rem;
    color: rgb(251 243 221 / 0.7);
}

.pform__progress {
    display: inline-flex;
    flex: none;
}

.pform__cell {
    display: block;
    width: 16px;
    height: 16px;
    border: 2px solid var(--cream);
}

.pform__cell + .pform__cell { margin-left: -2px; }
.pform__cell.is-active { background: var(--cream); }

.pform__body { padding: 1.5rem; }

.pform__panel[hidden] { display: none; }
.pform__panel--narrow { max-width: 42rem; }

.pcats {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1px;
    background: rgb(22 50 31 / 0.15);
}

.pcat {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--cream);
    padding: 1.5rem;
    color: var(--forest);
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.pcat:hover { background: rgb(22 50 31 / 0.04); }

.pcat.is-selected,
.pcat:has(.pcat__input:checked) {
    background: var(--forest);
    color: var(--cream);
}

.pcat:has(.pcat__input:focus-visible) {
    outline: 2px solid var(--wine);
    outline-offset: -2px;
}

.pcat__input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    overflow: hidden;
    white-space: nowrap;
}

.pcat__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
}

.pcat__barcode {
    display: inline-flex;
    color: var(--wine);
}

.pcat.is-selected .pcat__barcode,
.pcat:has(.pcat__input:checked) .pcat__barcode { color: var(--cream); }

.pcat__check {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border: 2px solid rgb(22 50 31 / 0.3);
    font-size: 0.875rem;
    color: transparent;
}

.pcat.is-selected .pcat__check,
.pcat:has(.pcat__input:checked) .pcat__check {
    border-color: var(--cream);
    background: var(--cream);
    color: var(--forest);
}

.pcat__title { font-size: 1.875rem; }

.pcat__desc {
    margin-top: 0.75rem;
    font-size: 0.875rem;
    line-height: 1.625;
    opacity: 0.75;
}

.pform__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 2rem;
}

.pform__hint {
    font-size: 0.875rem;
    color: rgb(22 50 31 / 0.55);
}

.pform__chosen {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2rem;
}

.pform__tag {
    background: var(--forest);
    padding: 0.375rem 1rem;
    font-size: 0.75rem;
    color: var(--cream);
}

.pform__back {
    border: 0;
    background: none;
    padding: 0;
    font: inherit;
    font-size: 0.875rem;
    color: rgb(22 50 31 / 0.6);
    text-decoration: underline;
    text-underline-offset: 4px;
    cursor: pointer;
}

.pform__back:hover { color: var(--forest); }

.pform__error {
    margin-bottom: 1rem;
    font-size: 0.875rem;
    color: var(--wine);
}

.pform__label {
    display: block;
    margin-bottom: 0.75rem;
    font-size: 0.75rem;
    color: rgb(22 50 31 / 0.5);
}

.pform__field + .pform__label { margin-top: 2rem; }

.pform__optional {
    text-transform: none;
    letter-spacing: normal;
    color: rgb(22 50 31 / 0.4);
}

.pform__field {
    display: block;
    width: 100%;
    border: 2px solid var(--forest);
    background: var(--cream);
    padding: 0.75rem 1rem;
    font: inherit;
    color: var(--forest);
    outline: none;
    resize: none;
}

.pform__field::placeholder { color: rgb(22 50 31 / 0.35); }
.pform__field:focus { border-color: var(--wine); }

.pform__note {
    margin-top: 0.75rem;
    font-size: 0.875rem;
    line-height: 1.625;
    color: rgb(22 50 31 / 0.55);
}

.pform__send { margin-top: 2rem; }

.pform__panel--done {
    max-width: 36rem;
    padding: 1.5rem 0;
}

.pform__done-barcode { margin-bottom: 2rem; }

.pform__done-title { font-size: 2.25rem; }

.pform__done-text {
    margin-top: 1.5rem;
    font-size: 1.125rem;
    line-height: 1.625;
    color: rgb(22 50 31 / 0.75);
}

.pform__panel--done .btn { margin-top: 2rem; }

.pform .btn--outline:hover,
.pform .btn--outline:focus-visible {
    background: var(--forest);
    color: var(--cream);
}

/* ============ Cierre ============ */

.section--closing { padding: 7rem 1.5rem; }

.deco--closing-l { left: 1.5rem; top: 2.5rem; }
.deco--closing-r { right: 1.5rem; bottom: 2.5rem; }

.closing {
    margin-inline: auto;
    max-width: 48rem;
    text-align: center;
}

.closing__barcode {
    display: flex;
    justify-content: center;
    margin-bottom: 2.5rem;
}

.closing__lead {
    font-size: 1.5rem;
    line-height: 1.625;
    color: rgb(251 243 221 / 0.9);
}

.closing__title {
    margin-top: 3rem;
    font-size: 2.25rem;
    color: var(--cream);
}

.closing__mark {
    display: flex;
    container-type: inline-size;
    flex-direction: column;
    align-items: center;
    margin-top: 3rem;
}

/* ============ Breakpoints ============ */

@media (min-width: 640px) {
    .fast__types { grid-template-columns: repeat(2, minmax(0, 1fr)); }

}

@media (min-width: 768px) {
    .section { padding: 8rem 4rem; }
    .section--closing { padding: 9rem 4rem; }

    .site-header__bar { padding: 1rem 4rem; }
    .site-header__mark { font-size: 1.125rem; }
    .site-nav { padding: 0.5rem 4rem 1.5rem; }

    .deco--hero-tr { right: 4rem; top: 3.5rem; }
    .deco--hero-bl { left: 4rem; }
    .deco--exp-tr { right: 5rem; }
    .deco--fast-tr { right: 4rem; }
    .deco--closing-l { left: 5rem; }
    .deco--closing-r { right: 5rem; }

    .hero__lead { font-size: 1.5rem; }

    .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .steps__title { font-size: 3rem; }

    .exp__title { font-size: 3.75rem; }

    .ora { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
    .ora__title { font-size: 4.5rem; }

    .days__title { font-size: 3.75rem; }
    .weeks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .day__n { font-size: 1.5rem; }

    .fast { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
    .fast__title { font-size: 3.75rem; }
    .fast__p1 { font-size: 1.25rem; }

    .pcats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .pform__body { padding: 2.5rem; }
    .pform__done-title { font-size: 3rem; }

    .closing__lead { font-size: 1.875rem; }
    .closing__title { font-size: 3.75rem; }
}

@media (min-width: 1024px) {
    .hero__inner {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
        gap: 4rem;
        min-height: 70vh;
    }

    .site-nav {
        position: static;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 2rem;
        border-top: 0;
        background: none;
        padding: 0;
    }

    .site-nav__link {
        border-bottom: 0;
        padding: 0;
        font-size: 0.7rem;
        color: rgb(251 243 221 / 0.7);
    }

    .site-nav__cta {
        margin-top: 0;
        padding: 0.5rem 1.25rem;
        font-size: 0.7rem;
    }

    .site-header__toggle { display: none; }

    .event { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .event__media { aspect-ratio: auto; }
    .event--invert .event__media { order: 2; }
    .event--invert .event__body { order: 1; }
    .event__body { padding: 2.5rem; }
    .event__title { font-size: 3rem; }
    .event__date { font-size: 3rem; }

    .weeks { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}