/*
Theme Name: Maya Boutique Authority
Theme URI: https://www.mayacomunicacion.com/
Author: Maya Comunicación
Author URI: https://www.mayacomunicacion.com/
Description: Tema institucional premium para Maya Comunicación como firma boutique de comunicación estratégica, reputación, SEO editorial y presencia pública.
Version: 1.1.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: maya-boutique-authority
Tags: custom-logo, custom-menu, one-column, responsive-layout, editor-style
*/

:root{
  --obsidian:#080A0D;
  --petrol:#0B1F2A;
  --graphite:#1B1E24;
  --old-gold:#B89B5E;
  --champagne:#D8C89A;
  --intel-blue:#1F6F8B;
  --smoke:#F2F0EA;
  --editorial-gray:#A7A9AC;
  --muted:#CDD0D2;
  --border:rgba(216,200,154,.18);
  --glass:rgba(255,255,255,.045);
  --shadow:0 22px 80px rgba(0,0,0,.45);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:
    radial-gradient(circle at 18% 5%, rgba(31,111,139,.24), transparent 34%),
    radial-gradient(circle at 88% 12%, rgba(184,155,94,.11), transparent 32%),
    linear-gradient(135deg,var(--obsidian),var(--petrol) 46%,var(--obsidian));
  color:var(--smoke);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height:1.55;
  overflow-x:hidden;
}
body:before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.12;
  background-image:
    linear-gradient(rgba(216,200,154,.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(216,200,154,.13) 1px, transparent 1px);
  background-size:72px 72px;
  mask-image:radial-gradient(circle at top, #000, transparent 70%);
  z-index:0;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto}
.container{width:min(1180px, calc(100% - 36px)); margin-inline:auto; position:relative; z-index:1}
.site-header{
  position:sticky; top:0; z-index:20;
  background:rgba(8,10,13,.76);
  backdrop-filter: blur(18px);
  border-bottom:1px solid rgba(216,200,154,.12);
}
.header-inner{display:flex; align-items:center; justify-content:space-between; min-height:82px; gap:24px}
.brand{display:flex; align-items:center; gap:14px}
.brand img{width:58px;height:58px;object-fit:contain;border-radius:50%;background:rgba(242,240,234,.96);padding:4px}
.brand strong{display:block; font-family: Georgia, "Times New Roman", serif; letter-spacing:.02em; font-size:1.12rem}
.brand span{display:block;color:var(--editorial-gray);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase}
.nav{display:flex;align-items:center; gap:22px}
.nav a{color:rgba(242,240,234,.78);font-size:.92rem}
.nav a:hover{color:var(--champagne)}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  border:1px solid rgba(216,200,154,.42);
  color:var(--smoke);
  padding:12px 18px;border-radius:999px;
  background:linear-gradient(135deg, rgba(184,155,94,.18), rgba(31,111,139,.12));
  box-shadow:0 12px 36px rgba(0,0,0,.18);
  font-weight:700;font-size:.92rem;
}
.btn:hover{border-color:var(--champagne); transform:translateY(-1px)}
.btn.primary{background:linear-gradient(135deg, var(--old-gold), var(--champagne)); color:#15120b}
.btn.ghost{background:transparent;color:var(--champagne)}
.hero{padding:92px 0 56px; min-height:760px; display:flex; align-items:center}
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:58px; align-items:center}
.eyebrow{
  display:inline-flex; align-items:center; gap:10px; color:var(--champagne);
  text-transform:uppercase; letter-spacing:.22em; font-size:.74rem; font-weight:800;
}
.eyebrow:before{content:""; width:42px;height:1px;background:var(--old-gold)}
h1,h2,h3{margin:0; line-height:1.02}
h1{
  font-family: Georgia, "Times New Roman", serif;
  font-weight:500; letter-spacing:-.05em;
  font-size:clamp(3.1rem, 7vw, 6.9rem);
  margin:18px 0 24px;
}
.hero h1 em{font-style:normal;color:var(--champagne)}
.lede{font-size:clamp(1.12rem, 2vw, 1.38rem); color:rgba(242,240,234,.84); max-width:720px}
.hero-actions{display:flex; flex-wrap:wrap; gap:14px; margin-top:34px}
.trust-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:42px}
.trust-card{
  border:1px solid var(--border); background:rgba(255,255,255,.035);
  border-radius:18px; padding:16px;
}
.trust-card b{font-family:Georgia,serif;color:var(--champagne);font-size:1.55rem}
.trust-card span{display:block;color:var(--editorial-gray);font-size:.83rem;margin-top:2px}
.hero-visual{
  position:relative; min-height:560px; border-radius:34px;
  border:1px solid rgba(216,200,154,.16);
  background:
    linear-gradient(145deg, rgba(8,10,13,.2), rgba(11,31,42,.58)),
    url('assets/img/hero-table.svg') center/cover no-repeat;
  box-shadow:var(--shadow);
  overflow:hidden;
}
.hero-visual:before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(circle at 25% 28%, rgba(216,200,154,.28), transparent 26%),
             linear-gradient(180deg, transparent 45%, rgba(8,10,13,.78));
}
.hero-visual .seal{
  position:absolute; left:28px; bottom:28px; right:28px;
  padding:22px; border:1px solid rgba(216,200,154,.2); border-radius:24px;
  background:rgba(8,10,13,.66); backdrop-filter:blur(18px);
}
.seal p{margin:0;color:var(--editorial-gray)}
.seal strong{display:block;color:var(--smoke);font-family:Georgia,serif;font-size:1.55rem;margin-bottom:6px}
.section{padding:92px 0; position:relative}
.section.alt{background:linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.01)); border-block:1px solid rgba(216,200,154,.08)}
.section-head{max-width:840px;margin-bottom:42px}
.section-head h2{
  font-family:Georgia,serif;font-weight:500;letter-spacing:-.035em;
  font-size:clamp(2.2rem, 4.5vw, 4.4rem); margin-top:12px
}
.section-head p{color:rgba(242,240,234,.72);font-size:1.08rem}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.card{
  background:linear-gradient(145deg, rgba(255,255,255,.06), rgba(255,255,255,.025));
  border:1px solid var(--border);
  border-radius:26px;
  padding:28px;
  min-height:230px;
  box-shadow:0 16px 46px rgba(0,0,0,.18);
}
.card .num{font-family:Georgia,serif;color:var(--old-gold);font-size:2.4rem;opacity:.75}
.card h3{font-size:1.28rem;margin:16px 0 12px}
.card p,.card li{color:rgba(242,240,234,.74)}
.card ul{padding-left:18px;margin:12px 0 0}
.pill-list{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.pill{border:1px solid rgba(216,200,154,.22);padding:10px 14px;border-radius:999px;color:var(--muted);background:rgba(255,255,255,.035);font-size:.9rem}
.split{display:grid;grid-template-columns:.9fr 1.1fr;gap:42px;align-items:start}
.panel{
  border:1px solid rgba(216,200,154,.18); border-radius:34px; padding:32px;
  background:linear-gradient(145deg, rgba(11,31,42,.64), rgba(8,10,13,.55));
  box-shadow:var(--shadow);
}
.panel h3{font-family:Georgia,serif;font-size:2.1rem;color:var(--champagne)}
.service-row{
  display:grid; grid-template-columns:72px 1fr; gap:20px; padding:24px 0;
  border-bottom:1px solid rgba(216,200,154,.12)
}
.service-row:last-child{border-bottom:0}
.service-row .icon{
  width:58px;height:58px;border-radius:50%;display:grid;place-items:center;
  border:1px solid rgba(216,200,154,.24);color:var(--champagne);font-family:Georgia,serif;font-size:1.2rem
}
.service-row h3{font-size:1.18rem;margin:0 0 6px}
.service-row p{margin:0;color:rgba(242,240,234,.72)}
.cta{
  padding:72px 0;
  background:
   radial-gradient(circle at 75% 10%, rgba(184,155,94,.18), transparent 28%),
   linear-gradient(135deg, rgba(11,31,42,.82), rgba(8,10,13,.96));
  border-block:1px solid rgba(216,200,154,.16);
}
.cta-box{display:flex;align-items:center;justify-content:space-between;gap:32px}
.cta h2{font-family:Georgia,serif;font-size:clamp(2rem,4vw,4rem)}
.cta p{max-width:680px;color:rgba(242,240,234,.76)}
.faq details{
  border:1px solid var(--border);border-radius:20px;margin-bottom:12px;background:rgba(255,255,255,.035);
  padding:20px 22px
}
.faq summary{cursor:pointer;font-weight:800;color:var(--smoke)}
.faq p{color:rgba(242,240,234,.72)}
.site-footer{padding:46px 0;border-top:1px solid rgba(216,200,154,.12);background:rgba(8,10,13,.66)}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:26px}
.site-footer p,.site-footer a{color:rgba(242,240,234,.68)}
.kicker{color:var(--champagne);text-transform:uppercase;letter-spacing:.16em;font-size:.72rem;font-weight:800}
.menu-toggle{display:none}
.wp-content{padding:80px 0}
.wp-content article{max-width:860px;margin:auto}
.wp-content h1{font-size:clamp(2.4rem,5vw,4.8rem)}
.wp-content p{color:rgba(242,240,234,.82);font-size:1.06rem}
.screen-reader-text{position:absolute;left:-9999px}

