/*
Theme Name: PADRISIMO Comunidad
Theme URI: https://padrisimo.org
Author: Carlos Martin Curcho Blanco / Codex
Description: Tema WordPress responsive con Bootstrap, parallax y PWA para una comunidad de consejeria espiritual y acompanamiento humano.
Version: 1.1.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: padrisimo
*/

:root {
  --padrisimo-navy: #071b2d;
  --padrisimo-ink: #102f4a;
  --padrisimo-blue: #1188e8;
  --padrisimo-sky: #4db8ff;
  --padrisimo-yellow: #ffd43b;
  --padrisimo-coral: #ff6f4f;
  --padrisimo-cream: #fffaf0;
  --padrisimo-white: #ffffff;
}

body {
  color: #17324a;
  font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  background: var(--padrisimo-cream);
}

.navbar {
  background: rgba(7, 27, 45, 0.92);
  backdrop-filter: blur(16px);
}

.navbar-brand img {
  width: 42px;
  height: 42px;
}

.navbar .nav-link,
.navbar-brand {
  color: var(--padrisimo-white);
}

.navbar .nav-link:hover,
.navbar .nav-link:focus {
  color: var(--padrisimo-yellow);
}

.hero {
  min-height: 92vh;
  position: relative;
  display: grid;
  align-items: center;
  overflow: hidden;
  color: var(--padrisimo-white);
  background:
    radial-gradient(circle at 18% 35%, rgba(17, 136, 232, 0.38), transparent 28rem),
    radial-gradient(circle at 80% 20%, rgba(255, 111, 79, 0.18), transparent 24rem),
    linear-gradient(135deg, #071b2d 0%, #0d2d49 54%, #08182b 100%);
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("assets/img/padrisimo-symbol.svg");
  background-repeat: no-repeat;
  background-size: clamp(240px, 34vw, 520px);
  background-position: 11% 48%;
  opacity: 0.2;
  transform: translateY(var(--parallax-y, 0));
}

.hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 110px;
  background: linear-gradient(to bottom, rgba(255, 250, 240, 0), var(--padrisimo-cream));
}

.hero-content {
  position: relative;
  z-index: 1;
  padding: 8rem 0 6rem;
}

.brand-mark {
  width: clamp(72px, 10vw, 120px);
  height: auto;
}

