/*
Theme Name: Pensionate
Theme URI: https://www.pensionate.com.co
Description: Tema corporativo a medida para Pensionate — Especialistas en Pensiones. Diseño de una sola página con secciones de servicios, perfil corporativo y formulario de consulta gratuita. Desarrollado por Inmersivo Consultores. Colores, tipografía, datos de contacto y redes sociales editables desde Apariencia → Personalizar.
Author: Inmersivo Consultores
Author URI: https://www.inmersivoconsultores.com
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: pensionate
Tags: business, custom-colors, custom-logo, custom-menu, featured-images, one-column, translation-ready
*/

/* ============================================================
   1. TOKENS DE MARCA  (paleta tomada del logo Pensionate)
   ============================================================ */
:root{
  --verde:        #00963C;   /* verde árbol del logo — color primario */
  --verde-dark:   #007A30;   /* hover / estados activos */
  --verde-soft:   rgba(0,150,60,.10);
  --azul:         #1E3FA8;   /* azul institucional — encabezados/secundario */
  --azul-dark:    #16307E;
  --azul-soft:    rgba(30,63,168,.10);
  --navy:         #0F2A4A;   /* fondos oscuros / topbar */
  --navy-900:     #0B1E36;
  --ink:          #1E293B;   /* texto principal */
  --ink-soft:     #475569;   /* texto secundario */
  --muted:        #64748B;
  --line:         #E2E8F0;
  --surface:      #FFFFFF;
  --surface-alt:  #F1F5F9;   /* franjas de sección */
  --white:        #FFFFFF;

  --radius:       .75rem;
  --radius-lg:    1.5rem;
  --radius-pill:  999px;
  --shadow-sm:    0 1px 3px rgba(15,42,74,.06), 0 1px 2px rgba(15,42,74,.04);
  --shadow-md:    0 10px 25px rgba(15,42,74,.10);
  --shadow-lg:    0 25px 50px -12px rgba(15,42,74,.25);
  --maxw:         1180px;
  --ff-display:   'Montserrat', system-ui, -apple-system, sans-serif;
  --ff-serif:     'Playfair Display', Georgia, serif;
}

/* ============================================================
   2. RESET / BASE
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--ff-display);
  font-weight:400;
  color:var(--ink);
  background:var(--surface);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none;transition:color .25s ease}
h1,h2,h3,h4,h5{font-family:var(--ff-display);line-height:1.15;margin:0;color:var(--ink)}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
button{font-family:inherit;cursor:pointer}
:focus-visible{outline:3px solid var(--verde);outline-offset:2px}

.container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:1.25rem}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
.skip-link{position:absolute;left:-999px;top:0;z-index:200;background:var(--verde);color:#fff;padding:.75rem 1.25rem;border-radius:0 0 .5rem 0}
.skip-link:focus{left:0}

/* ============================================================
   3. BOTONES
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-weight:700;font-size:.95rem;letter-spacing:.01em;
  padding:.9rem 1.75rem;border-radius:var(--radius);border:2px solid transparent;
  transition:transform .2s ease, background .25s ease, box-shadow .25s ease;
}
.btn .material-icons-outlined{font-size:1.2em}
.btn-green{background:var(--verde);color:#fff;box-shadow:var(--shadow-sm)}
.btn-green:hover{background:var(--verde-dark);box-shadow:var(--shadow-md);color:#fff}
.btn-blue{background:var(--azul);color:#fff;box-shadow:var(--shadow-md)}
.btn-blue:hover{background:var(--azul-dark);color:#fff;transform:translateY(-2px)}
.btn-pill{border-radius:var(--radius-pill);padding:.7rem 1.5rem;font-size:.9rem}
.btn-block{width:100%;padding:1.05rem;font-size:1rem}

/* ============================================================
   4. TOPBAR
   ============================================================ */
