/* Sitio público v3 — editorial, inspirado en el misal: rúbricas en rojo, capitulares,
   cintas de marcapáginas en el color del tiempo litúrgico. Solo tokens. */

:root {
  --rubrica: var(--adc-solemne);                 /* rojo de rúbrica */
  --tiempo: var(--adc-color-liturgico-verde);    /* lo reemplaza liturgia.js */
  --serif: var(--adc-fuente-display);
  --versal: 'Cormorant SC', var(--adc-fuente-display);
  --regla: color-mix(in srgb, var(--adc-texto) 14%, transparent);
  --envoltura: min(100% - 2.5rem, 1240px);
}
@media (min-width: 768px) { :root { --envoltura: min(100% - 6rem, 1240px); } }

body { background: var(--adc-fondo); color: var(--adc-texto); font-size: 1.0625rem; }
h1, h2, h3 { font-family: var(--serif); font-weight: 500; letter-spacing: -.01em; }
h2 { font-size: clamp(2.1rem, 3.6vw + .8rem, 3.6rem); line-height: 1.04; margin: 0 0 1.25rem; max-width: 18ch; }
p { max-width: 60ch; }
a { color: inherit; }
.envoltura { width: var(--envoltura); margin-inline: auto; }

/* Rúbrica: como las indicaciones en rojo del misal */
.rubrica { font: 600 .95rem/1 var(--versal); letter-spacing: .14em; color: var(--rubrica); margin: 0 0 1.4rem; text-transform: lowercase; }
.rubrica--clara { color: var(--adc-sobre-noche-acento); }

/* Capitular */
.capitular::first-letter { float: left; font: 500 4.6em/.78 var(--serif); color: var(--rubrica); padding: .06em .12em 0 0; }

/* Botones y enlaces */
.boton { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 1.6rem; background: var(--adc-texto); color: var(--adc-fondo); text-decoration: none; font: 600 .95rem/1 var(--adc-fuente-texto); letter-spacing: .06em; border: 0; border-radius: 2px; cursor: pointer; transition: background .25s, transform .25s, box-shadow .25s; }
.boton:hover { background: var(--rubrica); box-shadow: 0 10px 24px -12px var(--rubrica); transform: translateY(-1px); }
.boton--grande { min-height: 56px; padding: 0 2.2rem; font-size: 1rem; }
.boton--ancho { width: 100%; }
.boton--oro { background: var(--adc-sobre-noche-acento); color: var(--adc-noche); }
.boton--oro:hover { background: var(--adc-sobre-noche); color: var(--adc-noche); box-shadow: none; }
.enlace { display: inline-flex; gap: .5em; align-items: center; font: italic 500 1.2rem/1 var(--serif); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 3px; }
.enlace::after { content: "→"; font-style: normal; transition: transform .25s; }
.enlace:hover::after { transform: translateX(4px); }
.enlace--claro { color: var(--adc-sobre-noche); }

/* ── Cabecera con cintas ───────────────────────────────────── */
.cab { position: sticky; top: 0; z-index: 100; background: color-mix(in srgb, var(--adc-fondo) 92%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--regla); }
.cab__fila { width: var(--envoltura); margin-inline: auto; height: 68px; display: flex; align-items: center; gap: 2rem; }
.cab__marca { display: flex; align-items: center; gap: .7rem; text-decoration: none; font: 500 1.35rem/1 var(--serif); margin-right: auto; }
.cab__nav { display: none; gap: 1.8rem; }
.cab__nav a { text-decoration: none; font-size: .95rem; color: var(--adc-texto-suave); position: relative; padding: .4rem 0; }
.cab__nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px; background: var(--rubrica); transition: right .3s; }
.cab__nav a:hover { color: var(--adc-texto); }
.cab__nav a:hover::after, .cab__nav a[aria-current] ::after { right: 0; }
.cab__cta { text-decoration: none; font: 600 .9rem/1 var(--adc-fuente-texto); letter-spacing: .06em; padding: .8rem 1.2rem; background: var(--adc-texto); color: var(--adc-fondo); border-radius: 2px; transition: background .25s; }
.cab__cta:hover { background: var(--rubrica); }
.cab__menu { width: 44px; height: 44px; border: 0; background: none; display: grid; place-content: center; gap: 6px; cursor: pointer; }
.cab__menu span { width: 22px; height: 1.5px; background: var(--adc-texto); }
.cab__cerrar { justify-self: end; font: 400 2.2rem/1 var(--serif); background: none; border: 0; cursor: pointer; color: var(--adc-texto); }
@media (min-width: 1024px) { .cab__nav { display: flex; } .cab__menu { display: none; } }
@media (max-width: 520px) { .cab__marca span { font-size: 1.15rem; } .cab__cta { padding: .7rem .9rem; } .cab__fila { gap: .8rem; } }

