@import url('https://fonts.googleapis.com/css2?family=Marcellus&family=Spectral:ital,wght@0,300;0,400;0,600;1,400&display=swap');

:root{
  --tinta:#14243D;
  --azul:#0F3D7C;
  --azul-tenue:#5B82B8;
  --papel:#F7F8FA;
  --blanco:#FFFFFF;
  --linea:#E1E6EE;
  --sello:#8C6A2F;
  --gris:#5C6779;
  --ancho:37rem;
}

*{box-sizing:border-box;margin:0;padding:0}
html{font-size:17px;-webkit-text-size-adjust:100%}
body{
  background:var(--papel);color:var(--tinta);
  font-family:'Spectral',Georgia,serif;font-weight:300;
  line-height:1.72;
}
a{color:var(--azul);text-underline-offset:.18em;text-decoration-thickness:.06em}
a:hover{color:var(--tinta)}
:focus-visible{outline:2px solid var(--azul);outline-offset:3px}
img{max-width:100%;height:auto;display:block}

/* ---------- cabecera ---------- */
.cabecera{border-bottom:1px solid var(--linea);background:var(--blanco)}
.banda{max-width:var(--ancho);margin:0 auto;padding:1.5rem 1.5rem .9rem;
  display:flex;align-items:center;gap:1rem}
.marca{display:flex;align-items:center;gap:.85rem;text-decoration:none;color:inherit;flex:1}
.marca img{width:44px;flex:none}
.marca b{display:block;font-family:'Marcellus',serif;font-weight:400;font-size:1.18rem;
  letter-spacing:.07em;text-transform:uppercase;color:var(--azul);line-height:1.2}
.marca i{display:block;font-style:normal;font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gris);margin-top:.25rem}
.social{display:flex;align-items:center;gap:.45rem;flex:none;text-decoration:none;
  color:var(--gris);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  border:1px solid var(--linea);padding:.4rem .75rem;border-radius:2px}
.social:hover{color:var(--azul);border-color:var(--azul)}
.social svg{flex:none}

.menu{max-width:var(--ancho);margin:0 auto;padding:0 1.5rem 1rem;
  display:flex;gap:1.8rem;font-size:.79rem;letter-spacing:.11em;text-transform:uppercase}
.menu a{color:var(--gris);text-decoration:none;padding-bottom:.25rem;
  border-bottom:1px solid transparent}
.menu a:hover,.menu a[aria-current]{color:var(--azul);border-bottom-color:var(--azul)}

/* ---------- contenido ---------- */
main{max-width:var(--ancho);margin:0 auto;padding:3.5rem 1.5rem 4rem}

.migas{font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--gris);margin-bottom:1.1rem}
.migas a{color:var(--gris)}

h1.titulo{
  font-family:'Marcellus',serif;font-weight:400;font-size:2.05rem;
  line-height:1.2;color:var(--tinta);margin-bottom:1.5rem;letter-spacing:.01em;
}

/* sello de procedencia — elemento distintivo */
.sello{
  display:inline-flex;align-items:baseline;gap:.55rem;
  border:1px solid var(--sello);border-radius:2px;
  padding:.42rem .8rem;margin-bottom:2.2rem;
  font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;color:var(--sello);
  font-family:'Spectral',serif;
}
.sello b{font-weight:600;letter-spacing:.1em}
.sello span{opacity:.72;letter-spacing:.05em}

/* el texto de la oración */
.rezo{
  font-size:1.16rem;line-height:1.95;color:var(--tinta);
  border-left:2px solid var(--azul);padding:.2rem 0 .2rem 1.6rem;margin-bottom:2.8rem;
}
.rezo p+p{margin-top:1.1rem}
.rezo.latin{font-style:italic}

.cuerpo h2{
  font-family:'Marcellus',serif;font-weight:400;font-size:1.15rem;
  letter-spacing:.05em;text-transform:uppercase;color:var(--azul);
  margin:2.6rem 0 .9rem;padding-bottom:.45rem;border-bottom:1px solid var(--linea);
}
.cuerpo h3{font-family:'Marcellus',serif;font-weight:400;font-size:1.05rem;margin:1.8rem 0 .6rem}
.cuerpo p{margin-bottom:1.1rem}
.cuerpo ul,.cuerpo ol{margin:0 0 1.1rem 1.3rem}
.cuerpo li{margin-bottom:.4rem}