.eyebrow {
  color: var(--padrisimo-yellow);
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.fw-black {
  font-weight: 900;
}

.hero h1 {
  font-size: clamp(3.2rem, 9vw, 7.2rem);
  line-height: 0.95;
  font-weight: 900;
  letter-spacing: 0;
}

.hero p {
  max-width: 760px;
  color: rgba(255, 255, 255, 0.86);
  font-size: clamp(1.08rem, 2vw, 1.35rem);
}

.btn-padrisimo {
  background: var(--padrisimo-yellow);
  border: 0;
  color: #172331;
  font-weight: 800;
  box-shadow: 0 16px 32px rgba(255, 212, 59, 0.24);
}

.btn-padrisimo:hover,
.btn-padrisimo:focus {
  background: #ffe072;
  color: #172331;
}

.btn-outline-light {
  border-color: rgba(255, 255, 255, 0.56);
}

.section-pad {
  padding: clamp(4rem, 8vw, 7rem) 0;
}

.section-title {
  color: var(--padrisimo-navy);
  font-weight: 900;
  letter-spacing: 0;
}

.institutional-parallax {
  position: relative;
  overflow: hidden;
  color: var(--padrisimo-white);
  min-height: 111vh;
  display: grid;
  align-items: center;
  background: var(--padrisimo-navy);
}

.institutional-bg {
  position: absolute;
  inset: -12% 0;
  background:
    linear-gradient(90deg, rgba(7, 27, 45, 0.86) 0%, rgba(7, 27, 45, 0.58) 48%, rgba(7, 27, 45, 0.82) 100%),
    url("assets/img/spiritual-counseling-bg.png");
  background-size: cover;
  background-position: center;
  transform: translate3d(0, var(--institutional-y, 0), 0) scale(1.06);
  will-change: transform;
}

.institutional-parallax .section-title,
.institutional-parallax .lead,
.institutional-parallax p {
  color: var(--padrisimo-white);
}

.institutional-parallax .value-card {
  color: #ffc107;
  background: rgba(255, 255, 255, 1%);
  backdrop-filter: blur(10px);
}

.institutional-parallax .phrase {
  color: var(--padrisimo-white);
  background: rgba(255, 111, 79, 0.16);
  border-left-color: var(--padrisimo-coral);
  backdrop-filter: blur(10px);
}

.lead-tight {
  max-width: 840px;
}

.value-card,
.function-card,
.form-panel,
.cycle-step {
  background: var(--padrisimo-white);
  border: 1px solid rgba(16, 47, 74, 0.09);
  border-radius: 8px;
  box-shadow: 0 18px 50px rgba(7, 27, 45, 0.08);
}

.value-card {
  min-height: 118px;
  padding: 1.25rem;
  opacity:0;
  animation-duration:1s;
  animation-fill-mode:forwards;
  animation-timing-function:ease-out;
}

/* Primera columna */

.value-card:nth-child(4n+1){

    animation-name:slideLeft;

}


/* Segunda columna */

.value-card:nth-child(4n+2){

    animation-name:slideLeftSoft;

}


/* Tercera columna */

.value-card:nth-child(4n+3){

    animation-name:slideRightSoft;

}


/* Cuarta columna */

.value-card:nth-child(4n){

    animation-name:slideRight;

}


/*========================*/

@keyframes slideLeft{

    from{

        opacity:0;

        transform:translateX(-180px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

@keyframes slideLeftSoft{

    from{

        opacity:0;

        transform:translateX(-80px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

@keyframes slideRightSoft{

    from{

        opacity:0;

        transform:translateX(80px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

@keyframes slideRight{

    from{

        opacity:0;

        transform:translateX(180px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

.value-dot {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  border-radius: 50%;
  background: var(--padrisimo-blue);
}

.value-card:nth-child(3n + 1) .value-dot { background: var(--padrisimo-blue); }
.value-card:nth-child(3n + 2) .value-dot { background: var(--padrisimo-coral); }
.value-card:nth-child(3n + 3) .value-dot { background: var(--padrisimo-yellow); }

.parallax-band {
  position: relative;
  overflow: hidden;
  color: var(--padrisimo-white);
  background:
    linear-gradient(115deg, rgba(7, 27, 45, 0.94), rgba(16, 47, 74, 0.88)),
    url("assets/img/padrisimo-pattern.svg");
  background-attachment: fixed;
  background-size: cover;
}

.function-card {
  height: 100%;
  padding: 1.5rem;
}

.function-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: #172331;
  background: var(--padrisimo-yellow);
  font-weight: 900;
}

.culture {
  background: #ffffff;
}

.phrase {
  border-left: 5px solid var(--padrisimo-coral);
  background: #fff6ec;
}

.cycle-step {
  padding: 1.25rem;
  height: 100%;
}

.cycle-number {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #ffffff;
  background: var(--padrisimo-blue);
  font-weight: 900;
}

.forms-section {
  background:
    linear-gradient(180deg, rgba(255, 250, 240, 0.74), rgba(255, 250, 240, 1)),
    radial-gradient(circle at top right, rgba(77, 184, 255, 0.25), transparent 28rem);
}

.form-hero {
  padding-top: 9rem;
  color: var(--padrisimo-white);
  background:
    linear-gradient(135deg, rgba(7, 27, 45, 0.96), rgba(16, 47, 74, 0.92)),
    url("assets/img/padrisimo-pattern.svg");
  background-size: cover;
}

.form-panel {
  padding: clamp(1.25rem, 3vw, 2rem);
}

.contact-choice {
  display: flex;
  min-height: 260px;
  flex-direction: column;
}

.contact-choice .btn {
  margin-top: auto;
}

.g-recaptcha {
  min-height: 78px;
}

.form-control,
.form-select {
  border-radius: 8px;
  border-color: rgba(16, 47, 74, 0.18);
  min-height: 48px;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--padrisimo-blue);
  box-shadow: 0 0 0 0.2rem rgba(17, 136, 232, 0.15);
}

.footer {
  color: rgba(255, 255, 255, 0.78);
  background: var(--padrisimo-navy);
}

.footer strong {
  color: var(--padrisimo-white);
}


.value-card{

    position:relative;

    overflow:hidden;

    min-height:230px;

    padding:35px 28px;

    background:linear-gradient(
        180deg,
        #ffffff12 0%, 
        #f5faff00 100%
    );

    border:2px solid rgba(255,204,51,.9);

    border-radius:
        30px
        30px
        65px
        65px;

    box-shadow:
        0 12px 30px rgba(0,0,0,.12);

    transition:all .35s ease;

}


/* Barra superior */

.value-card::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:8px;

    background:linear-gradient(
        90deg,
        #0A4C91,
        #1E88E5,
        #FFD54F
    );

}


/* Icono decorativo */

.value-card::after{

    content:"🕊";

    position:absolute;

    top:18px;

    right:22px;

    font-size:34px;

    opacity:.18;

}


/* Hover */

.value-card:hover{

    transform:translateY(-8px);

    border-color:#0A4C91;

    box-shadow:
        0 18px 40px rgba(0,0,0,.20);

}


/* Títulos */

.value-card h3,
.value-card h4{

    color:#e0cb07;

    font-weight:700;

    margin-bottom:15px;

}


/* Texto */

.value-card p{

    color:#ffffff;

    line-height:1.8;

    font-size:16px;

}


/* Punto azul existente */

.value-card .dot,
.value-card span:first-child{

    width:14px;

    height:14px;

    border-radius:50%;

    background:#1E88E5;

    display:inline-block;

    margin-bottom:20px;

}


/*==============================
 BOTÓN FLOTANTE DE WHATSAPP
===============================*/

.whatsapp-float{

    position:fixed;

    right:28px;

    bottom:28px;

    z-index:99999;

    display:flex;

    align-items:center;

    gap:12px;

    padding:14px 22px;

    border-radius:60px;

    background:linear-gradient(
        135deg,
        #25D366,
        #1EBE57
    );

    color:#fff;

    text-decoration:none;

    font-weight:700;

    font-size:15px;

    box-shadow:
        0 10px 30px rgba(0,0,0,.28);

    transition:all .35s ease;

}

/* Icono */

.whatsapp-float svg{

    flex-shrink:0;

}

/* Hover */

.whatsapp-float:hover{

    transform:translateY(-5px) scale(1.05);

    box-shadow:
        0 18px 40px rgba(0,0,0,.35);

    color:#fff;

}

/* Pulso */

.whatsapp-float::before{

    content:"";

    position:absolute;

    inset:-8px;

    border-radius:60px;

    border:2px solid rgba(37,211,102,.45);

    animation:whatsPulse 2s infinite;

}

@keyframes whatsPulse{

    0%{

        transform:scale(.95);

        opacity:1;

    }

    70%{

        transform:scale(1.25);

        opacity:0;

    }

    100%{

        transform:scale(1.25);

        opacity:0;

    }

}

/* Responsive */

@media(max-width:768px){

    .whatsapp-float{

        right:18px;

        bottom:18px;

        padding:15px;

        border-radius:50%;

    }

    .whatsapp-float span{

        display:none;

    }

}


@media (max-width: 991.98px) {
  .hero {
    min-height: auto;
  }

  .hero-content {
    padding-top: 7rem;
  }

  .parallax-band {
    background-attachment: scroll;
  }

  .institutional-parallax {
    min-height: auto;
  }

  .institutional-bg {
    inset: 0;
    transform: none;
  }
}