.cintas { position: absolute; right: max(1.25rem, calc((100vw - 1240px) / 2 - 2.5rem)); top: 100%; display: flex; gap: 6px; pointer-events: none; }
.cinta { display: block; width: 13px; height: 96px; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 86%, 0 100%); transform-origin: top center; animation: cinta 1.6s cubic-bezier(.2,.7,.2,1) both; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.cinta--tiempo { background: linear-gradient(90deg, rgba(0,0,0,.12), transparent 40%, rgba(255,255,255,.12) 60%, rgba(0,0,0,.1)), var(--tiempo); }
.cinta--oro { height: 78px; background: linear-gradient(90deg, rgba(0,0,0,.15), transparent 45%, rgba(255,255,255,.25) 60%, rgba(0,0,0,.12)), var(--adc-color-oro-500); animation-delay: .15s; }
@keyframes cinta { from { transform: scaleY(0) rotate(4deg); } 70% { transform: scaleY(1.02) rotate(-1.5deg); } to { transform: scaleY(1) rotate(0); } }
@media (max-width: 767px) { .cinta { width: 10px; height: 64px; } .cinta--oro { height: 52px; } }

/* ── Portada ───────────────────────────────────────────────── */
.portada { width: var(--envoltura); margin-inline: auto; display: grid; gap: 3rem; padding-block: clamp(3rem, 7vw, 6.5rem) clamp(4rem, 8vw, 7rem); align-items: center; }
@media (min-width: 900px) { .portada { grid-template-columns: 1.15fr .85fr; gap: 5rem; } }
.portada__titulo { font-size: clamp(3rem, 7.2vw, 6.6rem); line-height: .94; font-weight: 400; margin: 0 0 2rem; max-width: 11ch; }
.portada__titulo span { display: inline-block; animation: sube 1s cubic-bezier(.2,.7,.2,1) both; }
.portada__titulo span:nth-child(2) { animation-delay: .08s; } .portada__titulo span:nth-child(3) { animation-delay: .16s; } .portada__titulo span:nth-child(4) { animation-delay: .24s; }
.portada__y { font-style: italic; color: var(--rubrica); }
@keyframes sube { from { opacity: 0; transform: translateY(.35em); } }
.portada__lema { font: 400 clamp(1.2rem, 1.2vw + .8rem, 1.45rem)/1.45 var(--serif); color: var(--adc-texto-suave); margin-bottom: 2.4rem; max-width: 34ch; }
.portada__lema b { font-weight: 600; color: var(--adc-texto); }
.portada__acciones { display: flex; flex-wrap: wrap; gap: 1.2rem 2rem; align-items: center; }
.portada__sello { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; margin: 2.4rem 0 0; padding-top: 1.4rem; border-top: 1px solid var(--regla); max-width: none; }
.portada__sello span { font: 600 .9rem/1 var(--versal); letter-spacing: .12em; text-transform: lowercase; color: var(--adc-texto-suave); }
.portada__sello span + span::before { content: "✠"; color: var(--rubrica); margin-right: 1.4rem; font-family: var(--serif); }
.portada__foto { margin: 0; position: relative; justify-self: center; width: min(100%, 470px); animation: aparece 1.4s .2s both; }
.portada__foto img { width: 100%; aspect-ratio: 3/4; object-fit: cover; border-radius: 999px 999px 0 0; }
.portada__foto::before { content: ""; position: absolute; inset: -14px -14px 34px; border: 1px solid var(--adc-ornamento); border-radius: 999px 999px 0 0; pointer-events: none; }
.portada__foto figcaption { margin-top: .9rem; font: italic 400 1rem/1.3 var(--serif); color: var(--adc-texto-suave); text-align: right; }
@keyframes aparece { from { opacity: 0; transform: translateY(14px); } }

/* ── Secciones ─────────────────────────────────────────────── */
.sec { padding-block: clamp(4.5rem, 9vw, 8.5rem); border-top: 1px solid var(--regla); }
.sec__cabeza { margin-bottom: 2.8rem; }
.sec__fila { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1.5rem; }
.sec__fila h2 { margin: 0; }

