/*
Theme Name: Casa de Mi Padre
Theme URI: https://casademipadre.ar
Author: Iglesia Pentecostal Casa de Mi Padre
Description: Tema a medida para la Iglesia Pentecostal Casa de Mi Padre, Jose C. Paz. Incluye horarios, ministerios, eventos desde Google Calendar e integracion con Instagram.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: casa-de-mi-padre
Tags: iglesia, church, one-page, custom-colors
*/

:root{
  --ink:#08191C;
  --ink-2:#0D2327;
  --ink-deep:#051215;
  --teal:#00B3B5;
  --teal-lit:#4ED6D7;
  --teal-dark:#00767C;
  --bone:#F1F5F4;
  --bone-dim:rgba(241,245,244,.64);
  --line:rgba(241,245,244,.15);
  --line-dark:rgba(8,25,28,.13);
  --display:'Archivo',system-ui,sans-serif;
  --body:'Karla',system-ui,sans-serif;
  --gut:clamp(20px,5vw,72px);
  --sec:clamp(72px,10vw,138px);
  --gable:polygon(0 100%,0 16%,50% 0,100% 16%,100% 100%);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--ink);color:var(--bone);font-family:var(--body);font-size:17px;line-height:1.62;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--teal);outline-offset:3px}

.h-xl,.h-lg,.h-md,.h-sm{font-family:var(--display);font-weight:800;line-height:.95;letter-spacing:-.032em}
.h-xl{font-size:clamp(2.9rem,8.2vw,6.8rem)}
.h-lg{font-size:clamp(2.2rem,5.2vw,4.3rem)}
.h-md{font-size:clamp(1.6rem,3.1vw,2.5rem);line-height:1.05}
.h-sm{font-size:clamp(1.15rem,1.9vw,1.45rem);letter-spacing:-.02em;line-height:1.14}
.eyebrow{font-family:var(--display);font-weight:600;font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--teal-lit)}
.lead{font-size:clamp(1.05rem,1.6vw,1.26rem);line-height:1.6;max-width:34ch}
.dim{color:var(--bone-dim)}

.wrap{max-width:1320px;margin:0 auto;padding:0 var(--gut)}
.section{padding:var(--sec) 0;position:relative}
.section--light{background:var(--bone);color:var(--ink)}
.section--light .dim{color:rgba(8,25,28,.62)}
.section--light .eyebrow{color:var(--teal-dark)}
.head-row{display:flex;flex-wrap:wrap;gap:22px;align-items:flex-end;justify-content:space-between}

.btn{display:inline-flex;align-items:center;gap:.7em;font-family:var(--display);font-weight:700;font-size:.82rem;letter-spacing:.11em;text-transform:uppercase;padding:1.15em 2.1em;border:1px solid transparent;cursor:pointer;transition:background .25s,color .25s,border-color .25s,transform .25s}
.btn--solid{background:var(--teal);color:#04191B}
.btn--solid:hover{background:var(--teal-lit);transform:translateY(-2px)}
.btn--ghost{border-color:var(--line);color:var(--bone)}
.btn--ghost:hover{border-color:var(--bone);background:rgba(241,245,244,.07)}
.section--light .btn--ghost{border-color:var(--line-dark);color:var(--ink)}
.section--light .btn--ghost:hover{border-color:var(--ink);background:rgba(8,25,28,.05)}
.link-arrow{display:inline-flex;align-items:center;gap:.6em;font-family:var(--display);font-weight:700;font-size:.84rem;letter-spacing:.1em;text-transform:uppercase;padding-bottom:.4em;border-bottom:1px solid currentColor}
.link-arrow span{transition:transform .25s}
.link-arrow:hover span{transform:translateX(5px)}

.gable{clip-path:var(--gable)}
.cover{width:100%;height:100%;object-fit:cover}

/* nav */
.nav{position:fixed;inset:0 0 auto;z-index:60;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:18px var(--gut);transition:background .3s,backdrop-filter .3s,padding .3s}
.nav.is-stuck{background:rgba(5,18,21,.9);backdrop-filter:blur(14px);padding:11px var(--gut)}
.brand{display:flex;align-items:center;gap:12px}
.brand img{width:42px;height:42px;flex:0 0 42px}
.brand__txt{font-family:var(--display);font-weight:800;font-size:.86rem;letter-spacing:.13em;line-height:1.15;text-transform:uppercase}
.brand__txt small{display:block;font-weight:500;font-size:.57rem;letter-spacing:.2em;color:var(--bone-dim)}
.menu{display:flex;align-items:center;gap:clamp(13px,1.9vw,28px)}
.menu a{font-family:var(--display);font-weight:600;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;padding:.4em 0;border-bottom:1px solid transparent;transition:border-color .2s}
.menu a:hover{border-color:var(--teal)}
.burger{display:none;background:none;border:1px solid var(--line);color:var(--bone);padding:.7em .95em;cursor:pointer;font-family:var(--display);font-weight:700;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase}
@media(max-width:1060px){.menu{display:none}.burger{display:block}}

/* hero */
.hero{min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;position:relative;padding-bottom:clamp(34px,6vh,70px)}
.hero__bg{position:absolute;inset:0;z-index:0;overflow:hidden;background:var(--ink-deep)}
.hero__bg video,.hero__bg img{width:100%;height:100%;object-fit:cover}
.hero__bg::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(5,18,21,.96) 3%,rgba(5,18,21,.36) 48%,rgba(5,18,21,.7) 100%)}
.hero__inner{position:relative;z-index:2}
.hero__title{margin:.4em 0 .55em;max-width:15ch}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.hero__times{margin-top:clamp(34px,5vh,56px);padding-top:26px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:clamp(24px,5vw,72px)}
.htime__day{font-family:var(--display);font-weight:700;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--teal-lit)}
.htime__hr{font-family:var(--display);font-weight:800;font-size:clamp(1.45rem,2.7vw,2.05rem);letter-spacing:-.025em;line-height:1.1;margin-top:.16em}
.htime__lbl{font-size:.9rem;color:var(--bone-dim)}

