/* Oración Diaria · web. Los colores y la letra con serifa de la app, con las pinturas como protagonistas. */
:root {
  --papel: #f7f3ec; --tarjeta: #fff; --tinta: #3f3230; --gris: #7b7370; --linea: #e8dfd2;
  --azul: #3d5fd9; --azul-osc: #2f4cb8; --oro: #a8802f; --oro-claro: #e2b84a; --marron: #2e2018; --crema: #f4e7d2;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Noto Serif", serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --sombra: 0 1px 2px rgba(60, 40, 20, .06), 0 8px 24px rgba(60, 40, 20, .08);
  --sombra-alta: 0 2px 4px rgba(60, 40, 20, .08), 0 16px 36px rgba(60, 40, 20, .16);
}
@media (prefers-color-scheme: dark) {
  :root { --papel: #1a1714; --tarjeta: #26221e; --tinta: #ece5da; --gris: #a59c93; --linea: #3a332c; --azul: #93a8f4; --azul-osc: #b0c0f8; --oro: #d9b25c; --crema: #3a3026;
    --sombra: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .3); --sombra-alta: 0 16px 36px rgba(0, 0, 0, .5); }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 80px; }
body { margin: 0; background: var(--papel); color: var(--tinta); font: 17px/1.6 var(--sans); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--azul); }
h1, h2, h3 { font-family: var(--serif); line-height: 1.18; margin: 0; }
.ancho { width: 100%; max-width: 760px; margin: 0 auto; padding: 0 20px; }
.ancho.amplio { max-width: 1120px; }
.saltar { position: absolute; left: -999px; }
.saltar:focus { left: 12px; top: 12px; background: var(--tarjeta); padding: 8px 12px; z-index: 10; }
:focus-visible { outline: 3px solid var(--oro-claro); outline-offset: 2px; }