/* Riel de piezas */
.riel { list-style: none; margin: 0; padding: 0 max(1.25rem, calc((100vw - 1240px) / 2)) 1rem; display: grid; grid-auto-flow: column; grid-auto-columns: min(78vw, 360px); gap: 1.6rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: max(1.25rem, calc((100vw - 1240px) / 2)); scrollbar-width: none; cursor: grab; }
.riel::-webkit-scrollbar { display: none; }
.riel.arrastrando { cursor: grabbing; scroll-snap-type: none; }
.pieza { scroll-snap-align: start; }
.pieza a { display: grid; gap: .5rem; text-decoration: none; user-select: none; -webkit-user-drag: none; }
.pieza img { width: 100%; aspect-ratio: 3/4; object-fit: cover; margin-bottom: .8rem; transition: transform .8s cubic-bezier(.2,.7,.2,1), filter .5s; pointer-events: none; }
.pieza a:hover img { transform: scale(1.025); }
.pieza { overflow: hidden; }
.pieza__n { font: 500 1.65rem/1.1 var(--serif); }
.pieza__d { color: var(--adc-texto-suave); font-size: .98rem; max-width: 32ch; }
.pieza--texto a { height: 100%; align-content: end; padding: 2rem; background: var(--adc-noche); color: var(--adc-sobre-noche); aspect-ratio: 3/4.6; }
.pieza--texto .pieza__d { color: var(--adc-sobre-noche-suave); margin-bottom: 1rem; }
.pieza--texto .enlace { color: var(--adc-sobre-noche-acento); justify-self: start; }
.riel__flechas { display: flex; gap: .5rem; }
.riel__flechas button { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--regla); background: none; font-size: 1.2rem; cursor: pointer; color: var(--adc-texto); transition: background .25s, color .25s; }
.riel__flechas button:hover { background: var(--adc-texto); color: var(--adc-fondo); }

/* El hilo: lupa */
.hilo__rejilla { display: grid; gap: 3.5rem; align-items: center; }
@media (min-width: 960px) { .hilo__rejilla { grid-template-columns: 1.2fr .8fr; gap: 5rem; } }
.lupa { position: relative; margin: 0; cursor: zoom-in; touch-action: pan-y; }
.lupa img { width: 100%; display: block; }
.lupa figcaption { margin-top: .8rem; font: italic 1rem var(--serif); color: var(--adc-texto-suave); }
.lupa__lente { position: absolute; width: 210px; height: 210px; border-radius: 50%; pointer-events: none; opacity: 0; transform: translate(-50%, -50%) scale(.6); transition: opacity .25s, transform .25s; box-shadow: 0 0 0 2px var(--adc-fondo), 0 0 0 3px var(--adc-ornamento), 0 18px 40px rgba(0,0,0,.35); background-repeat: no-repeat; }
.lupa.activa .lupa__lente { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.hilo__texto p { font-size: 1.1rem; }
.hilo__notas { display: grid; grid-template-columns: auto 1fr; gap: .9rem 1.4rem; margin: 2rem 0 0; padding-top: 1.6rem; border-top: 1px solid var(--regla); }
.hilo__notas dt { font: 600 .95rem/1.5 var(--versal); letter-spacing: .1em; text-transform: lowercase; color: var(--rubrica); }
.hilo__notas dd { margin: 0; color: var(--adc-texto-suave); }

/* Año litúrgico: rueda */
.anio { background: var(--adc-superficie-alt); }
.anio__rejilla { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 960px) { .anio__rejilla { grid-template-columns: .9fr 1.1fr; gap: 5rem; } }
.anio__ficha { margin-top: 2rem; padding: 1.6rem 0 0; border-top: 1px solid var(--regla); min-height: 11rem; }
.anio__ficha h3 { font-size: 1.9rem; margin: 0 0 .3rem; display: flex; align-items: center; gap: .8rem; }
.anio__ficha h3 i { width: 14px; height: 30px; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 82%, 0 100%); background: var(--c); box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); }
.anio__ficha .fechas { font: italic 1.1rem var(--serif); color: var(--adc-texto-suave); margin: 0 0 .8rem; }
.anio__ficha .boton { margin-top: 1rem; }
.rueda { position: relative; width: min(100%, 520px); justify-self: center; aspect-ratio: 1; }
.rueda svg { width: 100%; height: 100%; overflow: visible; }
.rueda .tramo { cursor: pointer; transition: transform .35s cubic-bezier(.2,.7,.2,1), filter .25s; transform-origin: 0 0; stroke: color-mix(in srgb, var(--adc-texto) 22%, transparent); stroke-width: .5; }
.rueda .tramo:hover, .rueda .tramo:focus-visible { filter: brightness(1.08); outline: none; }
.rueda .tramo.activo { transform: scale(1.05); }
.rueda .etq { font: 500 6.2px var(--serif); fill: var(--adc-texto-suave); pointer-events: none; }
.rueda .hoy-marca { stroke: var(--adc-texto); stroke-width: .9; }
.rueda .hoy-punto { fill: var(--adc-texto); }
.rueda__centro { position: absolute; inset: 27%; border-radius: 50%; display: grid; place-content: center; text-align: center; pointer-events: none; }
.rueda__centro small { font: 600 .8rem/1 var(--versal); letter-spacing: .14em; color: var(--rubrica); text-transform: lowercase; }
.rueda__centro b { font: 500 clamp(1.3rem, 3vw, 1.9rem)/1.05 var(--serif); margin: .5rem 0 .3rem; }
.rueda__centro span { font: italic .95rem var(--serif); color: var(--adc-texto-suave); }