.aviso{
  background:var(--blanco);border:1px solid var(--linea);border-top:2px solid var(--azul);
  padding:1.3rem 1.5rem;margin:2.4rem 0;font-size:.92rem;color:var(--gris);
}
.aviso b{color:var(--tinta);font-weight:600;display:block;margin-bottom:.4rem;
  font-family:'Marcellus',serif;font-size:.98rem;letter-spacing:.03em}

/* ---------- portada ---------- */
.entrada{
  text-align:center;padding:1rem 0 3.2rem;border-bottom:1px solid var(--linea);margin-bottom:3rem;
}
.entrada img{width:132px;margin:0 auto 1.8rem}
.entrada h2{
  font-family:'Marcellus',serif;font-weight:400;font-size:1.72rem;line-height:1.35;
  color:var(--tinta);margin-bottom:1rem;
}
.entrada p{color:var(--gris);font-size:1.02rem;max-width:29rem;margin:0 auto}

.seccion{margin-bottom:3.2rem}
.seccion>h2{
  font-family:'Marcellus',serif;font-weight:400;font-size:.86rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--azul);
  margin-bottom:1.2rem;
}
.lista{list-style:none;margin:0}
.lista li{border-bottom:1px solid var(--linea)}
.lista li:first-child{border-top:1px solid var(--linea)}
.lista a{
  display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  padding:.85rem .2rem;text-decoration:none;color:var(--tinta);
}
.lista a:hover{background:var(--blanco);color:var(--azul)}
.lista .marca-proc{
  font-size:.66rem;letter-spacing:.11em;text-transform:uppercase;color:var(--sello);
  flex:none;opacity:.8;
}
.mas{font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;display:inline-block;margin-top:1rem}

/* ---------- testimonios ---------- */
.testimonio{border-left:2px solid var(--linea);padding-left:1.4rem;margin-bottom:2.4rem}
.testimonio p{font-size:1.04rem;margin-bottom:.6rem}
.testimonio cite{font-style:normal;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--gris)}

.forma{background:var(--blanco);border:1px solid var(--linea);padding:1.8rem;margin-top:2.5rem}
.forma h2{font-family:'Marcellus',serif;font-weight:400;font-size:1.1rem;margin-bottom:.5rem}
.forma>p{font-size:.9rem;color:var(--gris);margin-bottom:1.4rem}
.forma label{display:block;font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gris);margin-bottom:.35rem}
.forma input,.forma textarea{
  width:100%;font-family:'Spectral',serif;font-size:1rem;font-weight:300;color:var(--tinta);
  border:1px solid var(--linea);background:var(--papel);padding:.65rem .8rem;margin-bottom:1.1rem;
}
.forma textarea{min-height:9rem;resize:vertical;line-height:1.6}
.forma input:focus,.forma textarea:focus{border-color:var(--azul);outline:none;background:var(--blanco)}
.forma .miel{position:absolute;left:-9999px}
.boton{
  font-family:'Spectral',serif;font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;
  background:var(--azul);color:#fff;border:0;padding:.85rem 1.8rem;cursor:pointer;
}
.boton:hover{background:var(--tinta);color:#fff}
a.boton,a.boton:hover,a.boton:visited{color:#fff;text-decoration:none}
a.boton.alt,a.boton.alt:visited{color:var(--azul)}
a.consiento{display:flex;gap:.6rem;align-items:flex-start;margin-bottom:1.4rem}
.consiento input{width:auto;margin:.3rem 0 0}
.consiento label{text-transform:none;letter-spacing:0;font-size:.85rem;line-height:1.5}

/* ---------- buscador ---------- */
.sr{position:absolute;left:-9999px}
.menu .lupa{display:inline-flex;align-items:center;gap:.35rem;margin-left:auto}
.buscador input[type=search]{
  width:100%;font-family:'Spectral',serif;font-size:1.12rem;font-weight:300;color:var(--tinta);
  border:0;border-bottom:2px solid var(--azul);background:transparent;
  padding:.7rem .2rem;margin-bottom:.8rem;-webkit-appearance:none}
.buscador input:focus{outline:none;border-bottom-color:var(--tinta)}
#estado{font-size:.78rem;letter-spacing:.09em;text-transform:uppercase;color:var(--gris);
  margin-bottom:1.8rem}

/* ---------- apoyo / paypal ---------- */
.apoyo{background:var(--blanco);border:1px solid var(--linea);border-top:2px solid var(--sello);
  padding:1.9rem;margin:2rem 0;text-align:center}
.cifras b{display:block;font-family:'Marcellus',serif;font-size:2rem;color:var(--sello);
  line-height:1.1}
.cifras span{display:block;font-size:.74rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--gris);margin-top:.4rem}
.botones{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center;margin:1.7rem 0 1.1rem}
.boton.alt{background:transparent;color:var(--azul);border:1px solid var(--azul)}
a.boton{text-decoration:none;display:inline-block}
.pie-apoyo{font-size:.8rem;color:var(--gris)}
.forma select{width:100%;font-family:'Spectral',serif;font-size:1rem;color:var(--tinta);
  border:1px solid var(--linea);background:var(--papel);padding:.65rem .8rem;margin-bottom:1.1rem}