.topbar{background:var(--navy-900);color:#fff;font-size:.78rem}
.topbar__inner{max-width:var(--maxw);margin-inline:auto;padding:.5rem 1.25rem;display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}
.topbar__group{display:flex;gap:1.5rem;flex-wrap:wrap;align-items:center}
.topbar__item{display:inline-flex;align-items:center;gap:.35rem;color:rgba(255,255,255,.85)}
.topbar__item .material-icons-outlined{font-size:1rem;color:var(--verde)}
.topbar__social{display:flex;gap:1rem}
.topbar__social a{font-weight:600;color:rgba(255,255,255,.85)}
.topbar__social a:hover{color:var(--verde)}
@media(max-width:860px){.topbar{display:none}}

/* ============================================================
   5. HEADER / NAV
   ============================================================ */
.site-header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav{max-width:var(--maxw);margin-inline:auto;padding:.75rem 1.25rem;height:80px;display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:.75rem}
.brand__logo{height:52px;width:auto;object-fit:contain}
.brand__text h1{font-size:1.5rem;font-weight:800;letter-spacing:-.02em;color:var(--verde);line-height:1}
.brand__text p{font-size:.6rem;text-transform:uppercase;letter-spacing:.2em;font-weight:700;color:var(--azul);margin-top:.15rem}
@media(max-width:520px){.brand__text{display:none}}

.menu{display:flex;align-items:center;gap:2rem}
.menu a{font-weight:600;font-size:.95rem;color:var(--ink)}
.menu a:hover,.menu .current-menu-item>a,.menu .current_page_item>a{color:var(--verde)}
.menu__cta a,.menu li.cta a{background:var(--verde);color:#fff;padding:.65rem 1.4rem;border-radius:var(--radius-pill);box-shadow:var(--shadow-sm)}
.menu__cta a:hover,.menu li.cta a:hover{background:var(--verde-dark);color:#fff}

.nav-toggle{display:none;background:none;border:0;padding:.5rem;color:var(--ink)}
.nav-toggle .material-icons-outlined{font-size:2rem}

@media(max-width:860px){
  .nav-toggle{display:inline-flex}
  .menu{
    position:absolute;top:80px;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:#fff;border-bottom:1px solid var(--line);box-shadow:var(--shadow-md);
    padding:.5rem 1.25rem 1.25rem;
    display:none;
  }
  .menu.is-open{display:flex}
  .menu a{padding:.85rem .25rem;border-bottom:1px solid var(--surface-alt)}
  .menu__cta a,.menu li.cta a{margin-top:.75rem;text-align:center;border-bottom:0}
}

/* ============================================================
   6. HERO
   ============================================================ */
.hero{position:relative;min-height:600px;display:flex;align-items:center;overflow:hidden}
.hero__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center right}
.hero__overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.96) 0%,rgba(255,255,255,.82) 45%,rgba(255,255,255,.15) 78%,rgba(255,255,255,0) 100%)}
.hero__inner{position:relative;z-index:2;width:100%}
.hero__content{max-width:640px;display:flex;flex-direction:column;gap:1.5rem;padding-block:3rem}
.hero h2{font-size:clamp(2.4rem,6vw,4.5rem);font-weight:900;letter-spacing:-.02em;color:var(--navy)}
.hero h2 em{display:block;font-style:italic;color:var(--verde)}
.hero__lead{font-size:1.25rem;color:var(--ink-soft);max-width:34rem}
@media(max-width:640px){
  .hero__overlay{background:linear-gradient(180deg,rgba(255,255,255,.94) 0%,rgba(255,255,255,.9) 100%)}
}

/* ============================================================
   7. SECCIONES GENERALES
   ============================================================ */
.section{padding-block:6rem}
.section--alt{background:var(--surface-alt)}
.section--dark{background:var(--navy);color:#fff;position:relative;overflow:hidden}
.section-head{text-align:center;max-width:640px;margin:0 auto 4rem}
.section-head h3{font-size:clamp(1.75rem,3vw,2.25rem);font-weight:700;color:var(--azul)}
.section-head .rule{width:96px;height:4px;background:var(--verde);margin:1rem auto 0;border-radius:2px}
.eyebrow{font-size:.8rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--verde)}