/* Símbolos */
.simb__rejilla { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 960px) { .simb__rejilla { grid-template-columns: 1fr 1fr; gap: 5rem; } }
.simb__lista ul { list-style: none; margin: 1.5rem 0 0; padding: 0; border-top: 1px solid var(--regla); }
.simb__lista li { border-bottom: 1px solid var(--regla); }
.simb__lista button { width: 100%; text-align: left; background: none; border: 0; padding: .9rem 0; font: 400 clamp(1.5rem, 2vw + .8rem, 2.1rem)/1.15 var(--serif); color: var(--adc-texto-tenue); cursor: pointer; display: flex; align-items: baseline; gap: 1rem; transition: color .25s, padding .35s; }
.simb__lista button::before { content: "✠"; font-size: .6em; color: var(--rubrica); opacity: 0; transition: opacity .25s; }
.simb__lista button:hover, .simb__lista button[aria-pressed="true"] { color: var(--adc-texto); padding-left: .4rem; }
.simb__lista button[aria-pressed="true"]::before { opacity: 1; }
.simb__vista { margin: 0; position: relative; }
.simb__vista img { width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: 999px 999px 0 0; transition: opacity .35s; }
.simb__vista img.cambiando { opacity: 0; }
.simb__vista figcaption { margin-top: 1.2rem; font: italic 400 1.3rem/1.4 var(--serif); color: var(--adc-texto-suave); max-width: 36ch; min-height: 3.6em; }

/* Sobre pedido: banda de llamada a la acción */
.pedido { background: var(--adc-noche); color: var(--adc-sobre-noche); padding-block: clamp(4rem, 8vw, 7rem); position: relative; overflow: hidden; }
.pedido::before { content: ""; position: absolute; inset: 0; background: url("../img/detalle/oro.jpg") center/cover; opacity: .12; mix-blend-mode: luminosity; }
.pedido__rejilla { position: relative; display: grid; gap: 2.5rem; align-items: end; }
@media (min-width: 900px) { .pedido__rejilla { grid-template-columns: 1.3fr .7fr; gap: 5rem; } }
.pedido h2 { color: var(--adc-sobre-noche); }
.pedido p { color: var(--adc-sobre-noche-suave); font-size: 1.1rem; }
.pedido__accion { display: grid; gap: 1.2rem; justify-items: start; }
.pedido__tiempo { font: italic 1.05rem var(--serif); margin: .4rem 0 0; }

/* Galería */
.filtro { display: flex; flex-wrap: wrap; gap: .2rem 1.4rem; }
.filtro button { background: none; border: 0; padding: .4rem 0; font: italic 400 1.2rem var(--serif); color: var(--adc-texto-tenue); cursor: pointer; border-bottom: 1px solid transparent; }
.filtro button[aria-pressed="true"] { color: var(--adc-texto); border-color: var(--rubrica); }
.galeria { display: grid; gap: 1rem; grid-template-columns: repeat(2, 1fr); grid-auto-rows: 180px; grid-auto-flow: dense; }
@media (min-width: 900px) { .galeria { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 240px; gap: 1.2rem; } }
.galeria__item { padding: 0; border: 0; background: var(--adc-superficie-hundida); overflow: hidden; cursor: zoom-in; }
.galeria__item[hidden] { display: none; }
.galeria__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s cubic-bezier(.2,.7,.2,1); }
.galeria__item:hover img { transform: scale(1.04); }
.g-alto { grid-row: span 2; }
@media (min-width: 900px) { .g-ancho { grid-column: span 2; } }
.galeria__mas { margin-top: 2rem; text-align: right; max-width: none; }

