@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%;overflow-x:hidden}
body{
  background:var(--papel);color:var(--tinta);
  overflow-x:hidden;max-width:100%;
  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;flex-wrap:nowrap}
.marca{min-width:0}
.marca b{overflow-wrap:break-word}
.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;flex-wrap:wrap;gap:.6rem 1.6rem;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:3rem 0 3.4rem;border-bottom:1px solid var(--linea);
  margin-bottom:3rem}
.entrada h2{font-family:'Marcellus',serif;font-weight:400;font-size:2.35rem;line-height:1.24;
  color:var(--tinta);margin-bottom:1.4rem;letter-spacing:.005em}
.entrada h2 em{font-style:normal;color:var(--azul)}

.filigrana{display:flex;align-items:center;justify-content:center;gap:.8rem;
  color:var(--sello);margin-bottom:1.5rem}
.filigrana span{display:block;width:3.2rem;height:1px;background:currentColor;opacity:.5}

.entrada .sub{color:var(--gris);font-size:1rem;line-height:1.7;max-width:30rem;margin:0 auto}
.entrada .sub b{color:var(--tinta);font-weight:400;border-bottom:1px solid var(--sello);
  padding-bottom:.05em}
.entrada .cuantas{margin-top:1.6rem;font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gris);opacity:.85}

/* aviso de portada — visible, no decorativo */
.aviso-portada{background:var(--blanco);border:1px solid var(--linea);
  border-top:3px solid var(--azul);padding:1.7rem 1.8rem;margin:0 0 3rem;
  text-align:center;box-shadow:0 1px 3px rgba(20,36,61,.05)}
.aviso-portada b{display:block;font-family:'Marcellus',serif;font-weight:400;font-size:1.22rem;
  letter-spacing:.04em;color:var(--azul);margin-bottom:.6rem}
.aviso-portada p{font-size:1.02rem;line-height:1.7;color:var(--tinta);margin:0;
  max-width:32rem;margin-inline:auto;white-space:pre-line}
.aviso-portada a{display:inline-block;margin-top:1.1rem;font-size:.75rem;letter-spacing:.13em;
  text-transform:uppercase;text-decoration:none;color:var(--azul);
  border:1px solid var(--azul);padding:.55rem 1.2rem}
.aviso-portada a:hover{background:var(--azul);color:#fff}

.aviso-portada.fiesta{border-top-color:var(--sello);
  background:linear-gradient(#FEFCF8,#FFFFFF)}
.aviso-portada.fiesta b{color:var(--sello)}
.aviso-portada.fiesta b::before{content:'✦';display:block;font-size:.9rem;
  margin-bottom:.5rem;opacity:.7}
.aviso-portada.fiesta a{color:var(--sello);border-color:var(--sello)}
.aviso-portada.fiesta a:hover{background:var(--sello);color:#fff}

.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 ---------- */
.cuantos{font-size:.76rem;letter-spacing:.11em;text-transform:uppercase;color:var(--gris);
  margin-bottom:2rem;padding-bottom:.9rem;border-bottom:1px solid var(--linea)}
.paginas{display:flex;gap:.4rem;align-items:center;justify-content:center;flex-wrap:wrap;
  margin:2.5rem 0;padding-top:1.6rem;border-top:1px solid var(--linea)}
.paginas a,.paginas b{font-size:.8rem;letter-spacing:.05em;padding:.45rem .8rem;
  text-decoration:none;border:1px solid var(--linea);color:var(--gris);min-width:2.3rem;
  text-align:center}
.paginas b{background:var(--azul);border-color:var(--azul);color:#fff;font-weight:400}
.paginas a:hover{border-color:var(--azul);color:var(--azul)}
.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.boton.alt:hover{background:var(--azul);color:#fff}
.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;white-space:nowrap}
.menu a{white-space:nowrap}
.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{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: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:700px){
  html{font-size:16px}

  /* cabecera */
  .banda{padding:1.1rem 1.1rem .7rem;gap:.7rem}
  .marca img{width:38px}
  .marca b{font-size:1rem;letter-spacing:.05em;line-height:1.15}
  .marca i{font-size:.62rem;letter-spacing:.11em;margin-top:.15rem}
  .social{padding:.42rem .5rem}
  .social span{display:none}

  /* menú: se desplaza en horizontal, sin romper la página */
  .menu{padding:0 1.1rem .85rem;gap:1.15rem;font-size:.73rem;letter-spacing:.08em;
    flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;-ms-overflow-style:none}
  .menu::-webkit-scrollbar{display:none}
  .menu .lupa{margin-left:0}

  /* contenido */
  main{padding:2rem 1.1rem 2.5rem}
  h1.titulo{font-size:1.55rem}
  .entrada{padding:2rem 0 2.4rem;margin-bottom:2rem}
  .entrada h2{font-size:1.5rem;line-height:1.28}
  .entrada h2 br{display:none}
  .entrada .sub{font-size:.94rem}
  .entrada .cuantas{font-size:.66rem;letter-spacing:.1em}
  .filigrana span{width:2.2rem}

  .rezo{font-size:1.05rem;padding-left:1rem;line-height:1.85}
  .sello{flex-direction:column;gap:.3rem;padding:.6rem .8rem;line-height:1.5}

  .lista a{flex-direction:column;align-items:flex-start;gap:.25rem;padding:.8rem .1rem}
  .lista .marca-proc{font-size:.62rem}

  /* apoyo */
  .apoyo{padding:1.4rem 1.1rem}
  .cifras b{font-size:1.65rem}
  .botones{flex-direction:column;gap:.6rem}
  .botones .boton{width:100%;text-align:center}

  /* aviso de portada */
  .aviso-portada{padding:1.3rem 1.1rem;margin-bottom:2.2rem}
  .aviso-portada b{font-size:1.08rem}
  .aviso-portada p{font-size:.96rem}

  /* formularios */
  .forma{padding:1.3rem 1.1rem}
  .forma input,.forma textarea,.forma select{font-size:16px}
  .boton{width:100%;padding:.9rem 1rem}

  /* pie */
  .columnas{grid-template-columns:1fr 1fr;gap:1.4rem}
  .pie>div{padding:2rem 1.1rem 1.8rem}

  .paginas a,.paginas b{padding:.4rem .65rem;font-size:.76rem}
}

@media(max-width:400px){
  .columnas{grid-template-columns:1fr}
  .entrada h2{font-size:1.35rem}
  .marca b{font-size:.92rem}
}

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