/* ============================================================
   8. SERVICIOS
   ============================================================ */
.services-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.75rem}
@media(max-width:1024px){.services-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.services-grid{grid-template-columns:1fr}}
.service-card{
  background:#fff;padding:2rem;border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);border-bottom:4px solid var(--verde);
  transition:transform .25s ease, box-shadow .25s ease;
}
.service-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg)}
.service-card:nth-child(even){border-bottom-color:var(--azul)}
.service-card__icon{
  width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  margin-bottom:1.5rem;background:var(--verde-soft);color:var(--verde);
}
.service-card:nth-child(even) .service-card__icon{background:var(--azul-soft);color:var(--azul)}
.service-card__icon .material-icons-outlined{font-size:1.9rem}
.service-card h4{font-size:1.2rem;font-weight:700;margin-bottom:.75rem;transition:color .25s ease}
.service-card:hover h4{color:var(--verde)}
.service-card:nth-child(even):hover h4{color:var(--azul)}
.service-card p{font-size:.9rem;color:var(--ink-soft);line-height:1.65}

/* ============================================================
   9. CONÓCENOS / PERFIL
   ============================================================ */
.about{display:flex;align-items:center;gap:4rem}
@media(max-width:900px){.about{flex-direction:column;gap:2.5rem}}
.about__media{flex:1;position:relative}
.about__media::before,.about__media::after{content:"";position:absolute;border-radius:50%;filter:blur(40px);z-index:0}
.about__media::before{top:-1rem;left:-1rem;width:6rem;height:6rem;background:var(--verde-soft)}
.about__media::after{bottom:-1rem;right:-1rem;width:8rem;height:8rem;background:var(--azul-soft)}
.about__media img{position:relative;z-index:1;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);width:100%;aspect-ratio:4/3;object-fit:cover}
.about__body{flex:1;display:flex;flex-direction:column;gap:1.5rem}
.about__body h3{font-size:clamp(1.9rem,3vw,2.5rem);font-weight:800;color:var(--azul);margin-top:.5rem}
.about__body .rule{width:80px;height:5px;background:var(--verde);border-radius:3px}
.about__body p{font-size:1.05rem;color:var(--ink-soft);line-height:1.75}
.about__body strong{color:var(--verde);font-weight:700}
.about__link{display:inline-flex;align-items:center;gap:.5rem;font-weight:700;color:var(--azul);width:fit-content}
.about__link:hover{color:var(--verde)}

/* ============================================================
   10. CONTACTO (sección oscura + formulario)
   ============================================================ */