.visor { border: 0; padding: 0; background: transparent; width: 100vw; height: 100vh; max-width: none; max-height: none; }
.visor::backdrop { background: rgba(18,14,11,.94); }
.visor img { position: absolute; inset: 0; margin: auto; max-width: 90vw; max-height: 80vh; }
.visor p { position: absolute; left: 0; right: 0; bottom: 4vh; text-align: center; margin: auto; color: var(--adc-color-piedra-200); font: italic 1.15rem var(--serif); }
.visor__b { position: fixed; width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgba(255,255,255,.3); background: none; color: #fff; font-size: 1.4rem; cursor: pointer; }
.visor__cerrar { top: 1.2rem; right: 1.2rem; font-size: 2rem; }
.visor__ant { left: 1.2rem; top: 50%; } .visor__sig { right: 1.2rem; top: 50%; }

/* Encargo */
.encargo { background: var(--adc-superficie-alt); }
.encargo__rejilla { display: grid; gap: 3.5rem; align-items: start; }
@media (min-width: 960px) { .encargo__rejilla { grid-template-columns: .9fr 1.1fr; gap: 5rem; } .encargo__rejilla > div { position: sticky; top: 110px; } }
.encargo__intro { font: 400 1.3rem/1.45 var(--serif); color: var(--adc-texto-suave); }
.pasos { list-style: none; counter-reset: p; padding: 0; margin: 2rem 0; }
.pasos li { counter-increment: p; position: relative; padding: 1rem 0 1rem 2.8rem; border-top: 1px solid var(--regla); color: var(--adc-texto-suave); }
.pasos li::before { content: counter(p, upper-roman) "."; position: absolute; left: 0; top: 1rem; font: 500 1.15rem/1.5 var(--serif); color: var(--rubrica); }
.pasos b { color: var(--adc-texto); font-weight: 600; }
.encargo__nota { font: italic 1.1rem var(--serif); color: var(--adc-texto-suave); }
.hoja-form { background: var(--adc-superficie); padding: clamp(1.6rem, 4vw, 3rem); box-shadow: 0 1px 0 var(--regla), 0 30px 60px -30px rgba(28,22,18,.25); display: grid; gap: 1.5rem; }
.campo { display: grid; gap: .3rem; }
.campo > span { font: 600 .9rem/1 var(--versal); letter-spacing: .12em; text-transform: lowercase; color: var(--adc-texto-suave); }
.campo input, .campo select, .campo textarea { width: 100%; border: 0; border-bottom: 1px solid var(--adc-borde-fuerte); background: transparent; padding: .7rem 0; font: 400 1.2rem var(--serif); color: var(--adc-texto); border-radius: 0; transition: border-color .25s; }
.campo select { appearance: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%23665B4E' stroke-width='1.4'%3E%3Cpath d='m3 5 4 4 4-4'/%3E%3C/svg%3E") right center no-repeat; }
.campo textarea { resize: vertical; min-height: 4.5rem; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: var(--rubrica); }
.campo input[aria-invalid="true"] { border-color: var(--adc-peligro); }
.campo small, .hoja-form__pie { color: var(--adc-texto-tenue); font-size: .88rem; }
.campo__error { color: var(--adc-peligro); font-size: .9rem; font-style: normal; }
.campo__error:empty { display: none; }
.campo-2 { display: grid; gap: 1.5rem; }
@media (min-width: 560px) { .campo-2 { grid-template-columns: 1fr 1fr; } }
.hoja-form__pie { text-align: center; }

/* Taller */
.taller__rejilla { display: grid; gap: 3rem; align-items: start; }
@media (min-width: 900px) { .taller__rejilla { grid-template-columns: .8fr 1.2fr; gap: 5rem; } }
.taller__foto { margin: 0; }
.taller__foto img { width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: 999px 999px 0 0; }
.taller__dir { font: italic 1.3rem var(--serif); color: var(--adc-texto-suave); margin-top: -.6rem; }
.taller__nota { color: var(--adc-texto-suave); }
.taller__acciones { display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; margin: 1.8rem 0 2.6rem; }
.faq { border-top: 1px solid var(--regla); }
.faq:last-of-type { border-bottom: 1px solid var(--regla); }
.faq summary { list-style: none; cursor: pointer; padding: 1.1rem 0; font: 500 1.35rem var(--serif); display: flex; justify-content: space-between; gap: 1rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--rubrica); transition: transform .3s; }
.faq[open] summary::after { transform: rotate(45deg); }
.faq p { margin: 0 0 1.2rem; color: var(--adc-texto-suave); }

/* Pie */
.pie { border-top: 1px solid var(--regla); padding-block: 4rem 2rem; }
.pie__fila { display: grid; gap: 2rem; align-items: end; }
@media (min-width: 768px) { .pie__fila { grid-template-columns: 1.6fr 1fr 1fr; } }
.pie__fila p { color: var(--adc-texto-suave); margin: 0; }
.pie__legal { display: flex; justify-content: space-between; gap: 1rem; margin-top: 3rem; padding-top: 1.4rem; border-top: 1px solid var(--regla); color: var(--adc-texto-tenue); max-width: none; }
.pie__amdg { font: italic 1rem var(--serif); color: var(--rubrica); }


/* Aparición al hacer scroll */
.revelar { opacity: 0; transform: translateY(18px); transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); }
.revelar.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .revelar { opacity: 1; transform: none; }
  .portada__titulo span, .portada__foto, .cinta { animation: none; }
}