/* split */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,72px);align-items:center}
.split__media{aspect-ratio:4/5;overflow:hidden}
@media(max-width:860px){.split{grid-template-columns:1fr}.split__media{aspect-ratio:4/3;order:-1}}

/* horarios */
.sched{margin-top:clamp(38px,5vw,62px);border-top:1px solid var(--line-dark)}
.day{display:grid;grid-template-columns:minmax(180px,266px) 1fr;gap:clamp(16px,3vw,48px);padding:clamp(22px,3vw,33px) 0;border-bottom:1px solid var(--line-dark)}
.day__name{font-family:var(--display);font-weight:800;font-size:clamp(1.5rem,3.3vw,2.45rem);letter-spacing:-.032em;line-height:1}
.slots{display:flex;flex-direction:column;gap:14px}
.slot{display:flex;gap:clamp(14px,2.4vw,30px);align-items:baseline}
.slot__hr{font-family:var(--display);font-weight:700;font-size:1.02rem;color:var(--teal-dark);flex:0 0 4.4em}
.slot__name{font-weight:600}
.slot__sub{display:block;font-size:.88rem;color:rgba(8,25,28,.6);font-weight:400}
.tag{display:inline-block;margin-left:.7em;font-family:var(--display);font-weight:600;font-size:.57rem;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-dark);border:1px solid rgba(0,118,124,.42);padding:.25em .55em;vertical-align:.18em}
@media(max-width:640px){.day{grid-template-columns:1fr;gap:14px}}
.devo{margin-top:clamp(30px,4vw,46px);padding:clamp(20px,3vw,30px);background:var(--ink);color:var(--bone);display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between}
.devo p{max-width:52ch;font-size:.96rem;color:var(--bone-dim)}
.devo strong{color:var(--bone);font-weight:600}

/* online */
.online{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,56px);align-items:center}
.online__screen{position:relative;aspect-ratio:16/9;overflow:hidden;display:block}
.online__screen::after{content:'';position:absolute;inset:0;background:rgba(5,18,21,.3);transition:background .25s}
.online__screen:hover::after{background:rgba(5,18,21,.12)}
.play{position:absolute;inset:0;margin:auto;width:76px;height:76px;border-radius:50%;border:1.5px solid var(--bone);display:grid;place-items:center;background:rgba(5,18,21,.4);z-index:3;transition:background .25s,border-color .25s,transform .25s}
.online__screen:hover .play{background:var(--teal);border-color:var(--teal);transform:scale(1.06)}
.play::before{content:'';width:0;height:0;margin-left:5px;border-left:17px solid currentColor;border-top:11px solid transparent;border-bottom:11px solid transparent}
@media(max-width:860px){.online{grid-template-columns:1fr}}