/* ---------- buscador en portada ---------- */
.busca-portada{display:flex;max-width:22rem;margin:2.2rem auto 0;
  border-bottom:1.5px solid var(--linea);transition:border-color .15s}
.busca-portada:focus-within{border-bottom-color:var(--azul)}
.busca-portada input{flex:1;font-family:'Spectral',serif;font-size:.98rem;font-weight:300;
  color:var(--tinta);border:0;background:transparent;padding:.55rem .2rem;-webkit-appearance:none}
.busca-portada input:focus{outline:none}
.busca-portada input::placeholder{color:var(--gris);opacity:.75}
.busca-portada button{border:0;background:transparent;color:var(--gris);cursor:pointer;padding:0 .4rem}
.busca-portada button:hover{color:var(--azul)}

/* ---------- apoyo sutil en portada ---------- */
.apoyo-sutil{text-align:center;padding:2.2rem 1.5rem;margin-top:1rem;
  border-top:1px solid var(--linea)}
.apoyo-sutil p{font-size:.92rem;color:var(--gris);margin-bottom:.7rem}
.apoyo-sutil a{font-size:.78rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--sello);text-decoration:none;border-bottom:1px solid transparent;
  padding-bottom:.15rem}
.apoyo-sutil a:hover{border-bottom-color:var(--sello)}

/* ---------- medios ---------- */
.medio{display:flex;gap:1rem;align-items:flex-start;padding:1rem 0;
  border-bottom:1px solid var(--linea)}
.medio img.mini-prev{width:72px;height:72px;object-fit:cover;flex:none;
  border:1px solid var(--linea);background:var(--papel)}
.medio .datos{flex:1;min-width:0}
.medio .datos b{font-size:.9rem;display:block;margin-bottom:.2rem}
.medio .datos small{color:var(--gris);font-size:.8rem}
.pegar{display:flex;gap:.4rem;margin-top:.5rem}
.pegar input{flex:1;font-family:ui-monospace,monospace;font-size:.76rem;
  padding:.4rem .5rem;border:1px solid var(--linea);background:var(--papel);
  color:var(--tinta);margin:0}

/* ---------- pie ---------- */
.pie{border-top:1px solid var(--linea);background:var(--blanco);margin-top:4rem}
.pie>div{max-width:var(--ancho);margin:0 auto;padding:2.8rem 1.5rem 2.2rem}
.columnas{display:grid;grid-template-columns:repeat(3,1fr);gap:1.8rem;margin-bottom:2rem}
.columnas nav{display:flex;flex-direction:column;gap:.5rem}
.columnas b{font-family:'Marcellus',serif;font-weight:400;font-size:.72rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--azul);margin-bottom:.3rem}
.columnas a{font-size:.86rem;color:var(--gris);text-decoration:none}
.columnas a:hover{color:var(--azul)}
.pie .nota{font-size:.82rem;color:var(--gris);max-width:31rem;
  padding-top:1.6rem;border-top:1px solid var(--linea)}
.pie .firma{font-size:.76rem;color:var(--gris);margin-top:1.2rem;opacity:.85}
.pie .firma a{color:var(--gris)}

@media(max-width:640px){
  .columnas{grid-template-columns:1fr 1fr;gap:1.4rem}
  .menu{gap:1.15rem;font-size:.74rem}
  .social span{display:none}
  .social{padding:.45rem .55rem}
  html{font-size:16px}
  main{padding:2.5rem 1.25rem 3rem}
  h1.titulo{font-size:1.65rem}
  .entrada h2{font-size:1.4rem}
  .rezo{font-size:1.08rem;padding-left:1.15rem}
  .lista a{flex-direction:column;gap:.25rem}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}