@media(max-width:920px){
  .menu-toggle{display:inline-flex;background:transparent;color:var(--smoke);border:1px solid var(--border);border-radius:999px;padding:10px 14px}
  .nav{display:none;position:absolute;left:18px;right:18px;top:82px;flex-direction:column;align-items:stretch;padding:18px;background:rgba(8,10,13,.96);border:1px solid var(--border);border-radius:22px}
  .nav.open{display:flex}
  .hero{padding:60px 0 40px;min-height:auto}
  .hero-grid,.grid-3,.grid-2,.split,.footer-grid{grid-template-columns:1fr}
  .hero-visual{min-height:440px}
  .trust-strip{grid-template-columns:1fr}
  .cta-box{display:block}
  h1{letter-spacing:-.04em}
}


/* Botones flotantes: WhatsApp + chatbot FAQ */
.maya-floating-actions{
  position:fixed;
  right:22px;
  bottom:22px;
  z-index:60;
  display:flex;
  flex-direction:column;
  gap:10px;
  align-items:flex-end;
}
.whatsapp-float,
.chatbot-toggle{
  border:1px solid rgba(216,200,154,.36);
  background:linear-gradient(135deg, rgba(184,155,94,.95), rgba(216,200,154,.98));
  color:#15120b;
  padding:13px 17px;
  border-radius:999px;
  font-weight:900;
  font-size:.92rem;
  box-shadow:0 16px 45px rgba(0,0,0,.32);
  cursor:pointer;
}
.chatbot-toggle{
  background:rgba(8,10,13,.86);
  color:var(--champagne);
  backdrop-filter:blur(14px);
}
.whatsapp-float:hover,
.chatbot-toggle:hover{
  transform:translateY(-1px);
  border-color:var(--champagne);
}
.maya-chatbot{
  position:fixed;
  right:22px;
  bottom:118px;
  z-index:70;
  width:min(390px, calc(100vw - 36px));
}
.chatbot-card{
  border:1px solid rgba(216,200,154,.22);
  border-radius:28px;
  background:linear-gradient(145deg, rgba(8,10,13,.98), rgba(11,31,42,.96));
  box-shadow:0 28px 90px rgba(0,0,0,.56);
  overflow:hidden;
}
.chatbot-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:16px;
  padding:22px 22px 16px;
  border-bottom:1px solid rgba(216,200,154,.12);
}
.chatbot-head h3{
  font-family:Georgia, "Times New Roman", serif;
  color:var(--smoke);
  font-size:1.5rem;
  margin-top:4px;
}
.chatbot-close{
  width:34px;
  height:34px;
  border-radius:50%;
  border:1px solid rgba(216,200,154,.24);
  background:rgba(255,255,255,.04);
  color:var(--champagne);
  font-size:1.5rem;
  line-height:1;
  cursor:pointer;
}
.chatbot-body{
  padding:18px 22px;
}
.bot-message{
  background:rgba(255,255,255,.055);
  border:1px solid rgba(216,200,154,.14);
  border-radius:18px;
  padding:14px 15px;
  color:rgba(242,240,234,.82);
  font-size:.94rem;
}
.chatbot-quick{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:14px 0;
}
.chatbot-quick button{
  border:1px solid rgba(216,200,154,.22);
  background:rgba(255,255,255,.035);
  color:var(--champagne);
  border-radius:999px;
  padding:9px 11px;
  cursor:pointer;
  font-size:.82rem;
}
.chatbot-quick button:hover{
  background:rgba(216,200,154,.11);
}
.chatbot-answer{
  margin-top:10px;
}
.chatbot-form{
  display:flex;
  gap:8px;
  padding:0 22px 16px;
}
.chatbot-form input{
  flex:1;
  min-width:0;
  border:1px solid rgba(216,200,154,.18);
  background:rgba(255,255,255,.05);
  color:var(--smoke);
  border-radius:999px;
  padding:12px 14px;
  outline:none;
}
.chatbot-form input::placeholder{
  color:rgba(242,240,234,.48);
}
.chatbot-form button,
.chatbot-whatsapp{
  border:1px solid rgba(216,200,154,.32);
  border-radius:999px;
  background:linear-gradient(135deg, var(--old-gold), var(--champagne));
  color:#15120b;
  font-weight:900;
  padding:12px 14px;
  cursor:pointer;
}
.chatbot-whatsapp{
  display:block;
  margin:0 22px 22px;
  text-align:center;
}

@media(max-width:720px){
  .maya-floating-actions{
    right:16px;
    bottom:16px;
  }
  .whatsapp-float span{font-size:0}
  .whatsapp-float span:after{content:"WhatsApp"; font-size:.9rem}
  .maya-chatbot{
    right:16px;
    bottom:106px;
  }
  .chatbot-form{
    flex-direction:column;
  }
}