/* conectate */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.6vw,34px);margin-top:clamp(34px,5vw,56px)}
.card__media{aspect-ratio:3/4;overflow:hidden;margin-bottom:22px}
.card__media img{transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.card:hover .card__media img{transform:scale(1.045)}
.card p{font-size:.98rem;color:rgba(8,25,28,.62);max-width:30ch;margin-top:.5em}
@media(max-width:820px){.cards{grid-template-columns:1fr;gap:36px}.card__media{aspect-ratio:5/4}}

/* identidad */
.identity{position:relative;min-height:76svh;display:grid;place-items:center;text-align:center;padding:var(--sec) var(--gut)}
.identity__bg{position:absolute;inset:0;overflow:hidden}
.identity__bg::after{content:'';position:absolute;inset:0;background:linear-gradient(rgba(5,18,21,.72),rgba(5,18,21,.66))}
.identity__inner{position:relative;z-index:2;max-width:24ch;margin:0 auto}
.identity blockquote{font-size:clamp(1.05rem,1.9vw,1.32rem);line-height:1.55;color:var(--bone-dim);max-width:44ch;margin:1.5em auto 2.2em}

/* eventos */
.events{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.6vw,32px);margin-top:clamp(34px,5vw,54px)}
.event{border:1px solid var(--line);padding:clamp(22px,3vw,32px);display:flex;flex-direction:column;gap:15px;transition:background .25s,border-color .25s}
.event:hover{background:rgba(241,245,244,.045);border-color:rgba(241,245,244,.32)}
.event__date{display:flex;align-items:baseline;gap:.5em;color:var(--teal-lit);font-family:var(--display);font-weight:800}
.event__d{font-size:2.35rem;letter-spacing:-.04em;line-height:1}
.event__m{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase}
.event p{font-size:.94rem;color:var(--bone-dim);margin-top:auto}
@media(max-width:820px){.events{grid-template-columns:1fr}}

/* pastores */
.pastors{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(28px,5vw,74px);align-items:center}
.pastors__media{aspect-ratio:4/5;overflow:hidden}
.pastors p+p{margin-top:1.05em}
@media(max-width:860px){.pastors{grid-template-columns:1fr}.pastors__media{max-width:420px}}

/* instagram */
.ig{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin-top:clamp(30px,4vw,46px)}
.ig a{aspect-ratio:1;overflow:hidden;display:block;position:relative}
.ig img{transition:transform .5s,opacity .3s}
.ig a:hover img{transform:scale(1.07);opacity:.85}
@media(max-width:900px){.ig{grid-template-columns:repeat(3,1fr)}}

/* cierre */
.closing{position:relative;min-height:84svh;display:flex;align-items:center;padding:var(--sec) var(--gut)}
.closing__bg{position:absolute;inset:0;overflow:hidden}
.closing__bg::after{content:'';position:absolute;inset:0;background:linear-gradient(100deg,rgba(5,18,21,.93) 10%,rgba(5,18,21,.42))}
.closing__inner{position:relative;z-index:2;max-width:1320px;margin:0 auto;width:100%}
.closing__sunday{display:inline-flex;align-items:center;gap:.8em;margin:2em 0 1.4em;font-family:var(--display);font-weight:700;font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;background:rgba(0,179,181,.16);border:1px solid rgba(0,179,181,.45);color:var(--teal-lit);padding:.85em 1.4em}

/* footer */
.footer{background:var(--ink-deep);padding:clamp(52px,7vw,86px) 0 32px;border-top:1px solid var(--line)}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:clamp(26px,4vw,54px)}
.foot h4{font-family:var(--display);font-weight:700;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--teal-lit);margin-bottom:1.1em}
.foot p,.foot a{font-size:.95rem;color:var(--bone-dim);display:block}
.foot a:hover{color:var(--bone)}
.foot p+p{margin-top:.35em}
.foot-base{margin-top:clamp(42px,6vw,70px);padding-top:24px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;font-size:.82rem;color:rgba(241,245,244,.42)}
@media(max-width:900px){.foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.foot-grid{grid-template-columns:1fr}}

/* whatsapp flotante */
.wa{position:fixed;right:clamp(16px,3vw,30px);bottom:clamp(16px,3vw,30px);z-index:70;display:flex;align-items:center;gap:.65em;background:var(--teal);color:#04191B;padding:.9em 1.25em;font-family:var(--display);font-weight:700;font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;box-shadow:0 10px 30px rgba(0,0,0,.35);opacity:0;visibility:hidden;transform:translateY(14px);transition:opacity .35s,transform .35s,visibility .35s,background .25s}
.wa.on{opacity:1;visibility:visible;transform:none}
.wa:hover{background:var(--teal-lit)}
.wa svg{width:19px;height:19px;flex:0 0 19px;fill:currentColor}
@media(max-width:520px){.wa span{display:none}.wa{padding:1.05em;border-radius:50%}}

/* reveal */
/* Las animaciones de aparicion solo se activan si el JS confirmo estar vivo.
   Sin la clase .cdmp-js el contenido se ve normal: asi, si LiteSpeed difiere
   o bloquea el script, la pagina sigue legible en lugar de quedar invisible. */
.cdmp-js .rv{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.cdmp-js .rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.cdmp-js .rv,.rv{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}}

/* ---------- WordPress core ---------- */
.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;word-wrap:normal!important}
.screen-reader-text:focus{background:var(--bone);color:var(--ink);clip:auto;clip-path:none;display:block;font-size:.9rem;height:auto;left:6px;padding:14px 22px;top:6px;width:auto;z-index:100000;text-decoration:none}
.alignleft{float:left;margin:.4em 1.6em 1em 0}
.alignright{float:right;margin:.4em 0 1em 1.6em}
.aligncenter{margin:0 auto 1.4em;display:block}
.wp-caption-text,figcaption{font-size:.85rem;color:var(--bone-dim);margin-top:.6em}
.admin-bar .nav{top:32px}
@media(max-width:782px){.admin-bar .nav{top:46px}}