/* ---------- Cabecera */
.cabecera { background: color-mix(in srgb, var(--papel) 88%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--linea); position: sticky; top: 0; z-index: 5; }
.cabecera .fila { display: flex; align-items: center; gap: 16px; max-width: 1120px; min-height: 64px; flex-wrap: wrap; }
.marca { display: flex; align-items: center; gap: 11px; text-decoration: none; color: var(--tinta); font: bold 20px var(--serif); margin-right: auto; }
.marca img { border-radius: 10px; box-shadow: var(--sombra); }
.menu { display: flex; gap: 2px; flex-wrap: wrap; }
.menu a { text-decoration: none; color: var(--tinta); font-size: 15px; padding: 8px 13px; border-radius: 999px; transition: background .15s; }
.menu a:hover { background: var(--crema); }
.menu a[aria-current] { background: var(--marron); color: #fff; }
.menu-boton { display: none; background: none; border: 0; font-size: 26px; color: var(--tinta); padding: 6px 10px; cursor: pointer; }
@media (max-width: 800px) {
  .menu-boton { display: block; }
  .menu { display: none; width: 100%; flex-direction: column; padding-bottom: 12px; }
  .menu.abierto { display: flex; }
  .menu a { padding: 12px 14px; font-size: 17px; }
}

/* ---------- Aviso de la app (solo Android): encima de la portada */
.aviso-app { display: flex; align-items: center; gap: 12px; padding: 14px 4px 14px 14px; color: #fff;
  background: linear-gradient(100deg, #2a1c12, var(--marron) 55%, #6b4a24); border-top: 3px solid var(--oro-claro); border-bottom: 1px solid rgba(0, 0, 0, .35); box-shadow: 0 6px 18px rgba(30, 18, 8, .35); position: relative; z-index: 2; }
.aviso-app[hidden] { display: none; }
.aviso-app .icono { width: 54px; height: 54px; border-radius: 13px; flex: none; box-shadow: 0 2px 8px rgba(0, 0, 0, .45); }
.aviso-app p { margin: 0; flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; line-height: 1.25; }
.aviso-app strong { font: bold 17px/1.2 var(--serif); text-wrap: balance; }
.aviso-app span { font-size: 13px; color: var(--oro-claro); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aviso-app .insignia { flex: none; line-height: 0; border-radius: 8px; animation: aviso-latido 2.4s ease-in-out 1s 3; }
.aviso-app .insignia img { height: 48px; width: auto; }
.aviso-app button { flex: none; width: 34px; height: 44px; border: 0; background: none; color: rgba(255, 255, 255, .6); font-size: 24px; line-height: 1; cursor: pointer; padding: 0; }
@keyframes aviso-latido { 50% { transform: scale(1.07); box-shadow: 0 0 0 6px rgba(217, 178, 92, .28); } }
@media (prefers-reduced-motion: reduce) { .aviso-app .insignia { animation: none; } }
@media (max-width: 380px) { .aviso-app { gap: 9px; padding-left: 10px; } .aviso-app .icono { width: 44px; height: 44px; } .aviso-app .insignia img { height: 40px; } .aviso-app strong { font-size: 15px; } }

/* ---------- Portadas */
.portada { position: relative; background: var(--marron) center 30% / cover no-repeat; color: #fff; overflow: hidden; }
.portada::before { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(28, 18, 10, .30) 0%, rgba(28, 18, 10, .62) 55%, rgba(28, 18, 10, .90) 100%); }
/* Borde inferior curvo: la hoja de contenido "monta" sobre la foto, como en la app. */
.portada::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 26px; background: var(--papel); border-radius: 26px 26px 0 0; }
.portada-pintura { background-position: center 16%; }
.portada .ancho { position: relative; padding-top: 72px; padding-bottom: 70px; }
.portada h1 { font-size: clamp(32px, 6vw, 50px); text-wrap: balance; text-shadow: 0 2px 18px rgba(0, 0, 0, .35); }
.portada .rotulo { margin: 0 0 12px; color: var(--oro-claro); font: 13px var(--serif); letter-spacing: 3.5px; text-transform: uppercase; }
.portada .linea { margin: 12px 0 0; color: rgba(255, 255, 255, .88); font: 18px var(--serif); }
.portada-inicio { text-align: center; }
.portada-inicio .ancho { padding-top: clamp(72px, 12vw, 130px); padding-bottom: clamp(84px, 12vw, 140px); }
.portada-inicio h1 { font-size: clamp(36px, 7vw, 62px); }
.versiculo { margin: 26px auto 0; max-width: 620px; font: italic 22px/1.5 var(--serif); }
.versiculo cite { display: block; margin-top: 10px; font: normal 14px var(--serif); letter-spacing: 2px; text-transform: uppercase; color: var(--oro-claro); }
.versiculo.claro { margin: 0 0 28px; max-width: none; padding: 18px 22px; background: var(--tarjeta); border-left: 4px solid var(--oro-claro); border-radius: 0 16px 16px 0; font-size: 19px; box-shadow: var(--sombra); }
.versiculo.claro cite { color: var(--oro); }
.botones { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin: 32px 0 0; }

.migas { font-size: 14px; color: var(--gris); padding-top: 14px; padding-bottom: 14px; max-width: 1120px; }
.migas a { color: var(--gris); text-decoration: none; } .migas a:hover { text-decoration: underline; }

/* ---------- Botones */
.acciones { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0 14px; }
.acciones button, .boton { font: 600 15px var(--sans); border-radius: 999px; padding: 11px 20px; cursor: pointer; border: 1px solid var(--linea);
  background: var(--tarjeta); color: var(--tinta); text-decoration: none; display: inline-block; transition: transform .12s, box-shadow .12s, background .12s; }
.acciones button:hover, .boton:hover { transform: translateY(-1px); box-shadow: var(--sombra); }
.acciones button[data-accion="escuchar"], .boton { background: var(--azul); border-color: var(--azul); color: #fff; }
.acciones button[data-accion="escuchar"]:hover, .boton:hover { background: var(--azul-osc); }
.boton.claro { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .55); color: #fff; backdrop-filter: blur(4px); }
.boton.claro:hover { background: rgba(255, 255, 255, .26); }
@media (prefers-color-scheme: dark) { .acciones button[data-accion="escuchar"], .boton:not(.claro) { color: #14110e; } }

/* ---------- Títulos de sección */
.seccion { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 44px 0 16px; }
.seccion h2 { font-size: 26px; position: relative; padding-left: 16px; }
.seccion h2::before { content: ""; position: absolute; left: 0; top: .18em; bottom: .18em; width: 4px; border-radius: 4px; background: var(--oro-claro); }
.seccion a { font-size: 15px; font-weight: 600; text-decoration: none; white-space: nowrap; }

/* ---------- Tarjetas */
.rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.tarjeta { position: relative; display: flex; gap: 14px; align-items: center; background: var(--tarjeta); border: 1px solid var(--linea); border-radius: 18px;
  padding: 16px 40px 16px 18px; text-decoration: none; color: var(--tinta); box-shadow: var(--sombra); transition: transform .15s, box-shadow .15s, border-color .15s; }
.tarjeta::after { content: "›"; position: absolute; right: 16px; top: 50%; transform: translateY(-54%); font-size: 24px; color: var(--oro-claro); transition: right .15s; }
.tarjeta:hover { transform: translateY(-2px); box-shadow: var(--sombra-alta); border-color: var(--oro-claro); }
.tarjeta:hover::after { right: 12px; }
.tarjeta.con-imagen { padding-left: 12px; }
.tarjeta img { width: 68px; height: 80px; object-fit: cover; object-position: center 15%; border-radius: 12px; flex: none; }
.tarjeta span { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.tarjeta small, .tesela small { color: var(--oro); font-size: 11.5px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; }
.tarjeta strong { font: bold 18px/1.3 var(--serif); }
.tarjeta em { font-style: normal; font-size: 14px; color: var(--gris); }

/* ---------- Teselas: la pintura a sangre con el texto encima */
.mosaico { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.mosaico.dos { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); margin-bottom: 16px; }
.mosaico.apaisado { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.tesela { position: relative; display: block; aspect-ratio: 4 / 5; border-radius: 20px; overflow: hidden; text-decoration: none; color: #fff;
  background: var(--marron); box-shadow: var(--sombra); transition: transform .2s, box-shadow .2s; }
.tesela.ancha { aspect-ratio: 16 / 10; }
.mosaico.apaisado .tesela { aspect-ratio: 3 / 2; }
.tesela img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 18%; transition: transform .5s; }
.tesela::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 12, 6, 0) 35%, rgba(20, 12, 6, .55) 62%, rgba(20, 12, 6, .92) 100%); }
.tesela span { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 18px; display: flex; flex-direction: column; gap: 2px; }
.tesela small { color: var(--oro-claro); }
.tesela strong { font: bold 20px/1.2 var(--serif); text-wrap: balance; }
.tesela.ancha strong { font-size: 26px; }
.tesela em { font-style: normal; font-size: 14px; color: rgba(255, 255, 255, .82); }
.tesela:hover { transform: translateY(-3px); box-shadow: var(--sombra-alta); }
.tesela:hover img { transform: scale(1.05); }
@media (max-width: 520px) { .mosaico:not(.dos):not(.apaisado) { grid-template-columns: 1fr 1fr; gap: 12px; } .tesela strong { font-size: 17px; } .tesela span { padding: 14px; } }

/* ---------- Texto */
.texto { padding-top: 22px; padding-bottom: 20px; }
.texto h2 { font-size: 26px; margin: 40px 0 14px; }
.texto h2.limpia { clear: both; }
.entrada { font: 20px/1.6 var(--serif); color: var(--gris); margin: 0 0 26px; }
.cuerpo { font: 19px/1.8 var(--serif); }
.cuerpo.grande { font-size: 21px; }
.cuerpo p { margin: 0 0 20px; text-wrap: pretty; }
.capitular > p:first-child::first-letter { float: left; font: bold 3.4em/.82 var(--serif); color: var(--oro); margin: .08em .1em 0 0; }
.oracion p { margin-bottom: 14px; }
.vr { font-weight: bold; } .vr-V { color: #7e6bc4; } .vr-R { color: #c25a5a; }
.lectura { margin-top: 40px; padding-top: 8px; border-top: 1px solid var(--linea); }
.lectura h2 { margin-top: 26px; }
.texto > .lectura:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.texto > .lectura:first-child h2 { margin-top: 0; }
.cita { color: var(--oro); font: italic 17px var(--serif); margin: -6px 0 20px; }
.dato { background: var(--tarjeta); border: 1px solid var(--linea); border-radius: 14px; padding: 13px 18px; font-size: 16px; box-shadow: var(--sombra); }
.aviso { background: #fdf3dc; color: #5b4310; border-radius: 14px; padding: 14px 18px; }
.menudo { font-size: 13px; color: var(--gris); }
.pintura { margin: 0 0 28px; }
.pintura img { width: 100%; max-height: 560px; object-fit: cover; object-position: center 15%; border-radius: 22px; box-shadow: var(--sombra-alta); }
/* En pantallas anchas la pintura va al lado del texto, no encima. */
@media (min-width: 900px) {
  .ancho.con-pintura { max-width: 1040px; }
  .con-pintura .pintura { float: right; width: 40%; margin: 6px 0 24px 40px; }
  .con-pintura .pintura img { max-height: none; }
  .con-pintura .dias, .con-pintura .lectura { clear: both; }
}
.lista { padding-left: 22px; } .lista li { margin-bottom: 8px; }
.pasos { list-style: none; counter-reset: paso; padding: 0; font-size: 18px; }
.pasos li { counter-increment: paso; position: relative; padding: 0 0 18px 50px; }
.pasos li::before { content: counter(paso); position: absolute; left: 0; top: -2px; width: 34px; height: 34px; border-radius: 50%; background: var(--crema); color: var(--oro);
  font: bold 17px/34px var(--serif); text-align: center; }
details.latin, details.bloque { background: var(--tarjeta); border: 1px solid var(--linea); border-radius: 16px; padding: 14px 18px; margin: 12px 0; box-shadow: var(--sombra); }
summary { cursor: pointer; font-family: var(--serif); font-size: 18px; }
details.bloque summary em { display: block; font: normal 14px var(--sans); color: var(--gris); }
details[open] summary { margin-bottom: 14px; }
.saltos { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; }
.saltos.centro { justify-content: center; margin-top: 18px; }
.saltos a { text-decoration: none; background: var(--tarjeta); border: 1px solid var(--linea); border-radius: 999px; padding: 6px 15px; font-size: 15px; color: var(--tinta); }
.saltos a:hover { border-color: var(--oro-claro); background: var(--crema); }

/* ---------- Índices y pies de artículo */
.mas { margin: 20px 0; clear: both; } .mas a { font-weight: 600; text-decoration: none; }
.indice { list-style: none; padding: 0; margin: 0; columns: 3 260px; column-gap: 28px; }
.indice a { display: block; padding: 8px 0; text-decoration: none; color: var(--tinta); border-bottom: 1px solid var(--linea); break-inside: avoid; }
.indice a:hover { color: var(--azul); }
.indice a span { display: inline-block; width: 30px; color: var(--oro); font-weight: 700; }
.dias { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 40px 0 10px; padding-top: 20px; border-top: 1px solid var(--linea); }
.dias a { text-decoration: none; font-weight: 600; background: var(--tarjeta); border: 1px solid var(--linea); border-radius: 999px; padding: 9px 16px; font-size: 15px; }
.dias a:hover { border-color: var(--oro-claro); }
.citas { padding-top: 26px; columns: 2 340px; column-gap: 18px; }
.citas blockquote { margin: 0 0 18px; break-inside: avoid; background: var(--tarjeta); border: 1px solid var(--linea); border-radius: 18px; padding: 20px 22px; box-shadow: var(--sombra); }
.citas p { margin: 0 0 10px; font: italic 19px/1.6 var(--serif); }
.citas cite { color: var(--oro); font-style: normal; font-size: 14px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }

/* ---------- Llamada a la app y pie */
.caja-app { position: relative; display: flex; align-items: stretch; gap: 32px; overflow: hidden; margin-top: 64px; margin-bottom: 52px; padding: 0 40px;
  background: radial-gradient(120% 140% at 85% 10%, #7a5528 0%, #4a321f 45%, #2a1c12 100%); color: #fff; border-radius: 28px; border: 1px solid rgba(226, 184, 74, .45);
  box-shadow: 0 18px 50px rgba(40, 24, 10, .35); }
.caja-app::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, transparent, var(--oro-claro), transparent); }
.caja-app-texto { flex: 1 1 380px; padding: 40px 0; }
.caja-app .rotulo { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; color: var(--oro-claro); font-size: 12.5px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; }
.caja-app .rotulo img { border-radius: 9px; }
.caja-app h2 { margin: 0; font-size: clamp(27px, 3.6vw, 38px); line-height: 1.15; text-wrap: balance; color: #fff; }
.caja-app ul { list-style: none; margin: 20px 0 0; padding: 0; font-size: 17px; color: rgba(255, 255, 255, .9); }
.caja-app li { position: relative; padding: 0 0 9px 30px; }
.caja-app li::before { content: "✓"; position: absolute; left: 0; top: 2px; width: 20px; height: 20px; border-radius: 50%; background: var(--oro-claro); color: #2e2018; font: bold 13px/20px var(--sans); text-align: center; }
.caja-app .llamada { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 22px 0 0; }
.caja-app .llamada span { color: rgba(255, 255, 255, .75); font-size: 14.5px; font-weight: 600; }
.caja-app .insignia { line-height: 0; border-radius: 10px; transition: transform .12s, box-shadow .12s; box-shadow: 0 6px 20px rgba(0, 0, 0, .4); }
.caja-app .insignia img { height: 66px; width: auto; }
.caja-app .insignia:hover { transform: scale(1.05); box-shadow: 0 0 0 5px rgba(226, 184, 74, .35), 0 6px 20px rgba(0, 0, 0, .4); }
.caja-app .movil { flex: none; align-self: flex-end; width: 250px; height: 390px; object-fit: cover; object-position: top; margin-top: 36px; border: 7px solid #17100a; border-bottom: 0; border-radius: 34px 34px 0 0; box-shadow: 0 0 40px rgba(0, 0, 0, .5); }
@media (max-width: 760px) {
  .caja-app { padding: 0 22px; margin-top: 48px; border-radius: 22px; } .caja-app-texto { padding: 30px 0; } .caja-app .movil { display: none; }
  .caja-app ul { font-size: 16px; } .caja-app .llamada { flex-direction: column; align-items: stretch; text-align: center; gap: 10px; }
  .caja-app .insignia { align-self: center; } .caja-app .insignia img { height: 70px; }
}
.pie { background: var(--marron); color: #e9dfd0; padding: 44px 0 26px; }
.pie .columnas { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 28px; max-width: 1120px; }
.pie h2 { font: 700 13px var(--sans); letter-spacing: 2px; text-transform: uppercase; color: var(--oro-claro); margin-bottom: 10px; }
.pie a { display: block; color: #e9dfd0; text-decoration: none; padding: 5px 0; font-size: 15px; }
.pie a:hover { color: #fff; text-decoration: underline; }
.pie .menudo { max-width: 1120px; margin-top: 30px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .12); color: #b8aa96; }
.pie .menudo a { display: inline; color: #b8aa96; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }

/* Páginas propias de la web: catequesis, salmos y calendario */
.definiciones { margin: 0 0 26px; }
.definiciones dt { font: bold 19px/1.35 var(--serif); margin-top: 18px; }
.definiciones dd { margin: 4px 0 0; color: var(--gris); font-size: 17px; }
.versos { padding-left: 34px; }
.versos li { margin-bottom: 12px; text-wrap: pretty; }
.versos li::marker { color: var(--oro); font: bold 14px var(--sans, sans-serif); }
.fechas { list-style: none; padding: 0; }
.fechas li { padding: 9px 0; border-bottom: 1px solid var(--linea); margin: 0; }
.texto h3 { font: bold 19px var(--serif); margin: 26px 0 8px; color: var(--oro); }

/* El enlace a la app en el menú, y la página /app/ */
.menu a[href$="/app/"] { background: var(--oro-claro); color: #2e2018; font-weight: 700; }
.menu a[href$="/app/"]:hover { background: #f0cb6a; }
.caja-app .llamada a:not(.insignia) { color: var(--oro-claro); }
.insignia { display: inline-block; line-height: 0; border-radius: 10px; transition: transform .12s, box-shadow .12s; }
.insignia img { width: auto; }
.insignia:hover { transform: scale(1.05); box-shadow: 0 0 0 5px rgba(226, 184, 74, .35); }
.llamada { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.llamada.centro { justify-content: center; margin-top: 30px; }
.movil { border: 7px solid #17100a; border-radius: 34px; box-shadow: 0 18px 50px rgba(30, 18, 8, .35); height: auto; }
.app-hero { position: relative; background: #2a1c12 center 30% / cover; color: #fff; overflow: hidden; }
.app-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(28, 17, 9, .94) 0%, rgba(28, 17, 9, .82) 50%, rgba(28, 17, 9, .5) 100%); }
.app-hero .ancho { position: relative; display: flex; align-items: flex-end; gap: 48px; padding-top: 56px; }
.app-hero .ancho > div { flex: 1; padding-bottom: 64px; }
.app-hero .rotulo { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; color: var(--oro-claro); font-size: 13px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; }
.app-hero .rotulo img { border-radius: 11px; }
.app-hero h1 { font-size: clamp(34px, 5.4vw, 58px); line-height: 1.08; text-wrap: balance; }
.app-hero .linea { font: 21px/1.5 var(--serif); color: rgba(255, 255, 255, .88); margin: 18px 0 30px; max-width: 34em; }
.app-hero .llamada span { color: rgba(255, 255, 255, .8); font-weight: 600; font-size: 15px; }
.app-hero .insignia img { height: 76px; }
.app-hero .movil { flex: none; width: 290px; height: 470px; object-fit: cover; object-position: top; border-bottom: 0; border-radius: 38px 38px 0 0; }
.app-datos { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; padding: 0; margin: 40px 0 10px; text-align: center; color: var(--gris); font-size: 15px; }
.app-datos li { background: var(--tarjeta); border: 1px solid var(--linea); border-radius: 18px; padding: 18px 10px; box-shadow: var(--sombra); }
.app-datos strong { display: block; font: bold 36px/1.1 var(--serif); color: var(--oro); }
.app-fila { display: flex; align-items: center; gap: 56px; margin: 64px auto; max-width: 900px; }
.app-fila.al-reves { flex-direction: row-reverse; }
.app-fila .movil { flex: none; width: 250px; }
.app-fila h2 { font-size: clamp(26px, 3.4vw, 34px); text-wrap: balance; }
.app-fila p { font: 19px/1.65 var(--serif); margin: 14px 0 18px; }
.marcas { list-style: none; margin: 0; padding: 0; }
.marcas li { position: relative; padding: 0 0 9px 30px; }
.marcas li::before { content: "✓"; position: absolute; left: 0; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--oro-claro); color: #2e2018; font: bold 13px/20px var(--sans); text-align: center; }
.app-cierre { text-align: center; margin: 72px 0 0; padding: 52px 24px; border-radius: 28px; color: #fff; border: 1px solid rgba(226, 184, 74, .45);
  background: radial-gradient(120% 140% at 50% 0%, #7a5528 0%, #4a321f 45%, #2a1c12 100%); box-shadow: 0 18px 50px rgba(40, 24, 10, .35); }
.app-cierre h2 { font-size: clamp(30px, 4.4vw, 44px); color: #fff; }
.app-cierre p { margin: 10px 0 26px; color: rgba(255, 255, 255, .85); font-size: 18px; }
.app-cierre .insignia img { height: 76px; }
.app-preguntas { max-width: 760px; margin: 0 auto 70px; }
.app-preguntas .insignia img { height: 60px; }
@media (max-width: 760px) {
  .app-hero .ancho { flex-direction: column; align-items: stretch; gap: 30px; padding-top: 36px; } .app-hero .ancho > div { padding-bottom: 0; }
  .app-hero .movil { align-self: center; width: 240px; height: 330px; } .app-hero .linea { font-size: 19px; }
  .app-hero .llamada { flex-direction: column; align-items: center; text-align: center; gap: 10px; } .app-hero .insignia img { height: 72px; }
  .app-datos { grid-template-columns: 1fr 1fr; margin-top: 28px; }
  .app-fila, .app-fila.al-reves { flex-direction: column; gap: 26px; margin: 48px auto; } .app-fila .movil { width: 220px; }
}

/* Redes sociales en el pie */
.redes { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 26px; margin-bottom: 0; }
.redes a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 11px; border: 1px solid rgba(255, 255, 255, .25); border-radius: 999px; color: inherit; text-decoration: none; font-size: 14.5px; transition: border-color .15s, color .15s; }
.redes a:hover { border-color: var(--oro-claro); color: var(--oro-claro); }