/* ============================================================
   ORACIÓN — estilos propios de oracion.html
   Prefijo .or- para no chocar con styles.css
   ============================================================ */

:root{
  --or-cream:    #faf6ef;
  --or-cream-2:  #f8f0e4;
  --or-note:     #f6efe0;
  --or-navy:     #16304f;
  --or-navy-2:   #1d3d63;
  --or-gold:     #bd9434;
  --or-gold-lt:  #d4b158;
  --or-body:     #5f6b7a;
  --or-line:     #e3e7ee;
  --or-maxw:     1290px;
}

.or-page{
  background:var(--or-cream);
  font-family:'Inter',system-ui,sans-serif;
  color:var(--or-body);
}
.or-wrap{
  width:100%;max-width:var(--or-maxw);
  margin:0 auto;padding:0 28px;
}
.or-page h1,.or-page h2{
  font-family:'Playfair Display',Georgia,serif;
  color:var(--or-navy);margin:0;line-height:1.15;
}

/* ---------- Header claro propio de esta pagina ---------- */
.or-page .site-header{
  background:#fff;
  box-shadow:0 2px 16px rgba(22,48,79,.07);
}
.or-brand{
  font-family:'Inter',sans-serif;font-weight:700;
  font-size:19px;letter-spacing:.34em;
  color:var(--or-navy);line-height:1;
}
.or-page .nav-toggle span{background:var(--or-navy)}
@media (min-width:901px){
  .or-page .main-nav a{color:#3b4a5e;font-weight:500;position:relative}
  .or-page .main-nav a:hover{color:var(--or-gold)}
  .or-page .main-nav a[aria-current="page"]{color:var(--or-gold);font-weight:600}
  .or-page .main-nav a[aria-current="page"]::after{
    content:'';position:absolute;left:50%;bottom:-8px;
    transform:translateX(-50%);
    width:20px;height:2.5px;border-radius:2px;background:var(--or-gold);
  }
}
.or-page .nav-ofrendas{
  background:var(--or-navy)!important;
  border-color:var(--or-navy)!important;
  color:#fff!important;border-radius:999px;
}
.or-page .nav-ofrendas:hover{
  background:var(--or-gold)!important;
  border-color:var(--or-gold)!important;color:#fff!important;
}

/* ===================== BLOQUE PRINCIPAL ===================== */
.or-main{
  position:relative;overflow:hidden;
  padding:104px 0 0;
}
.or-grid{
  display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:46px;align-items:start;
  padding-bottom:64px;
}

/* ---------- Columna izquierda ---------- */
.or-intro{
  position:relative;z-index:2;
  text-align:center;
  padding:16px 14px 0;
}
.or-icon{
  width:104px;height:auto;display:block;
  margin:0 auto 10px;
}
.or-page .or-intro h1{
  font-size:clamp(40px,4.6vw,62px);
  font-weight:700;letter-spacing:.055em;
  margin-bottom:14px;
}
.or-sep{
  display:flex;align-items:center;justify-content:center;
  gap:12px;margin-bottom:22px;color:var(--or-gold);
}
.or-sep::before,.or-sep::after{
  content:'';height:1px;width:64px;background:currentColor;opacity:.6;
}
.or-sep svg{width:17px;height:17px}
.or-page .or-intro h2{
  font-size:clamp(23px,2.4vw,31px);
  font-weight:700;margin-bottom:16px;
}
.or-lead{
  font-size:15.5px;line-height:1.72;
  margin:0 auto 26px;max-width:38ch;
}
.or-note{
  display:flex;align-items:center;gap:16px;
  background:var(--or-note);
  border-radius:12px;padding:19px 22px;
  text-align:left;margin-bottom:30px;
}
.or-note svg{width:30px;height:30px;color:var(--or-gold);flex-shrink:0}
.or-note p{margin:0;font-size:14.4px;line-height:1.6;color:#5a6472}

.or-verse{
  position:relative;z-index:2;
  margin:0 auto;max-width:34ch;
}
.or-verse p{
  font-style:italic;font-size:14.8px;line-height:1.65;
  color:#4e5a6b;margin:0 0 10px;
}
.or-verse q{quotes:none}
.or-verse .or-mark{
  color:var(--or-gold);font-size:19px;
  font-style:normal;font-weight:700;vertical-align:-2px;
}
.or-ref{
  display:block;color:var(--or-gold);
  font-size:14px;font-weight:500;
}

/* Foto anclada al fondo de la columna */
.or-photo{
  position:absolute;left:0;bottom:0;
  width:min(52%,700px);
  aspect-ratio:1330/468;
  background:url('../assets/oracion-foto.jpg') center bottom/cover no-repeat;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 46%,#000 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 46%,#000 100%);
  z-index:1;pointer-events:none;
}

/* ---------- Tarjeta del formulario ---------- */
.or-card{
  position:relative;z-index:2;
  background:#fff;border-radius:22px;
  padding:34px 38px 38px;
  box-shadow:0 18px 50px rgba(22,48,79,.09);
}
.or-field{margin-bottom:17px}
.or-field:last-of-type{margin-bottom:24px}
.or-label{
  display:flex;align-items:center;gap:11px;
  font-size:14px;font-weight:600;
  color:var(--or-navy);margin-bottom:8px;
}
.or-label svg{width:19px;height:19px;color:#6d7a8c;flex-shrink:0}

.or-input,.or-select,.or-textarea{
  width:100%;
  font-family:'Inter',sans-serif;font-size:14.5px;
  color:var(--or-navy);
  background:#fff;
  border:1px solid var(--or-line);
  border-radius:9px;
  padding:13px 15px;
  transition:border-color .18s ease,box-shadow .18s ease;
}
.or-textarea{min-height:124px;resize:vertical;line-height:1.6}
.or-input::placeholder,.or-textarea::placeholder{color:#a7b0bd}
.or-select{
  color:#a7b0bd;cursor:pointer;
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236d7a8c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
  background-size:17px;
  padding-right:42px;
}
.or-select.is-filled{color:var(--or-navy)}
.or-input:focus,.or-select:focus,.or-textarea:focus{
  outline:none;border-color:var(--or-gold);
  box-shadow:0 0 0 3px rgba(189,148,52,.14);
}
.or-input:invalid:not(:placeholder-shown){border-color:#d9534f}

.or-row{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
}

.or-submit{
  width:100%;
  display:flex;align-items:center;justify-content:center;gap:12px;
  background:var(--or-navy);color:#fff;
  border:0;border-radius:11px;cursor:pointer;
  font-family:'Inter',sans-serif;
  font-size:16px;font-weight:600;
  padding:17px 22px;
  transition:background .2s ease,transform .18s ease;
}
.or-submit:hover{background:var(--or-navy-2);transform:translateY(-1px)}
.or-submit svg{width:21px;height:21px}

/* Confirmacion */
.or-done{
  text-align:center;padding:26px 10px 14px;
}
.or-done svg{width:62px;height:62px;color:var(--or-gold);margin-bottom:16px}
.or-page .or-done h2{font-size:27px;margin-bottom:12px}
.or-done p{font-size:15px;line-height:1.7;margin:0 auto;max-width:34ch}

/* ===================== FRANJA INFERIOR ===================== */
.or-foot{
  background:var(--or-cream-2);
  text-align:center;padding:30px 24px 34px;
}
.or-foot svg{width:22px;height:22px;color:var(--or-gold);margin-bottom:12px}
.or-foot p{
  font-size:15.5px;line-height:1.6;
  color:#4e5a6b;margin:0 auto 6px;max-width:62ch;
}
.or-foot .or-ref{font-size:14px}

/* ===================== RESPONSIVE ===================== */
@media (max-width:980px){
  .or-grid{grid-template-columns:1fr;gap:34px;padding-bottom:0}
  .or-main{padding-top:92px}
  .or-photo{
    position:relative;width:100%;max-width:none;
    margin-top:30px;
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 34%,#000 100%);
    mask-image:linear-gradient(180deg,transparent 0,#000 34%,#000 100%);
  }
  .or-card{order:-1}
}
@media (max-width:620px){
  .or-wrap{padding:0 18px}
  .or-card{padding:26px 22px 30px;border-radius:18px}
  .or-row{grid-template-columns:1fr;gap:0}
  .or-row .or-field{margin-bottom:17px}
  .or-note{flex-direction:column;align-items:flex-start;gap:10px}
  .or-sep::before,.or-sep::after{width:40px}
}
@media (prefers-reduced-motion:reduce){
  .or-page *,.or-page *::before,.or-page *::after{
    animation-duration:.01ms!important;transition-duration:.01ms!important;
  }
}