/* ---------- paginas internas ---------- */
.page-hero{padding:calc(var(--sec) + 60px) 0 clamp(38px,5vw,60px);background:var(--ink-2);border-bottom:1px solid var(--line)}
.entry{max-width:72ch;margin:0 auto}
.entry h2{font-family:var(--display);font-weight:800;letter-spacing:-.03em;font-size:clamp(1.5rem,3vw,2.2rem);line-height:1.08;margin:2.2em 0 .7em}
.entry h3{font-family:var(--display);font-weight:700;letter-spacing:-.02em;font-size:clamp(1.15rem,2vw,1.45rem);margin:1.8em 0 .5em}
.entry h2:first-child,.entry h3:first-child{margin-top:0}
.entry p{margin-bottom:1.1em}
.entry ul,.entry ol{margin:0 0 1.3em 1.4em}
.entry li{margin-bottom:.45em}
.entry a{color:var(--teal-lit);text-decoration:underline;text-underline-offset:.2em}
.entry blockquote{border-left:2px solid var(--teal);padding-left:1.4em;margin:1.8em 0;font-size:1.08rem;color:var(--bone-dim)}
.entry blockquote strong{color:var(--teal-lit);font-family:var(--display);font-weight:700;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;display:block;margin-top:.7em}
.entry img{margin:1.8em 0}
.section--light .entry a{color:var(--teal-dark)}
.section--light .entry blockquote{color:rgba(8,25,28,.66)}
.section--light .entry blockquote strong{color:var(--teal-dark)}

/* ---------- estado vacio de eventos ---------- */
.events-empty{border:1px dashed var(--line);padding:clamp(26px,4vw,40px);text-align:center;color:var(--bone-dim);margin-top:clamp(30px,4vw,48px)}

/* ---------- instagram: estilos sobre el plugin ---------- */
.ig-plugin .sbi_header,.ig-plugin .sb_instagram_header{display:none!important}
.ig-plugin #sb_instagram,.ig-plugin .sbi_photo_wrap{padding:0!important}
.ig-plugin #sb_instagram .sbi_item{padding:3px!important}
.ig-plugin .sbi_photo{border-radius:0!important}
.ig-plugin .sb_instagram_error{display:none!important}
.ig-plugin .sli-container,.ig-plugin .sli-grid{gap:6px!important}

/* ---------------------------------------------------------------
 * Menu movil (panel desplegable bajo la barra)
 * --------------------------------------------------------------- */
.burger[aria-expanded="true"]{border-color:var(--teal);color:var(--teal)}
@media(max-width:1060px){
  .menu{display:flex;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:0;padding:6px var(--gut) 24px;background:rgba(5,18,21,.97);backdrop-filter:blur(14px);border-top:1px solid var(--line);max-height:78vh;overflow-y:auto;opacity:0;visibility:hidden;transform:translateY(-10px);transition:opacity .22s ease,transform .22s ease,visibility .22s}
  .nav.is-open .menu{opacity:1;visibility:visible;transform:none}
  .menu a{font-size:.92rem;letter-spacing:.1em;padding:1.1em 0;border-bottom:1px solid var(--line)}
  .menu a:hover{border-color:var(--line)}
  .menu .btn{margin-top:20px;text-align:center;border-bottom:0;padding:1.05em 1.5em!important}
  .menu .btn:hover{border-color:transparent}
}
/* Si el JS no carga, el menu se muestra en lugar de quedar inaccesible. */
html:not(.cdmp-js) .burger{display:none}
@media(max-width:1060px){
  html:not(.cdmp-js) .menu{position:static;opacity:1;visibility:visible;transform:none;max-height:none;overflow:visible;background:none;border-top:0;padding:10px 0 0}
}
@media(prefers-reduced-motion:reduce){.menu{transition:none}}