/* Banda editorial a sangre */
.editorial { position: relative; height: clamp(420px, 80vh, 760px); overflow: hidden; display: grid; place-items: center; text-align: center; color: var(--adc-sobre-noche); }
.editorial img { position: absolute; inset: 0; width: 100%; height: 120%; object-fit: cover; transform: translateY(var(--px, 0)); will-change: transform; }
.editorial::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(12,9,7,.35), rgba(12,9,7,.7)); }
.editorial blockquote { position: relative; z-index: 1; margin: 0; }
.editorial p { font: 400 clamp(2.2rem, 5vw, 4.6rem)/1.05 var(--serif); margin: 0 auto; max-width: none; color: var(--adc-sobre-noche); }
.editorial em { color: var(--adc-sobre-noche-acento); }
.encargo .enlace { margin-top: .4rem; }
.encargo__nota { margin-top: 1.6rem; }

/* ── Bucles infinitos (galería y franja) ─────────────────── */
.bucle, .franja { overflow: hidden; position: relative; }
.bucle__pista { display: flex; align-items: flex-start; width: max-content; will-change: transform; }
.galeria-sec { padding-bottom: clamp(3rem, 6vw, 5rem); }
.galeria-sec__nota { font: italic 1.1rem var(--serif); color: var(--adc-texto-suave); margin: 0; }
.bucle { padding-block: .6rem; cursor: grab; touch-action: pan-y; user-select: none; }
.bucle.arrastrando { cursor: grabbing; }
.bucle::before, .bucle::after { content: ""; position: absolute; top: 0; bottom: 0; width: min(12vw, 140px); z-index: 2; pointer-events: none; }
.bucle::before { left: 0; background: linear-gradient(90deg, var(--adc-fondo), transparent); }
.bucle::after { right: 0; background: linear-gradient(-90deg, var(--adc-fondo), transparent); }
.bucle__foto { margin: 0 .6rem; flex: none; position: relative; }
.bucle__foto button { display: block; padding: 0; border: 0; background: var(--adc-superficie-hundida); cursor: zoom-in; overflow: hidden; }
.bucle__foto img { display: block; height: clamp(220px, 30vw, 380px); width: auto; transition: transform 1s cubic-bezier(.2,.7,.2,1), filter .6s; filter: saturate(.92); pointer-events: none; }
.bucle--b .bucle__foto img { height: clamp(180px, 24vw, 300px); }
.bucle__foto:hover img { transform: scale(1.05); filter: saturate(1.05); }
.bucle__foto figcaption { position: absolute; left: .9rem; right: .9rem; bottom: .8rem; font: italic 1rem/1.2 var(--serif); color: #fff; text-shadow: 0 1px 12px rgba(0,0,0,.6); opacity: 0; transform: translateY(6px); transition: opacity .4s, transform .4s; pointer-events: none; }
.bucle__foto:hover figcaption, .bucle__foto:focus-within figcaption { opacity: 1; transform: none; }
.bucle__foto:nth-child(3n+2) { margin-top: 1.6rem; }
.bucle--b .bucle__foto:nth-child(3n+1) { margin-top: 1.2rem; }
.franja { border-block: 1px solid var(--regla); padding: 1.1rem 0; }
.franja span { font: 400 clamp(1.4rem, 2.4vw, 2.1rem)/1 var(--serif); padding-left: 3rem; white-space: nowrap; display: inline-flex; align-items: center; gap: 3rem; }
.franja span::after { content: "✠"; font-size: .55em; color: var(--rubrica); }
.franja span:nth-child(even) { font-style: italic; color: var(--adc-texto-suave); }
/* ── Manifiesto: palabras que se encienden con el scroll (Apple) ── */
.manifiesto { padding-block: clamp(5rem, 12vw, 10rem); }
.manifiesto__texto { font: 400 clamp(1.9rem, 4.2vw, 3.6rem)/1.18 var(--serif); max-width: 24ch; margin-inline: auto; text-align: center; letter-spacing: -.01em; }
.manifiesto__texto span { color: color-mix(in srgb, var(--adc-texto) 16%, transparent); transition: color .35s ease; }
.manifiesto__texto span.on { color: var(--adc-texto); }
.manifiesto__texto span.on.r { color: var(--rubrica); font-style: italic; }

/* ── Degradado vivo en el color del tiempo litúrgico (Stripe) ── */
.vivo { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; filter: blur(60px) saturate(1.2); opacity: .55; }
.vivo i { position: absolute; width: 60%; aspect-ratio: 1; border-radius: 50%; mix-blend-mode: screen; animation: deriva 22s ease-in-out infinite alternate; }
.vivo i:nth-child(1) { background: var(--tiempo); left: -10%; top: -20%; }
.vivo i:nth-child(2) { background: var(--adc-color-oro-400); right: -15%; top: 10%; animation-duration: 28s; animation-delay: -6s; }
.vivo i:nth-child(3) { background: var(--adc-color-carmesi-500); left: 30%; bottom: -35%; animation-duration: 34s; animation-delay: -12s; }
@keyframes deriva { 0% { transform: translate(0,0) scale(1); } 50% { transform: translate(12%, 10%) scale(1.15); } 100% { transform: translate(-8%, 14%) scale(.95); } }
.pedido .vivo { opacity: .45; }
.pedido__rejilla { z-index: 1; }
.vivo--suave { inset: -12% -18% 6%; opacity: .35; filter: blur(70px); z-index: -1; }
.vivo--suave i { mix-blend-mode: normal; }
.portada__foto { isolation: isolate; }

/* ── Creaciones: destello de hilo e inclinación 3D ── */
.pieza a { perspective: 900px; }
.pieza__marco { position: relative; overflow: hidden; transform-style: preserve-3d; transition: transform .5s cubic-bezier(.2,.7,.2,1); will-change: transform; margin-bottom: .8rem; }
.pieza__marco img { margin-bottom: 0; }
.pieza__marco::after { content: ""; position: absolute; inset: -40%; background: linear-gradient(115deg, transparent 42%, rgba(255,236,190,.55) 50%, transparent 58%); transform: translateX(-60%); transition: transform 1.1s cubic-bezier(.2,.7,.2,1); pointer-events: none; mix-blend-mode: soft-light; }
.pieza a:hover .pieza__marco::after { transform: translateX(60%); }

/* ── Fotos que se revelan desde un marco ── */
.marco-revela { clip-path: inset(8% 8% 8% 8%); transition: clip-path 1.4s cubic-bezier(.2,.7,.2,1); }
.marco-revela.visible { clip-path: inset(0 0 0 0); }

/* ── Rueda que gira con el scroll ── */
.rueda [data-rueda-svg] { transition: transform .15s linear; }

@media (prefers-reduced-motion: reduce) {
  .manifiesto__texto span { color: var(--adc-texto); }
  .vivo i { animation: none; }
  .marco-revela { clip-path: none; }
  .bucle { overflow-x: auto; scrollbar-width: none; }
  .franja .bucle__pista { flex-wrap: wrap; width: auto; justify-content: center; }
}

/* ── Creaciones fijas: el riel avanza con el scroll vertical ── */
#piezas.pin { padding-block: 0; }
#piezas.pin .pin__escena { position: sticky; top: 68px; height: calc(100vh - 68px); display: flex; flex-direction: column; justify-content: center; overflow: hidden; padding-block: 2rem; }
#piezas.pin .riel { overflow: visible; scroll-snap-type: none; cursor: default; will-change: transform; grid-auto-columns: min(70vw, 330px); }
#piezas.pin .pieza img { max-height: 52vh; }
@media (max-height: 760px) { #piezas.pin .sec__cabeza { margin-bottom: 1.2rem; } #piezas.pin h2 { font-size: clamp(1.8rem, 3vw, 2.6rem); } }
.riel__flechas button:disabled { opacity: .3; cursor: default; }

/* ── Encargo: dos caminos ── */
.contacto2 { display: grid; gap: 1rem; align-content: start; }
.contacto2__opciones { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.contacto2__opciones button { text-align: left; padding: 1rem 1.2rem; border: 1px solid var(--regla); background: var(--adc-superficie); cursor: pointer; display: grid; gap: .2rem; font: inherit; color: var(--adc-texto-suave); transition: border-color .2s, box-shadow .2s, color .2s; }
.contacto2__opciones b { font: 500 1.3rem/1.1 var(--serif); color: var(--adc-texto); }
.contacto2__opciones span { font-size: .9rem; }
.contacto2__opciones button[aria-selected="true"] { border-color: var(--rubrica); box-shadow: inset 0 -3px 0 var(--rubrica); }
.campo small { font-weight: 400; }
.campo--archivo input { border-bottom: 0; font: inherit; font-size: .95rem; padding: .3rem 0; }
.campo--radios { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; align-items: center; }
.campo--radios > span { width: 100%; }
.campo--radios label { display: inline-flex; gap: .4rem; align-items: center; font-size: 1rem; cursor: pointer; }
.campo--radios input, .campo--acepto input { accent-color: var(--rubrica); width: 18px; height: 18px; }
.campo--acepto { display: flex; gap: .6rem; align-items: flex-start; font-size: .92rem; color: var(--adc-texto-suave); }
.campo--trampa { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
[data-error] a { color: var(--adc-peligro); font-weight: 600; }
.contacto2__exito h3 { font: 500 2rem/1.1 var(--serif); margin: 0 0 .6rem; }
.contacto2__directo { gap: .7rem; }
.directo { display: grid; gap: .2rem; padding: 1.1rem 1.3rem; border: 1px solid var(--regla); text-decoration: none; color: var(--adc-texto); transition: border-color .2s, transform .2s, background .2s; position: relative; }
.directo::after { content: "→"; position: absolute; right: 1.2rem; top: 50%; translate: 0 -50%; color: var(--rubrica); transition: transform .2s; }
.directo:hover { border-color: var(--rubrica); background: var(--adc-fondo); }
.directo:hover::after { transform: translateX(4px); }
.directo b { font: 500 1.35rem/1.1 var(--serif); }
.directo span { color: var(--adc-texto-suave); font-size: .95rem; }
.directo:first-child { background: var(--adc-texto); color: var(--adc-fondo); border-color: var(--adc-texto); }
.directo:first-child span { color: color-mix(in srgb, var(--adc-fondo) 75%, transparent); }
.directo:first-child::after { color: var(--adc-color-oro-300); }

/* Barra de encargo en celular */
.barra-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 95; display: none; gap: .6rem; padding: .7rem 1rem calc(.7rem + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--adc-fondo) 94%, transparent); backdrop-filter: blur(10px); border-top: 1px solid var(--regla); }
.barra-cta .boton { flex: 1; min-height: 48px; }
.barra-cta__wa { display: grid; place-items: center; padding: 0 1.1rem; border: 1px solid var(--adc-texto); color: var(--adc-texto); text-decoration: none; font-weight: 600; font-size: .95rem; }
@media (max-width: 767px) { .barra-cta:not([hidden]) { display: flex; } .barra-cta:not([hidden]) ~ .wa-flotante { display: none; } }

/* ── Insignias ── */
.insignia-mayor { display: grid; gap: 2.5rem; align-items: center; margin-top: 2rem; }
@media (min-width: 960px) { .insignia-mayor { grid-template-columns: 1.05fr .95fr; gap: 5rem; } }
.insignia-mayor__fotos { display: grid; gap: .8rem; }
.insignia-mayor__principal { margin: 0; }
.insignia-mayor__principal img { width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: 999px 999px 0 0; }
.insignia-mayor__serie { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; }
.insignia-mayor__serie img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.insignia-mayor__texto h3 { font: 400 clamp(2.4rem, 4vw, 3.6rem)/1 var(--serif); margin: 0 0 1.4rem; }
.insignia-mayor__texto p { font-size: 1.1rem; }
.insignias__lista { list-style: none; padding: 0; margin-top: 4rem; display: grid; gap: 2rem 1.5rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); }
.insignias__lista li { display: grid; gap: .3rem; align-content: start; }
.insignias__lista img { width: 100%; aspect-ratio: 3/4; object-fit: cover; margin-bottom: .6rem; }
.insignias__lista b { font: 500 1.35rem/1.15 var(--serif); }
.insignias__lista span { color: var(--adc-texto-suave); font-size: .95rem; }

/* ── Mapa de lugares ── */
.mapa-sec { background: var(--adc-superficie-alt); }
.mapa-sec__rejilla { display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 960px) { .mapa-sec__rejilla { grid-template-columns: .8fr 1.2fr; gap: 4rem; } }
.mapa-lugares { height: clamp(360px, 60vh, 560px); background: var(--adc-superficie-hundida); border: 1px solid var(--regla); }
.mapa-lugares .leaflet-tile-pane { filter: grayscale(1) sepia(.35) contrast(.92) brightness(1.06); }
.lugares { list-style: none; padding: 0; margin: 1.6rem 0 0; border-top: 1px solid var(--regla); }
.lugares li { border-bottom: 1px solid var(--regla); }
.lugares button, .lugares__pend { display: grid; gap: .2rem; width: 100%; text-align: left; background: none; border: 0; padding: .9rem 0; font: inherit; color: var(--adc-texto); cursor: pointer; }
.lugares b { font: 500 1.3rem/1.15 var(--serif); }
.lugares small { font: italic .95rem var(--serif); color: var(--adc-texto-suave); }
.lugares span { font-size: .92rem; color: var(--adc-texto-suave); }
.lugares button:hover b { color: var(--rubrica); }
.lugares__pend { cursor: default; opacity: .7; }
.lugares__pend b::after { content: " · por ubicar"; font: italic .95rem var(--serif); color: var(--adc-texto-tenue); }
.marca { display: block; width: 22px; height: 22px; border-radius: 50%; background: var(--rubrica); border: 3px solid var(--adc-fondo); box-shadow: 0 0 0 1px var(--rubrica), 0 4px 10px rgba(0,0,0,.3); }
.marca--taller { background: var(--adc-color-naranja-500); box-shadow: 0 0 0 1px var(--adc-color-naranja-700), 0 0 0 8px color-mix(in srgb, var(--adc-color-naranja-500) 25%, transparent); }
.pop { display: grid; gap: .25rem; font-family: var(--adc-fuente-texto); }
.pop img { width: 100%; aspect-ratio: 4/3; object-fit: cover; margin-bottom: .3rem; }
.pop b { font: 600 1.05rem var(--serif); } .pop small { color: #857867; } .pop span { font-size: .85rem; }
.leaflet-container { font-family: var(--adc-fuente-texto); }