/*
Theme Name: Despierta con Inma
Theme URI: https://despiertaconinma.com
Author: WeRise Performance
Description: Tema a medida para Despierta con Inma. Landing de conversion (VSL) y landing de venta (Vuelve a Ti). Sin constructores, sin dependencias externas.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GPL v2 or later
Text Domain: despierta-con-inma
*/

/* =========================================================
   TOKENS DE MARCA — unicos para toda la web
   ========================================================= */
:root{
  /* paleta soberana */
  --morado:#9B7A9E; --morado-light:#BFA6C1; --morado-rgb:155,122,158;
  --profundo:#5C446C; --profundo-mid:#4E3A5C; --profundo-deep:#3E2E4A; --profundo-rgb:92,68,108;
  --turquesa:#6E8795; --turquesa-deep:#516670; --turquesa-rgb:110,135,149;
  --malva:#B38D9F; --malva-deep:#966A7E; --malva-light:#D8B8C6; --malva-rgb:179,141,159;
  --tierra:#D57B3D; --tierra-deep:#B4632B; --tierra-rgb:213,123,61;
  --luz:#EBBE93;
  --crema:#F5F1EC; --crema-warm:#FBF7F2; --crema-deep:#ECE5DC;
  --rosa-a:#F4EAEF; --rosa-b:#EBDBE3;
  --turq-a:#E8EEEF; --turq-b:#DCE6E7;
  --texto:#382E3E; --texto-soft:rgba(56,46,62,.74); --texto-mut:rgba(56,46,62,.56);
  --sobre-oscuro:#F6EFE9; --sobre-oscuro-soft:rgba(246,239,233,.82);
  --sombra-rgb:62,46,74;

  /* CTA unificado: naranja tierra en TODA la web */
  --cta1:#C46E30; --cta2:#A5531D; --sobre-cta:#FFF7EF;

  /* tipografia unificada */
  --display:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --sans:'Manrope',system-ui,-apple-system,sans-serif;
  --ui:'DM Sans',system-ui,-apple-system,sans-serif;

  --radius:20px; --radius-lg:26px; --radius-sm:13px;
  --shadow-soft:0 2px 12px rgba(var(--sombra-rgb),.06),0 24px 54px -28px rgba(var(--sombra-rgb),.34);
  --shadow-malva:0 3px 14px rgba(var(--malva-rgb),.14),0 28px 60px -26px rgba(var(--profundo-rgb),.34);
  --shadow-tierra:0 3px 14px rgba(var(--tierra-rgb),.14),0 28px 60px -26px rgba(var(--tierra-rgb),.30);
  --shadow-lift:0 18px 44px -14px rgba(var(--sombra-rgb),.44),0 4px 14px -6px rgba(var(--malva-rgb),.30);
}
*{box-sizing:border-box;margin:0;padding:0}
img{max-width:100%;display:block;height:auto}
a{color:inherit}

/* =========================================================
   BOTON — identico en las dos landings
   ========================================================= */
.cta,.btn{display:inline-flex;align-items:center;gap:.55rem;white-space:nowrap;text-decoration:none;cursor:pointer;
  font-family:var(--sans);font-size:clamp(1.0625rem,1rem + .3vw,1.16rem);font-weight:600;letter-spacing:.005em;
  padding:1.02rem 2.05rem;border:none;border-radius:999px;color:var(--sobre-cta);
  background:linear-gradient(135deg,var(--cta1) 0%,var(--cta2) 100%);
  box-shadow:0 14px 32px -12px rgba(var(--tierra-rgb),.6),inset 0 1px 0 rgba(255,255,255,.2);
  transition:transform .38s cubic-bezier(.16,1,.3,1),box-shadow .38s cubic-bezier(.16,1,.3,1)}
.cta:hover,.btn:hover{transform:translateY(-3px);box-shadow:0 22px 46px -14px rgba(var(--tierra-rgb),.7),inset 0 1px 0 rgba(255,255,255,.2)}
.cta:active,.btn:active{transform:translateY(-1px)}
.cta .arw,.btn .arrow{transition:transform .38s cubic-bezier(.16,1,.3,1)}
.cta:hover .arw,.btn:hover .arrow{transform:translateX(4px)}
.cta:focus-visible,.btn:focus-visible,a:focus-visible,summary:focus-visible,button:focus-visible{
  outline:3px solid var(--tierra);outline-offset:3px;border-radius:6px}

/* =========================================================
   BARRA LEGAL — comun a los dos pies
   ========================================================= */
.legal-bar{margin-top:1.6rem;font-family:var(--ui);font-size:.85rem;line-height:2;
  color:var(--sobre-oscuro-soft);display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;justify-content:center}
.legal-bar a{text-decoration:none;border-bottom:1px solid rgba(246,239,233,.28);transition:border-color .3s,color .3s}
.legal-bar a:hover{color:var(--luz);border-color:var(--luz)}

/* =========================================================
   CABECERA CON MENU — comun a todas las paginas
   Dos variantes: clara (portada) y oscura (resto).
   ========================================================= */
.cab{position:sticky;top:0;z-index:60;border-bottom:1px solid transparent}
.cab-inner{width:100%;max-width:1150px;margin:0 auto;padding:.8rem clamp(18px,4vw,56px);
  display:flex;align-items:center;justify-content:space-between;gap:1rem}

.cab-marca{display:inline-flex;align-items:center;gap:.5em;text-decoration:none;
  font-family:var(--display);font-weight:600;font-size:1.3rem;letter-spacing:-.01em;white-space:nowrap}
.cab-marca img{width:26px;height:auto;flex:none}