.section--dark::before{content:"";position:absolute;top:0;right:0;width:33%;height:100%;background:var(--verde-soft);transform:skewX(-12deg) translateX(4rem)}
.contact{display:flex;gap:4rem;position:relative;z-index:2}
@media(max-width:900px){.contact{flex-direction:column;gap:2.5rem}}
.contact__intro{flex:1}
.contact__intro h3{font-size:clamp(2.2rem,4vw,3rem);font-weight:900;color:#fff;margin-bottom:1.25rem}
.contact__intro h3 span{color:var(--verde)}
.contact__intro>p{color:rgba(255,255,255,.65);font-size:1.15rem;margin-bottom:2.5rem;max-width:32rem}
.contact__cards{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:center}
@media(max-width:560px){.contact__cards{grid-template-columns:1fr}}
.contact__photo{border-radius:var(--radius);box-shadow:var(--shadow-lg);border:1px solid rgba(255,255,255,.12);width:100%;object-fit:cover;aspect-ratio:4/5}
.contact__facts{display:flex;flex-direction:column;gap:1.5rem}
.contact__fact{display:flex;align-items:center;gap:1rem}
.contact__fact-ic{width:48px;height:48px;border-radius:var(--radius);background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.contact__fact:nth-child(1) .contact__fact-ic{color:var(--verde)}
.contact__fact:nth-child(2) .contact__fact-ic{color:#7CA0FF}
.contact__fact small{display:block;color:rgba(255,255,255,.55);font-size:.85rem}
.contact__fact b{color:#fff;font-size:1.05rem}

.contact__form-wrap{flex:1}
.contact-form{background:#fff;color:var(--ink);padding:2.5rem;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg)}
@media(max-width:520px){.contact-form{padding:1.75rem}}
.contact-form .grid{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem}
.contact-form .full{grid-column:1/-1}
@media(max-width:520px){.contact-form .grid{grid-template-columns:1fr}}
.field label{display:block;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:.5rem}
.field input,.field select,.field textarea{
  width:100%;background:var(--surface-alt);border:1px solid transparent;border-radius:var(--radius);
  padding:.85rem 1rem;font-family:inherit;font-size:.95rem;color:var(--ink);transition:.2s ease;
}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--verde);background:#fff;box-shadow:0 0 0 3px var(--verde-soft)}
.field textarea{resize:vertical;min-height:120px}
.form-alert{grid-column:1/-1;padding:.9rem 1.1rem;border-radius:var(--radius);font-size:.92rem;font-weight:600}
.form-alert--ok{background:#ECFDF3;color:#027A48;border-left:4px solid var(--verde)}
.form-alert--err{background:#FEF3F2;color:#B42318;border-left:4px solid #F04438}

/* ============================================================
   11. FOOTER
   ============================================================ */
.site-footer{background:var(--verde);color:#fff;padding-block:3rem}
.site-footer__inner{max-width:var(--maxw);margin-inline:auto;padding-inline:1.25rem;display:flex;justify-content:space-between;align-items:center;gap:2rem;flex-wrap:wrap}
.site-footer__brand{display:flex;align-items:center;gap:.9rem}
.site-footer__logo{background:#fff;padding:.5rem;border-radius:var(--radius);display:flex}
.site-footer__logo img{height:34px;width:auto}
.site-footer__brand b{font-weight:900;letter-spacing:-.01em;display:block}
.site-footer__brand small{font-size:.6rem;text-transform:uppercase;letter-spacing:.1em;opacity:.85}
.site-footer__meta{font-size:.88rem;opacity:.9;text-align:right}
@media(max-width:640px){.site-footer__inner{flex-direction:column;text-align:center}.site-footer__meta{text-align:center}}

/* ============================================================
   12. DOCK REDES (barra flotante derecha)
   ============================================================ */
.social-dock{position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:90;display:flex;flex-direction:column;gap:.25rem}
.social-dock a{display:flex;align-items:center;justify-content:center;width:48px;height:48px;color:#fff;border-radius:.6rem 0 0 .6rem;box-shadow:var(--shadow-md);transition:width .25s ease}
.social-dock a:hover{width:56px}
.social-dock .is-wa{background:#25D366}
.social-dock .is-ig{background:#E1306C}
.social-dock .is-fb{background:#1877F2}
.social-dock .material-icons-outlined{font-size:1.4rem}
@media(max-width:640px){.social-dock a{width:44px;height:44px}}

/* ============================================================
   13. CONTENIDO GENÉRICO (page.php / index.php)
   ============================================================ */
.page-hero{background:var(--navy);color:#fff;padding-block:4rem}
.page-hero h1{font-size:clamp(2rem,4vw,3rem);font-weight:800;color:#fff}
.entry{padding-block:4rem}
.entry .container{max-width:820px}
.entry h1,.entry h2,.entry h3{color:var(--navy);margin:1.75rem 0 .75rem}
.entry p{margin-bottom:1.15rem;color:var(--ink-soft);font-size:1.05rem}
.entry a{color:var(--azul);text-decoration:underline}
.entry img{border-radius:var(--radius);margin-block:1.5rem}
.wp-caption-text{font-size:.85rem;color:var(--muted)}

/* ============================================================
   14. UTIL / ANIMACIONES
   ============================================================ */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease}
.reveal.is-visible{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
}