.cab-menu{display:flex;align-items:center;gap:clamp(1rem,2.5vw,2rem)}
.cab-menu a{font-family:var(--ui);font-size:.9rem;font-weight:500;letter-spacing:.01em;
  text-decoration:none;padding:.3rem 0;border-bottom:1px solid transparent;transition:border-color .3s,color .3s}
.cab-menu a:hover,.cab-menu a[aria-current="page"]{border-bottom-color:currentColor}
.cab-cta{font-family:var(--ui);font-weight:700;font-size:.82rem;color:var(--sobre-cta)!important;
  background:linear-gradient(135deg,var(--cta1) 0%,var(--cta2) 100%);padding:10px 20px;border-radius:100px;
  text-decoration:none;white-space:nowrap;border:none!important;
  transition:transform .3s ease,box-shadow .3s ease}
.cab-cta:hover{transform:translateY(-2px);box-shadow:0 10px 24px -10px rgba(var(--tierra-rgb),.7)}

/* variante clara */
.cab-clara{background:rgba(245,241,236,.88);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom-color:rgba(var(--sombra-rgb),.10)}
.cab-clara .cab-marca{color:var(--texto)}
.cab-clara .cab-marca .punto{color:var(--malva)}
.cab-clara .cab-menu a{color:var(--texto-soft)}
.cab-clara .cab-menu a:hover,.cab-clara .cab-menu a[aria-current="page"]{color:var(--profundo)}

/* variante oscura */
.cab-oscura{background:var(--profundo-deep);border-bottom-color:rgba(246,239,233,.10)}
.cab-oscura .cab-marca{color:var(--sobre-oscuro)}
.cab-oscura .cab-marca img{filter:brightness(0) invert(1)}
.cab-oscura .cab-marca .punto{color:var(--malva-light)}
.cab-oscura .cab-menu a{color:var(--sobre-oscuro-soft)}
.cab-oscura .cab-menu a:hover,.cab-oscura .cab-menu a[aria-current="page"]{color:var(--luz)}

/* boton hamburguesa: solo en movil */
.cab-toggle{display:none;width:42px;height:42px;border:none;background:none;cursor:pointer;
  padding:0;align-items:center;justify-content:center;flex:none}
.cab-toggle span{display:block;width:22px;height:2px;background:currentColor;position:relative;
  transition:background .2s}
.cab-toggle span::before,.cab-toggle span::after{content:"";position:absolute;left:0;width:22px;height:2px;
  background:currentColor;transition:transform .3s cubic-bezier(.16,1,.3,1)}
.cab-toggle span::before{top:-7px}
.cab-toggle span::after{top:7px}
.cab-toggle[aria-expanded="true"] span{background:transparent}
.cab-toggle[aria-expanded="true"] span::before{transform:translateY(7px) rotate(45deg)}
.cab-toggle[aria-expanded="true"] span::after{transform:translateY(-7px) rotate(-45deg)}
.cab-clara .cab-toggle{color:var(--profundo)}
.cab-oscura .cab-toggle{color:var(--sobre-oscuro)}

@media(max-width:768px){
  .cab-inner{padding:.7rem 18px}
  .cab-marca{font-size:1.05rem}
  .cab-marca img{width:22px}
  .cab-toggle{display:flex}
  .cab-menu{position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;
    gap:0;padding:.4rem 18px 1.1rem;display:none}
  .cab-menu.abierto{display:flex}
  .cab-clara .cab-menu{background:rgba(245,241,236,.98);border-bottom:1px solid rgba(var(--sombra-rgb),.10)}
  .cab-oscura .cab-menu{background:var(--profundo-deep);border-bottom:1px solid rgba(246,239,233,.10)}
  .cab-menu a{padding:.85rem 0;font-size:1rem;border-bottom:1px solid rgba(var(--sombra-rgb),.08)}
  .cab-oscura .cab-menu a{border-bottom-color:rgba(246,239,233,.10)}
  .cab-cta{margin-top:.9rem;text-align:center;padding:12px 20px;font-size:.9rem;border-bottom:none!important}
  .cab-menu a.cab-cta{border-bottom:none}
}

/* =========================================================
   TAGLINE DE MARCA — firma en el pie de las dos landings
   ========================================================= */
.tagline{font-family:var(--ui);font-size:.8rem;font-weight:500;letter-spacing:.22em;
  text-transform:uppercase;color:var(--malva-light);margin:.1rem 0 1.2rem}

/* =========================================================
   LIGHTBOX — para ampliar los testimonios
   ========================================================= */
.lb{position:fixed;inset:0;z-index:999;background:rgba(62,46,74,.94);display:none;
  align-items:center;justify-content:center;padding:clamp(12px,3vw,40px);cursor:zoom-out}
.lb.open{display:flex}
.lb img{max-width:100%;max-height:100%;width:auto;border-radius:10px;box-shadow:0 30px 80px -20px rgba(0,0,0,.7);cursor:default}
.lb-close{position:absolute;top:clamp(10px,2vw,22px);right:clamp(10px,2vw,22px);width:46px;height:46px;
  border-radius:50%;border:none;background:rgba(246,239,233,.16);color:var(--sobre-oscuro);font-size:1.6rem;
  line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .3s}
.lb-close:hover{background:rgba(246,239,233,.3)}

/* accesibilidad */
.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:-9999px;top:0;z-index:1000;background:var(--profundo-deep);color:var(--sobre-oscuro);
  padding:.8rem 1.4rem;border-radius:0 0 10px 0;font-family:var(--ui);font-weight:600;text-decoration:none}
.skip-link:focus{left:0}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important}
  html{scroll-behavior:auto}
}