/*
Theme Name: Crafting 2026
Theme URI: https://crafting.com.py
Author: Usable HQ
Author URI: https://usable.com.py/
Description: Tema a medida para Crafting Business & Brands, construido a partir de la demo de identidad 2026. El CSS es idéntico al de la maqueta aprobada, por lo que el render es exacto. Sin dependencias de plugins.
Version: 2.2.0
Requires at least: 6.0
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: crafting-2026
*/

/* ==========================================================================
   El bloque siguiente es el CSS de la maqueta aprobada, copiado sin cambios.
   NO editar a mano: si cambia la maqueta, se vuelve a extraer.
   Los ajustes propios de WordPress van al final, en su propia sección.
   ========================================================================== */

/* ================================================================
   CRAFTING BUSINESS & BRANDS — DEMO NAVEGABLE (7 páginas)
   Fiel al Manual de Identidad 2026
   ----------------------------------------------------------------
   PALETA (cap. 06):  BEIGE #D8D4CB · SAND #6C614C · TEAL #437075 · BLACK #000000
   TIPOGRAFÍAS (cap. 07): Títulos GILL SANS SEMI BOLD (web: Cabin)
                          Cuerpo SEITU REGULAR (web: Mulish)
   RECURSOS (cap. 08): gradientes · texto delineado · "01." + "// …"
                       línea fina · esquinas amplias
   Imágenes: fotos y logos reales de crafting.com.py (requiere internet)
   ================================================================ */
:root{
  --beige:#D8D4CB; --sand:#6C614C; --teal:#437075; --teal-osc:#38595E;
  --black:#000000; --blanco:#FFFFFF;
  --linea-clara:rgba(0,0,0,.14); --linea-oscura:rgba(216,212,203,.18);
  --max:1240px; --r:22px;
  --titulos:"Cabin","Gill Sans","Gill Sans MT",system-ui,sans-serif;
  --cuerpo:"Mulish","Seitu",system-ui,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--cuerpo);font-size:16px;line-height:1.7;color:var(--black);background:var(--beige);-webkit-font-smoothing:antialiased}
::selection{background:var(--teal);color:var(--blanco)}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit;background:none;border:none;cursor:pointer;color:inherit}
input,textarea{font-family:inherit;color:inherit}
.wrap{max-width:var(--max);margin:0 auto;padding:0 40px}
:focus-visible{outline:2px solid var(--teal);outline-offset:3px}

/* ---------- tipografía ---------- */
.h1{font-family:var(--titulos);font-weight:600;text-transform:uppercase;font-size:clamp(1.9rem,3.6vw,3.1rem);line-height:1.18;letter-spacing:.02em}
.h2{font-family:var(--titulos);font-weight:600;text-transform:uppercase;font-size:clamp(1.5rem,2.6vw,2.15rem);line-height:1.2;letter-spacing:.02em}
.lead{font-size:16.5px;max-width:66ch}
.center{text-align:center}
.center .lead{margin-left:auto;margin-right:auto}
.tag{display:inline-flex;align-items:baseline;gap:10px;font-family:var(--titulos);font-weight:600;font-size:12px;letter-spacing:.3em;text-transform:uppercase}
.tag i{font-style:normal;color:var(--teal);letter-spacing:0}
.cap{display:flex;align-items:flex-start;gap:26px}
.cap .num{font-family:var(--titulos);font-weight:700;line-height:.9;font-size:clamp(3rem,5.4vw,4.4rem)}
.cap .linea-v{width:1px;align-self:stretch;background:currentColor;opacity:.28}
.cap .textos .tag{margin-bottom:14px}
.cap .textos .h2{margin-bottom:14px}
.outline{font-family:var(--titulos);font-weight:600;text-transform:uppercase;color:transparent;-webkit-text-stroke:1px rgba(216,212,203,.34);user-select:none;pointer-events:none}
@supports not (-webkit-text-stroke:1px black){.outline{color:rgba(216,212,203,.12)}}

/* ---------- botones ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:13px;padding:15px 30px;border-radius:10px;font-family:var(--titulos);font-weight:600;font-size:12px;letter-spacing:.22em;text-transform:uppercase;border:1px solid transparent;transition:background .35s,color .35s,border-color .35s}
.btn .fl{transition:transform .35s ease}
.btn:hover .fl{transform:translateX(6px)}
.btn-teal{background:var(--teal);color:var(--blanco)}
.btn-teal:hover{background:var(--teal-osc)}
.btn-ghost{border-color:currentColor}
.btn-ghost:hover{border-color:var(--teal);color:var(--teal)}
.oscuro .btn-ghost:hover,.sand .btn-ghost:hover,.tealband .btn-ghost:hover{border-color:var(--beige);background:var(--beige);color:var(--black)}
.link-sub{font-family:var(--titulos);font-weight:600;font-size:12px;letter-spacing:.2em;text-transform:uppercase;border-bottom:1px solid var(--teal);padding-bottom:6px;transition:color .3s}
.link-sub:hover{color:var(--teal)}
.btn-mini{display:inline-flex;align-items:center;gap:8px;padding:9px 18px;border-radius:8px;border:1px solid rgba(0,0,0,.3);font-family:var(--titulos);font-weight:600;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;transition:all .3s}
.btn-mini:hover{border-color:var(--teal);color:var(--teal)}

/* ---------- fotografía ---------- */
.photo{position:relative;overflow:hidden;border-radius:var(--r);background:linear-gradient(150deg,#b9b3a6 0%,#8d8474 45%,#5c5342 100%)}
.photo img{position:relative;z-index:1;width:100%;height:100%;object-fit:cover;filter:saturate(.92) contrast(1.02);transition:transform 1.1s cubic-bezier(.19,1,.22,1)}

/* ---------- banner interno ---------- */
.banner{position:relative;height:300px;overflow:hidden;background:var(--black)}
.banner img{width:100%;height:100%;object-fit:cover;filter:saturate(.85) contrast(1.02);opacity:.85}
.banner::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.25) 0%,rgba(0,0,0,0) 40%,rgba(0,0,0,.72) 100%)}
.banner .ghost{position:absolute;z-index:2;left:34px;bottom:-12px;font-size:clamp(3.4rem,8vw,7rem);line-height:1;white-space:nowrap}

/* ---------- marca / header ---------- */
.marca{display:inline-flex;align-items:center;}
.marca img {height: 48px; width: auto; object-fit: contain; transition: opacity 0.3s;}
.marca:hover img {opacity: 0.8;}

.topbar{background:var(--black);border-bottom:1px solid var(--linea-oscura)}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;gap:24px;padding-top:10px;padding-bottom:10px}
.topbar .datos{display:flex;gap:28px;flex-wrap:wrap}
.topbar .datos a,.topbar .datos span{font-size:12.5px;letter-spacing:.05em;color:var(--sand);transition:color .3s}
.topbar .datos a:hover{color:var(--beige)}
.topbar .redes{display:flex;gap:16px;align-items:center}
.topbar .redes a{color:var(--beige);opacity:.8;transition:opacity .3s,color .3s}
.topbar .redes a:hover{opacity:1;color:var(--teal)}
.topbar svg{width:15px;height:15px}
.header{background:var(--black);padding:32px 0 0;position:relative;z-index:20;text-align:center}
.nav{display:flex;justify-content:center;flex-wrap:wrap;gap:6px 36px;padding:26px 24px 24px}
.nav a{position:relative;font-family:var(--titulos);font-weight:600;font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--beige);padding-bottom:8px;transition:color .3s}
.nav a::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--teal);transition:width .35s ease}
.nav a:hover,.nav a.activo{color:var(--teal)}
.nav a:hover::after,.nav a.activo::after{width:100%}

/* ---------- router de páginas ---------- */
.pagina{display:none}
.pagina.visible{display:block;animation:fadePage .55s ease}
@keyframes fadePage{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ---------- hero inicio ---------- */
.hero{position:relative;overflow:hidden;color:var(--beige);
  background:
    radial-gradient(95% 120% at 88% 100%, rgba(67,112,117,.62) 0%, rgba(67,112,117,0) 58%),
    radial-gradient(80% 90% at 6% -6%, rgba(108,97,76,.72) 0%, rgba(108,97,76,0) 55%),
    linear-gradient(140deg, rgba(216,212,203,.14) 0%, rgba(216,212,203,0) 34%),
    var(--black)}
.hero .haz{position:absolute;inset:0;pointer-events:none;background:linear-gradient(118deg,transparent 46%,rgba(216,212,203,.10) 55%,transparent 66%)}
.hero .sello{position:absolute;left:34px;top:50%;transform:translateY(-50%) rotate(180deg);writing-mode:vertical-rl;font-family:var(--titulos);font-weight:600;font-size:10px;letter-spacing:.5em;text-transform:uppercase;color:rgba(216,212,203,.4)}
.hero .wrap{position:relative;z-index:2;padding-top:120px;padding-bottom:150px;max-width:1000px}
.hero .tag{color:var(--beige);margin-bottom:26px}
.hero .h1{max-width:21em;background:linear-gradient(96deg,var(--beige) 0%,#B4AC9C 34%,#8E9C93 62%,var(--teal) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
@supports not (background-clip:text){.hero .h1{color:var(--beige)}}
.hero .h1 b{font-weight:600;color:var(--teal);-webkit-text-fill-color:var(--teal)}
.hero .acciones{display:flex;align-items:center;gap:34px;flex-wrap:wrap;margin-top:44px;color:var(--beige)}

/* ---------- bandas ---------- */
.sand{background:var(--sand);color:var(--beige)}
.sand .lead,.sand p{color:rgba(216,212,203,.92)}
.sand p b{color:var(--blanco);font-weight:600}
.oscuro{background:var(--black);color:var(--beige)}
.oscuro .lead{color:rgba(216,212,203,.75)}
.tealband{background:var(--teal);color:var(--beige)}
.tealband .lead{color:rgba(216,212,203,.88)}
.tealband .tag i,.sand .tag i{color:var(--beige)}
.blanca{background:var(--blanco)}

.trayectoria .wrap{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.88fr);gap:80px;align-items:center;padding-top:110px;padding-bottom:110px}
.trayectoria .h2{margin-bottom:20px;max-width:19em}
.trayectoria p{max-width:54ch;margin-bottom:36px}
.trayectoria .photo{aspect-ratio:4/4.4}
.mini-num{font-family:var(--titulos);font-weight:700;font-size:13px;letter-spacing:.3em;color:rgba(216,212,203,.55);margin-bottom:18px}

.seccion{padding:112px 0;position:relative}
.cab{margin-bottom:64px}
.cab-flex{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;flex-wrap:wrap}

/* ---------- servicios (inicio) ---------- */
.servicios-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:30px}
.servicio{background:var(--blanco);border-radius:var(--r);overflow:hidden;transition:transform .45s,box-shadow .45s;text-align:left}
.servicio:hover{transform:translateY(-5px);box-shadow:0 22px 48px rgba(0,0,0,.1)}
.servicio .photo{aspect-ratio:4/2.9;border-radius:0}
.servicio:hover .photo img{transform:scale(1.05)}
.servicio .datos{padding:22px 24px 26px}
.servicio .num{font-family:var(--titulos);font-weight:700;font-size:13px;letter-spacing:.14em;color:var(--teal);display:block;margin-bottom:8px}
.servicio h3{font-family:var(--titulos);font-weight:600;text-transform:uppercase;font-size:14px;letter-spacing:.08em;line-height:1.45;transition:color .3s}
.servicio:hover h3{color:var(--teal)}

/* ---------- casos ---------- */
.casos-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:44px 30px}
.caso{grid-column:span 2}
.caso:nth-child(4),.caso:nth-child(5){grid-column:span 3}
.caso .photo{aspect-ratio:16/10}
.caso:hover .photo img{transform:scale(1.05)}
.caso figcaption{padding:20px 4px 0}
/* Casos como enlace, con filtro por sector. La grilla de 6 columnas y los
   span:3 estaban pensados para las 5 tarjetas de sector; con los 12 casos
   por cliente se usa una grilla pareja de 3. */
.caso{display:block;text-decoration:none;color:inherit}
.caso[hidden]{display:none}
.caso .link-sub{display:inline-block;margin-top:12px;font-size:10.5px;letter-spacing:.18em}
.caso:hover .link-sub{color:var(--teal)}
#grilla-casos{grid-template-columns:repeat(3,1fr);gap:44px 30px}
#grilla-casos .caso,#grilla-casos .caso:nth-child(4),#grilla-casos .caso:nth-child(5){grid-column:auto}
.tabs-casos{margin:30px 0 46px}
.oscuro .tabs-casos{border-bottom-color:var(--linea-oscura)}
.oscuro .tabs-casos .tab{color:rgba(216,212,203,.6)}
.oscuro .tabs-casos .tab:hover,.oscuro .tabs-casos .tab.activo{color:var(--beige)}
@media(max-width:900px){#grilla-casos{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){#grilla-casos{grid-template-columns:1fr}}
.caso .tag{font-size:10.5px;color:rgba(216,212,203,.6)}
.caso h3{font-family:var(--titulos);font-weight:600;text-transform:uppercase;font-size:16px;letter-spacing:.06em;line-height:1.4;margin-top:10px;transition:color .3s}
.caso:hover h3{color:var(--teal)}

/* ---------- clientes ---------- */
.clientes{overflow:hidden}
.clientes .wrap{position:relative;z-index:1}
.tabs{display:flex;gap:0 30px;flex-wrap:nowrap;justify-content:flex-start;border-bottom:1px solid var(--linea-clara);margin:54px 0 60px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs .tab{font-size:11px}
.tab{position:relative;padding:0 2px 15px;font-family:var(--titulos);font-weight:600;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:rgba(0,0,0,.42);transition:color .3s}
.tabs .tab{flex:0 0 auto;white-space:nowrap}
.tabs .tab:first-child{margin-left:auto}
.tabs .tab:last-child{margin-right:auto}
.tab::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--teal);transform:scaleX(0);transform-origin:left;transition:transform .35s ease}
.tab:hover{color:var(--black)}
.tab.activo{color:var(--teal)}
.tab.activo::after{transform:scaleX(1)}
.logos{display:grid;grid-template-columns:repeat(6,1fr);gap:34px 28px;align-items:center;min-height:150px}
.logo-img{justify-self:center;max-height:68px;width:auto;filter:grayscale(1);opacity:.72;transition:filter .35s,opacity .35s}
.logo-img:hover{filter:grayscale(0);opacity:1}

/* ---------- podcast ---------- */
.episodios{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;margin:60px 0 54px}
.ep{text-align:left}
.ep .photo{aspect-ratio:16/10}
.ep:hover .photo img{transform:scale(1.05)}
.play{position:absolute;inset:0;margin:auto;z-index:3;width:56px;height:56px;border-radius:50%;border:1px solid rgba(216,212,203,.9);display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.3);backdrop-filter:blur(2px);transition:background .3s,transform .3s}
.play::before{content:"";display:block;margin-left:4px;border-left:11px solid var(--beige);border-top:7px solid transparent;border-bottom:7px solid transparent}
.ep:hover .play{background:rgba(0,0,0,.55);transform:scale(1.07)}
.ep .datos-ep{padding-top:16px}
.ep .mini{font-family:var(--titulos);font-weight:700;font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:rgba(216,212,203,.65)}
.ep h3{font-family:var(--titulos);font-weight:600;text-transform:uppercase;font-size:14px;letter-spacing:.06em;line-height:1.45;margin:8px 0 5px}
.ep p{font-size:13px;color:rgba(216,212,203,.75)}
.pagina-podcast .ep .mini{color:var(--sand)}
.pagina-podcast .ep h3{color:var(--black)}
.pagina-podcast .ep p{color:var(--sand)}
.pagina-podcast .episodios{grid-template-columns:repeat(4,1fr)}

/* ---------- partners (banda sand con logos reales) ---------- */
.partners .wrap{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:80px;align-items:center;padding-top:96px;padding-bottom:96px}
.partners-logos{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.p-tile{display:flex;align-items:center;justify-content:center;text-align:center;min-height:122px;padding:24px 18px;border:1px solid rgba(216,212,203,.28);border-radius:16px;color:var(--beige);font-family:var(--titulos);transition:border-color .35s,transform .35s}
.p-tile:hover{border-color:rgba(216,212,203,.75);transform:translateY(-3px)}
.pl-ncc{display:flex;flex-direction:column;line-height:1}
.pl-ncc b{font-size:30px;font-weight:700;letter-spacing:.1em}
.pl-ncc small{font-weight:600;font-size:10px;letter-spacing:.55em;margin-top:7px;text-transform:uppercase}
.pl-bc{font-weight:600;font-size:14px;letter-spacing:.32em;text-transform:uppercase;line-height:1.8}
.pl-brandink{font-weight:600;font-size:16px;letter-spacing:.5em;text-transform:uppercase}
.pl-em{font-weight:500;font-size:22px;letter-spacing:.06em}
.pl-ft{font-family:var(--cuerpo);font-style:italic;font-size:23px}
.pl-moxo{display:flex;flex-direction:column;line-height:1}
.pl-moxo b{font-size:27px;font-weight:700;letter-spacing:.14em}
.pl-moxo small{font-weight:600;font-size:9.5px;letter-spacing:.5em;margin-top:7px;text-transform:uppercase}
@media (max-width:620px){.partners-logos{grid-template-columns:repeat(2,1fr)}}

/* ---------- equipo ---------- */
.equipo-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:44px 30px;margin-top:64px}
.persona{text-align:center}
.persona .foto{position:relative;overflow:hidden;border-radius:var(--r);aspect-ratio:3/3.3;background:linear-gradient(160deg,#8d8474,#5c5342)}
.persona .foto img{width:100%;height:100%;object-fit:cover;filter:saturate(.92) contrast(1.02);transition:transform 1s cubic-bezier(.19,1,.22,1)}
.persona:hover .foto img{transform:scale(1.045)}
.persona .avatar{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--titulos);font-weight:700;font-size:46px;letter-spacing:.06em;color:var(--beige)}
.persona.alt .foto{background:linear-gradient(160deg,#5b7e83,#324f53)}
.persona h3{font-family:var(--titulos);font-weight:700;text-transform:uppercase;font-size:14.5px;letter-spacing:.1em;margin:20px 0 4px}
.persona .rol{font-size:13.5px;color:var(--sand);min-height:44px}
.persona .li{display:inline-flex;width:34px;height:34px;border:1px solid rgba(0,0,0,.25);border-radius:50%;align-items:center;justify-content:center;margin:12px 0 14px;transition:all .3s}
.persona .li:hover{border-color:var(--teal);color:var(--teal)}
.persona .li svg{width:15px;height:15px}

/* partnerships equipo */
.pships{display:flex;justify-content:center;align-items:stretch;gap:30px;flex-wrap:wrap;margin-top:56px}
.pship{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;min-width:320px;min-height:136px;padding:32px 52px;border:1px solid rgba(0,0,0,.16);border-radius:16px;color:var(--sand);font-family:var(--titulos);transition:border-color .3s,transform .3s}
.pship:hover{border-color:var(--teal);transform:translateY(-3px)}
.pship-a{font-weight:600;font-size:23px;letter-spacing:.3em;text-transform:uppercase;line-height:1.45}
.pship-b{font-weight:700;font-size:36px;letter-spacing:.14em;line-height:1}
.pship-b small{display:block;font-weight:600;font-size:10px;letter-spacing:.45em;margin-top:9px;text-transform:uppercase}

/* cita equipo */
.cita .wrap{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.85fr);gap:80px;align-items:center;padding-top:110px;padding-bottom:110px}
.cita blockquote{position:relative;padding-left:34px;border-left:2px solid var(--teal);font-family:var(--titulos);font-weight:500;font-size:clamp(1.15rem,1.9vw,1.5rem);line-height:1.55;color:var(--beige)}
.cita blockquote footer{margin-top:22px;font-size:11.5px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--teal)}
.cita .texto-extra{margin-top:34px;color:rgba(216,212,203,.8);max-width:56ch}
.cita .texto-extra b{color:var(--beige)}
.cita .photo{aspect-ratio:4/4.2}

/* ---------- página servicios ---------- */
/* Misma tira desplazable que el filtro de Casos: los ocho servicios no entran
   en una línea y partirlos en dos filas rompía la lectura. El degradado del
   borde avisa que hay más pestañas hacia ese lado; lo encienden las clases
   .hay-izq / .hay-der desde el JS, y sin JS la tira se desplaza igual. */
.tabs-serv{display:flex;gap:0 30px;flex-wrap:nowrap;border-bottom:1px solid var(--linea-clara);margin:0 0 60px;overflow-x:auto;overscroll-behavior-x:contain;scroll-behavior:smooth;scrollbar-width:none;--vel-izq:0px;--vel-der:0px;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--vel-izq),#000 calc(100% - var(--vel-der)),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 var(--vel-izq),#000 calc(100% - var(--vel-der)),transparent 100%)}
.tabs-serv::-webkit-scrollbar{display:none}
.tabs-serv.hay-izq{--vel-izq:46px}
.tabs-serv.hay-der{--vel-der:46px}
.tabs-serv .tab{font-size:11px;flex:0 0 auto;white-space:nowrap}
.panel-serv{display:none;grid-template-columns:minmax(0,.85fr) minmax(0,1.05fr);gap:70px;align-items:center}
.panel-serv.visible{display:grid;animation:fadePage .5s ease}
.panel-serv .photo{aspect-ratio:4/3.6}
.panel-serv h3{font-family:var(--titulos);font-weight:600;text-transform:uppercase;font-size:19px;letter-spacing:.1em;color:var(--teal);margin-bottom:18px}
.panel-serv .destacado{font-weight:600;font-size:17px;line-height:1.6;margin-bottom:20px}
.panel-serv p{margin-bottom:16px;color:rgba(0,0,0,.78)}
.panel-serv .nota{font-style:italic;color:var(--sand)}
.hero .hero-sub{max-width:560px;margin:18px 0 0;font-size:16px;line-height:1.6;color:rgba(255,255,255,.82)}
/* Listas y sub-bloques dentro de los paneles de servicio. */
.panel-serv ul{list-style:none;margin:0 0 16px;padding:0;display:flex;flex-direction:column;gap:9px}
.panel-serv li{position:relative;padding-left:20px;font-size:13px;line-height:1.5;letter-spacing:.02em;color:rgba(0,0,0,.72)}
.panel-serv li::before{content:"";position:absolute;left:0;top:.55em;width:9px;height:1px;background:var(--teal)}
.panel-serv .sub{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--sand);margin:22px 0 12px}
.panel-serv h4{font-family:var(--titulos);font-weight:600;font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--teal);margin-bottom:12px}
.panel-serv .dos-col{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 34px}
@media(max-width:640px){.panel-serv .dos-col{grid-template-columns:1fr;gap:22px}}

/* ---------- noticias ---------- */
.noticias-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:34px}
.noticia{background:var(--blanco);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;transition:transform .45s,box-shadow .45s;text-align:left}
.noticia:hover{transform:translateY(-5px);box-shadow:0 22px 48px rgba(0,0,0,.1)}
.noticia .photo{aspect-ratio:16/10;border-radius:0}
.noticia:hover .photo img{transform:scale(1.05)}
.podcast-nombre{font-family:var(--titulos);font-weight:600;text-transform:uppercase;font-size:15px;letter-spacing:.18em;color:var(--teal);text-align:center;margin:-18px 0 42px}
.noticia{display:block;text-decoration:none;color:inherit}
.noticia .link-sub{display:inline-block;margin-top:14px;font-size:10.5px;letter-spacing:.18em}
.noticia:hover .link-sub{color:var(--teal)}
.noticia .cuerpo{padding:24px 26px 28px;display:flex;flex-direction:column;gap:12px;flex:1}
.noticia .fecha{font-family:var(--titulos);font-weight:700;font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--sand)}
.noticia h3{font-family:var(--titulos);font-weight:600;font-size:16.5px;line-height:1.45;transition:color .3s;flex:1}
.noticia:hover h3{color:var(--teal)}
.paginacion{display:flex;justify-content:center;gap:12px;margin-top:64px}
.paginacion button{width:44px;height:44px;border-radius:10px;border:1px solid rgba(0,0,0,.25);font-family:var(--titulos);font-weight:600;font-size:13px;transition:all .3s}
.paginacion button.activo{background:var(--teal);border-color:var(--teal);color:var(--blanco)}
.paginacion button:not(.activo):hover{border-color:var(--teal);color:var(--teal)}

/* ---------- contacto ---------- */
.contacto-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:80px;align-items:start}
.form-card{background:var(--blanco);border-radius:28px 12px 12px 12px;padding:44px 42px;box-shadow:0 24px 60px rgba(0,0,0,.08)}
.campo{margin-bottom:28px}
.campo label{display:block;font-family:var(--titulos);font-weight:700;font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--sand);margin-bottom:10px}
.campo input,.campo textarea{width:100%;border:none;border-bottom:1px solid var(--linea-clara);background:transparent;padding:8px 2px 12px;font-size:15.5px;transition:border-color .3s}
.campo textarea{min-height:110px;resize:vertical}
.campo input:focus,.campo textarea:focus{outline:none;border-bottom:2px solid var(--teal)}
.form-ok{display:none;margin-top:18px;font-size:14px;color:var(--teal);font-weight:600}
.contacto-foto .photo{aspect-ratio:4/4.6}
.datos-band .wrap{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:60px;align-items:center;padding-top:88px;padding-bottom:88px}
.datos-items{display:grid;grid-template-columns:repeat(3,1fr);gap:44px}
.dato{text-align:center}
.dato svg{width:30px;height:30px;margin:0 auto 16px;color:var(--beige)}
.dato p{font-size:14.5px;line-height:1.6;color:var(--beige)}
.dato a{border-bottom:1px solid transparent;transition:border-color .3s}
.dato a:hover{border-color:var(--beige)}

/* ---------- mapa ---------- */
.mapa{position:relative;height:440px;background:#CFCBC2}
.mapa iframe{width:100%;height:100%;border:0;display:block;filter:grayscale(1) contrast(.92) brightness(1.05)}
.mapa .tarjeta{position:absolute;z-index:5;top:34px;left:40px;background:var(--blanco);border-radius:28px 10px 10px 10px;border-left:3px solid var(--teal);padding:24px 28px;max-width:320px;box-shadow:0 20px 46px rgba(0,0,0,.16)}
.mapa .tarjeta .tag{font-size:10.5px;margin-bottom:10px}
.mapa .tarjeta strong{display:block;font-family:var(--titulos);font-weight:600;text-transform:uppercase;font-size:13.5px;letter-spacing:.06em;margin-bottom:5px}
.mapa .tarjeta span{font-size:13px;color:var(--sand)}

/* ---------- footer ---------- */
.footer{background:var(--black);color:var(--beige)}
.footer .wrap{padding-top:80px;padding-bottom:0}
.footer-grid{display:grid;grid-template-columns:1fr auto 1fr;gap:60px;align-items:start;padding-bottom:66px}
.footer nav{display:flex;flex-direction:column;gap:14px}
.footer nav a{font-family:var(--titulos);font-weight:600;font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--beige);opacity:.85;transition:color .3s,opacity .3s;width:max-content}
.footer nav a:hover{color:var(--teal);opacity:1}
.footer .centro{text-align:center;display:flex;flex-direction:column;align-items:center;gap:26px}
.footer .redes{display:flex;gap:18px}
.footer .redes a{width:42px;height:42px;border:1px solid var(--linea-oscura);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--beige);transition:border-color .3s,color .3s}
.footer .redes a:hover{border-color:var(--teal);color:var(--teal)}
.footer .redes svg{width:17px;height:17px}
.footer .contacto-f{display:flex;flex-direction:column;gap:14px;text-align:right}
.footer .contacto-f a,.footer .contacto-f span{font-family:var(--titulos);font-weight:600;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--sand);transition:color .3s}
.footer .contacto-f a:hover{color:var(--beige)}
.footer .legal{border-top:1px solid var(--linea-oscura);padding:26px 0;text-align:center;font-size:12.5px;color:var(--sand)}
.footer .legal b{color:var(--beige);font-weight:500}
.legal .credito b{transition:color .3s}
.legal .credito:hover b{color:var(--teal)}

/* ---------- reveal ---------- */
/* Visible por defecto; main.js solo oculta lo que está debajo del pliegue. */
.rv{transition:opacity .55s ease,transform .55s ease}
.rv--espera{opacity:0;transform:translateY(18px)}
@media print{.rv--espera{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none;transition:none}
  .pagina.visible,.panel-serv.visible{animation:none}
  .photo img,.btn .fl,.play,.servicio,.noticia{transition:none}
}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .hero .sello{display:none}
  .servicios-grid,.equipo-grid{grid-template-columns:repeat(2,1fr)}
  .episodios,.pagina-podcast .episodios{grid-template-columns:repeat(2,1fr)}
  .logos{grid-template-columns:repeat(3,1fr)}
  .noticias-grid{grid-template-columns:repeat(2,1fr)}
  .casos-grid{grid-template-columns:repeat(2,1fr)}
  .caso,.caso:nth-child(4),.caso:nth-child(5){grid-column:span 1}
}
@media (max-width:900px){
  .trayectoria .wrap,.partners .wrap,.cita .wrap,.panel-serv,.contacto-grid,.datos-band .wrap{grid-template-columns:1fr;gap:56px}
  .panel-serv.visible{display:flex;flex-direction:column;align-items:stretch}
  .trayectoria .photo,.cita .photo{max-width:440px}
  .footer-grid{grid-template-columns:1fr;gap:48px;text-align:center}
  .footer nav{align-items:center}
  .footer nav a{width:auto}
  .footer .contacto-f{text-align:center}
  .datos-items{grid-template-columns:1fr;gap:34px}
}
@media (max-width:620px){
  .wrap{padding:0 24px}
  .seccion{padding:80px 0}
  .hero .wrap{padding-top:90px;padding-bottom:110px}
  .servicios-grid,.episodios,.pagina-podcast .episodios,.equipo-grid,.noticias-grid{grid-template-columns:1fr}
  .logos{grid-template-columns:repeat(2,1fr)}
  .topbar .datos a:nth-child(2){display:none}
  .cap{gap:18px}
  .tabs{gap:0 24px;margin:44px 0 48px}
  .logos{gap:26px 20px;min-height:0}
  .logo-img{max-height:56px}
  .mapa .tarjeta{left:24px;right:24px;max-width:none}
  .form-card{padding:34px 26px}
}

/* ==========================================================================
   AJUSTES PROPIOS DE WORDPRESS
   Todo lo que sigue es exclusivo del tema: no altera el diseño aprobado,
   solo neutraliza el router de la demo y cubre las clases del core de WP.
   ========================================================================== */

/* La demo mostraba/ocultaba secciones por hash. Aquí cada página es real,
   así que la sección siempre se muestra (conservamos la animación de entrada). */
.pagina{display:block}
/* Entrada de página sin pasar por opacidad 0: el contenido nunca está invisible,
   ni siquiera en una captura tomada apenas carga. */
.pagina.visible{animation:entradaPagina .55s ease}
@keyframes entradaPagina{from{transform:translateY(10px)}to{transform:none}}

/* Barra de administración de WordPress */
.admin-bar .topbar{margin-top:0}

/* Accesibilidad: enlace "saltar al contenido" del 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(--blanco);border-radius:6px;box-shadow:0 0 2px 2px rgba(0,0,0,.2);clip:auto!important;clip-path:none;color:var(--teal);display:block;font-family:var(--titulos);font-size:12px;font-weight:600;height:auto;left:8px;letter-spacing:.2em;line-height:normal;padding:14px 22px;text-decoration:none;text-transform:uppercase;top:8px;width:auto;z-index:100000}

/* Clases de alineación e imágenes del editor de WordPress */
.alignleft{float:left;margin:0 1.5em 1em 0}
.alignright{float:right;margin:0 0 1em 1.5em}
.aligncenter{clear:both;margin-left:auto;margin-right:auto}
.wp-caption{max-width:100%}
.wp-caption-text{font-size:13px;color:var(--sand);padding-top:8px}
.wp-block-image img{border-radius:var(--r)}

/* Estado de envío del formulario de contacto */
.form-ok.is-ok{display:block;color:var(--teal)}
.form-ok.is-error{display:block;color:#B4453C}
.hp-campo{position:absolute!important;left:-9999px!important}

/* Las grillas de logos ocultas: `display:grid` de la hoja de autor le gana a la
   regla `[hidden]` del navegador, así que hay que declararlo explícitamente. */
.logos[hidden]{display:none}

/* Ficha de equipo: el icono de LinkedIn y el botón "Ver CV" se pintan siempre
   para que todas las fichas midan lo mismo. Cuando no hay perfil ni PDF
   cargado son elementos inertes, así que no deben simular ser clicables. */
.persona .li--vacio,
.btn-mini--vacio{cursor:default}
.persona .li--vacio:hover{border-color:rgba(0,0,0,.25);color:inherit}
.btn-mini--vacio:hover{border-color:rgba(0,0,0,.3);color:inherit}

/* Paginación real de WordPress en Noticias */
.paginacion .page-numbers{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:10px;border:1px solid rgba(0,0,0,.25);font-family:var(--titulos);font-weight:600;font-size:13px;transition:all .3s}
.paginacion .page-numbers.current{background:var(--teal);border-color:var(--teal);color:var(--blanco)}
.paginacion a.page-numbers:hover{border-color:var(--teal);color:var(--teal)}

/* Aviso visible solo para administradores cuando falta contenido cargado */
.crafting-aviso{max-width:var(--max);margin:0 auto;padding:18px 24px;border-left:3px solid var(--teal);background:rgba(67,112,117,.08);border-radius:0 10px 10px 0;font-size:14px;color:var(--sand)}

/* Cuerpo de entradas y páginas genéricas (no existe en la maqueta: la demo
   no tenía vista de artículo). Reutiliza la tipografía y medidas del sistema. */
.entrada-cuerpo{max-width:74ch;margin:0 auto;font-size:16.5px}
.entrada-cuerpo > * + *{margin-top:22px}
.entrada-cuerpo h2{font-family:var(--titulos);font-weight:600;text-transform:uppercase;font-size:1.35rem;letter-spacing:.02em;line-height:1.3;margin-top:44px}
.entrada-cuerpo h3{font-family:var(--titulos);font-weight:600;font-size:1.1rem;letter-spacing:.04em;margin-top:34px}
.entrada-cuerpo a{color:var(--teal);border-bottom:1px solid rgba(67,112,117,.4)}
.entrada-cuerpo a:hover{border-bottom-color:var(--teal)}
.entrada-cuerpo ul,.entrada-cuerpo ol{padding-left:1.3em}
.entrada-cuerpo li + li{margin-top:8px}
.entrada-cuerpo blockquote{border-left:2px solid var(--teal);padding-left:26px;font-family:var(--titulos);font-weight:500;font-size:1.15rem;line-height:1.55}
.entrada-cuerpo img{border-radius:var(--r)}

/* ==========================================================================
   MODAL DE CV
   No existe en la maqueta: se diseñó con su mismo lenguaje — rótulos "//",
   Cabin en mayúsculas con letter-spacing, esquina 28px como .form-card,
   y la paleta beige / sand / teal.
   ========================================================================== */
.cv-modal{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;padding:28px}
.cv-modal[hidden]{display:none}
.cv-fondo{position:absolute;inset:0;background:rgba(0,0,0,.72);backdrop-filter:blur(3px);animation:cvFondo .3s ease}
@keyframes cvFondo{from{opacity:0}to{opacity:1}}

.cv-panel{position:relative;z-index:1;background:var(--blanco);border-radius:28px 12px 12px 12px;
  width:min(880px,100%);max-height:88vh;overflow-y:auto;padding:44px 46px 48px;
  box-shadow:0 34px 80px rgba(0,0,0,.34);animation:cvPanel .38s cubic-bezier(.19,1,.22,1)}
@keyframes cvPanel{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

.cv-cerrar{position:absolute;top:20px;right:20px;width:40px;height:40px;border-radius:50%;
  border:1px solid var(--linea-clara);display:flex;align-items:center;justify-content:center;
  color:var(--sand);background:var(--blanco);transition:border-color .3s,color .3s}
.cv-cerrar:hover{border-color:var(--teal);color:var(--teal)}
.cv-cerrar svg{width:17px;height:17px}

.cv-cab{display:grid;grid-template-columns:150px minmax(0,1fr);gap:30px;align-items:start;
  padding-bottom:30px;margin-bottom:30px;border-bottom:1px solid var(--linea-clara)}
.cv-foto{border-radius:var(--r);overflow:hidden;aspect-ratio:3/3.3;background:linear-gradient(160deg,#8d8474,#5c5342)}
.cv-foto img{width:100%;height:100%;object-fit:cover;filter:saturate(.92) contrast(1.02)}
.cv-ident .tag{color:var(--sand);margin-bottom:12px}
.cv-ident .h2{margin-bottom:12px}
.cv-bio{font-size:15.5px;color:var(--sand);max-width:52ch}
.cv-li{display:inline-block;margin-top:18px;color:var(--teal)}

.cv-resumen{font-size:16.5px;line-height:1.7;margin-bottom:34px;max-width:70ch}
.cv-formacion{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:28px 34px;margin-bottom:34px}
.cv-bloque--ancho{grid-column:1/-1}
.cv-rot{display:inline-flex;align-items:baseline;gap:9px;font-family:var(--titulos);font-weight:700;
  font-size:10.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--sand);margin-bottom:12px}
.cv-rot i{font-style:normal;color:var(--teal);letter-spacing:0}
.cv-bloque p{font-size:14.5px;line-height:1.65;color:rgba(0,0,0,.78)}
.cv-lista{list-style:none;display:grid;gap:12px}
.cv-lista li{position:relative;padding-left:20px;font-size:14.5px;line-height:1.65;color:rgba(0,0,0,.78)}
.cv-lista li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:1px;background:var(--teal)}

body.cv-abierto{overflow:hidden}

@media (max-width:620px){
  .cv-modal{padding:0}
  .cv-panel{border-radius:0;max-height:100vh;height:100%;padding:70px 24px 40px}
  .cv-cab{grid-template-columns:1fr;gap:22px}
  .cv-foto{max-width:170px}
}

/* Ficha breve: sin formación ni trayectoria cargadas, la cabecera es todo. */
.cv-panel--breve .cv-cab{padding-bottom:0;margin-bottom:0;border-bottom:0}
.cv-panel--breve{padding-bottom:44px}


/* ==========================================================================
   AJUSTES 2026 (revisión del cliente, septiembre)
   Nuevo primer bloque, metodología, banner con H1, casos con modal,
   logos de la presentación institucional y pie rediseñado.
   ========================================================================== */

/* ---------- hero: firma de marca ---------- */
.hero .firma{margin:26px 0 0;font-family:var(--titulos);font-weight:600;font-size:12.5px;letter-spacing:.34em;text-transform:uppercase;color:rgba(216,212,203,.8)}
.hero .firma em,.footer .firma em{font-style:normal;color:transparent;-webkit-text-stroke:1px rgba(216,212,203,.8)}
@supports not (-webkit-text-stroke:1px black){.hero .firma em,.footer .firma em{color:var(--teal)}}
.hero .h1 b{font-weight:600}

/* ---------- banner interno: el rótulo delineado es el H1 ---------- */
.banner .ghost{margin:0;font-weight:600}
.cab--sin-titulo .lead{margin-top:14px}

/* ---------- 01 · Partners de negocio (trayectoria) ----------
   Composición de la PPT: foto del grupo a todo el ancho, degradé teal
   que sube desde abajo y el texto sobre el degradé. */
.partners-negocio{position:relative;overflow:hidden;background:#06292b;color:var(--beige)}
.pn-fondo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 18%;filter:grayscale(1) contrast(1.02)}
.partners-negocio::after{content:"";position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(0,0,0,.10) 0%,rgba(0,0,0,0) 22%,rgba(14,104,108,.6) 50%,rgba(7,84,88,.92) 72%,#053638 100%),
  linear-gradient(90deg,rgba(0,0,0,.45) 0%,rgba(0,0,0,0) 55%)}
.partners-negocio .wrap{position:relative;z-index:2;padding-top:300px;padding-bottom:104px}
.partners-negocio .tag{color:var(--beige)}
.partners-negocio .tag i{color:var(--beige)}
.pn-titulo{font-family:var(--titulos);font-weight:600;text-transform:uppercase;font-size:clamp(2.1rem,4.6vw,3.9rem);line-height:1.05;letter-spacing:.01em;color:var(--blanco);margin:0 0 16px}
.pn-sub{font-family:var(--titulos);font-weight:600;text-transform:uppercase;font-size:clamp(.95rem,1.4vw,1.15rem);letter-spacing:.12em;color:var(--blanco);margin:0 0 22px}
.partners-negocio .textos p:not(.pn-sub){max-width:74ch;font-size:16px;line-height:1.7;color:rgba(255,255,255,.86);margin:0 0 16px}
.partners-negocio .btn{margin-top:18px}
@media (max-width:620px){.partners-negocio .wrap{padding-top:200px;padding-bottom:80px}}

/* ---------- metodología: calcada de la lámina "Nuestra metodología" de la PPT
   Aro con la letra, rótulo curvo alrededor, círculo de ícono debajo, conector
   con puntos, y dos fases con su plazo y sus chips. ---------- */
.metodologia{position:relative;overflow:hidden;background:var(--black)}
.metodologia::before{content:"";position:absolute;inset:0;
  background-image:url("assets/fotos/metodologia-fondo.jpg");background-size:auto 100%;background-position:left center;background-repeat:no-repeat;
  filter:grayscale(1);opacity:.9;
  -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 16%,rgba(0,0,0,.55) 34%,transparent 52%);
  mask-image:linear-gradient(90deg,#000 0%,#000 16%,rgba(0,0,0,.55) 34%,transparent 52%)}
.metodologia::after{content:"";position:absolute;inset:0;
  background:
    radial-gradient(75% 95% at 100% 62%, rgba(16,104,108,.85) 0%, rgba(10,70,74,.35) 45%, rgba(0,0,0,0) 72%),
    radial-gradient(60% 70% at 8% 12%, rgba(108,97,76,.55) 0%, rgba(108,97,76,0) 60%),
    linear-gradient(90deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.82) 34%, rgba(0,0,0,.72) 58%, rgba(0,0,0,.45) 100%)}
.metodologia .wrap{position:relative;z-index:2}
.metodologia .cab{margin-bottom:56px}

.depic{list-style:none;display:grid;grid-template-columns:repeat(5,1fr);gap:18px;position:relative;margin:0}
.paso{position:relative;display:flex;flex-direction:column;align-items:center}
.paso-aro{position:relative;display:flex;align-items:center;justify-content:center;width:132px;height:132px;border-radius:50%;border:1px solid rgba(216,212,203,.55)}
.paso .letra{font-family:var(--titulos);font-weight:600;font-size:62px;line-height:1;color:var(--beige)}
.paso-curva{position:absolute;inset:-16px;width:calc(100% + 32px);height:calc(100% + 32px);overflow:visible;transform:rotate(14deg)}
.paso-curva text{font-family:var(--titulos);font-weight:600;font-size:15px;letter-spacing:.12em;fill:var(--beige)}
.paso-icono{display:flex;align-items:center;justify-content:center;width:76px;height:76px;margin-top:-16px;border-radius:50%;background:var(--beige);box-shadow:0 0 0 6px rgba(0,0,0,.35)}
.paso-icono img{width:42px;height:42px}
.paso--ejec .paso-icono{background:var(--black)}
.paso--ejec .paso-icono img{filter:invert(1)}

/* conector: tallos con punto y la línea de cada fase */
.conector{position:relative;display:grid;grid-template-columns:repeat(5,1fr);height:58px;margin-top:2px}
.conector-tallo{position:relative;justify-self:center;width:1px;height:100%;background:rgba(216,212,203,.55)}
.conector-tallo::after{content:"";position:absolute;left:50%;bottom:-3px;width:7px;height:7px;margin-left:-3.5px;border-radius:50%;background:var(--beige)}
.conector-tallo--ejec{background:rgba(0,0,0,.85)}
.conector-tallo--ejec::after{background:var(--black)}
.conector-linea{position:absolute;bottom:0;height:1px}
.conector-linea--plan{left:10%;right:42%;background:rgba(216,212,203,.55)}
.conector-linea--ejec{left:62%;right:10%;background:rgba(0,0,0,.85)}

/* fases: plazo y chips, con el bracket de la PPT */
.fases{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;margin-top:26px}
.fase{position:relative;display:flex;flex-direction:column;align-items:center;gap:26px}
.fase--plan{grid-column:1/4}
.fase--ejec{grid-column:4/6}
.plazo{position:relative;z-index:1;width:min(100%,520px);padding:13px 34px;border-radius:999px;text-align:center;font-family:var(--cuerpo);font-size:15px;letter-spacing:.02em}
.fase--plan .plazo{background:var(--black);color:var(--beige)}
.fase--ejec .plazo{background:var(--beige);color:var(--black)}
.fase .bracket{position:absolute;top:66px;left:6%;right:6%;height:1px;background:rgba(216,212,203,.4)}
.fase--ejec .bracket{background:rgba(0,0,0,.6)}
.fase .chips{justify-content:center;position:relative;z-index:1}
.chips{list-style:none;display:flex;flex-wrap:wrap;gap:10px}
.chips li{position:relative;padding:8px 16px;border:1px solid rgba(216,212,203,.45);border-radius:999px;font-family:var(--cuerpo);font-size:12.5px;letter-spacing:.01em;color:var(--beige);background:rgba(0,0,0,.35);transition:border-color .3s,color .3s}
.chips li::before{content:"";position:absolute;left:50%;top:-14px;width:1px;height:14px;background:rgba(216,212,203,.4)}
.fase--ejec .chips li{border-color:rgba(0,0,0,.55);background:rgba(0,0,0,.45)}
.fase--ejec .chips li::before{background:rgba(0,0,0,.6)}
.chips li:hover{border-color:var(--teal);color:var(--beige)}

@media (max-width:1100px){
  .paso-aro{width:104px;height:104px}
  .paso .letra{font-size:50px}
  .paso-curva text{font-size:13px}
  .paso-icono{width:62px;height:62px}
  .paso-icono img{width:34px;height:34px}
}

/* ---------- podcast: seis episodios en tres columnas, del 1 al 6 ---------- */
.episodios--seis,.pagina-podcast .episodios--seis{grid-template-columns:repeat(3,1fr)}

/* ---------- clientes: logos de la presentación ----------
   Los logos vienen de la PPT en negativo (blanco + transparencia) y van sobre
   fondo oscuro, como en la presentación. No se invierten: invertir un negativo
   convierte sellos y rellenos claros en manchas (Broterra, Mimo, Santo Tomás).
   Cada logo trae su tamaño óptico en --w: todos ocupan una superficie visual
   parecida, así ni los muy anchos ni los macizos dominan la grilla. */
.oscuro .tabs{border-bottom-color:var(--linea-oscura)}
.oscuro .tabs .tab{color:rgba(216,212,203,.55)}
.oscuro .tabs .tab:hover,.oscuro .tabs .tab.activo{color:var(--beige)}
.clientes.oscuro{border-top:1px solid var(--linea-oscura)}
/* Flex y no grid: la última fila incompleta queda centrada, no colgando a la izquierda. */
.logos--ppt{display:flex;flex-wrap:wrap;justify-content:center;gap:54px 30px;min-height:0}
.logos--ppt[hidden]{display:none}
.logo-celda{flex:0 0 calc((100% - 150px) / 6);display:flex;align-items:center;justify-content:center;min-height:66px}
.logos--ppt .logo-img{width:var(--w);height:auto;max-width:100%;max-height:none;filter:none;opacity:.88;transition:opacity .35s}
.logos--ppt .logo-img:hover{opacity:1}

/* ---------- casos: tarjeta-botón y modal de contenido ---------- */
button.caso{width:100%;text-align:left;font:inherit;color:inherit;cursor:pointer}
button.caso figcaption{display:block}
.lb-modal{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;padding:28px}
.lb-modal[hidden]{display:none}
.lb-fondo{position:absolute;inset:0;background:rgba(0,0,0,.78);backdrop-filter:blur(3px);animation:cvFondo .3s ease}
.lb-panel{position:relative;z-index:1;background:var(--blanco);border-radius:28px 12px 12px 12px;width:min(720px,100%);max-height:90vh;overflow-y:auto;padding:40px 42px 42px;box-shadow:0 34px 80px rgba(0,0,0,.34);animation:cvPanel .38s cubic-bezier(.19,1,.22,1)}
.lb-panel--video{width:min(1040px,100%)}
.lb-cerrar{position:absolute;top:18px;right:18px;width:40px;height:40px;border-radius:50%;border:1px solid var(--linea-clara);display:flex;align-items:center;justify-content:center;color:var(--sand);background:var(--blanco);transition:border-color .3s,color .3s;z-index:2}
.lb-cerrar:hover{border-color:var(--teal);color:var(--teal)}
.lb-cerrar svg{width:17px;height:17px}
.lb-cab{margin-bottom:24px;padding-right:48px}
.lb-cab .tag{color:var(--sand);margin-bottom:10px}
/* Portada del caso. Las piezas gráficas son cuadradas: a ancho completo
   llenaban el modal y el texto quedaba debajo del pliegue, sin ninguna señal de
   que hubiera más. Se limita su alto para que el primer apartado se vea al
   abrir. --lb-portada es el tope; lo demás se calcula solo. */
.lb-panel{--lb-portada:34vh}
.lb-video{position:relative;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:var(--black);width:min(100%,calc(var(--lb-portada) * 16 / 9));margin-inline:auto}
.lb-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.lb-img{display:block;width:auto;max-width:100%;max-height:var(--lb-portada);height:auto;border-radius:14px;margin-inline:auto}
@media (max-width:620px){.lb-modal{padding:0}.lb-panel{border-radius:0;max-height:100vh;height:100%;padding:70px 22px 40px;--lb-portada:30vh}}
@media (max-height:760px){.lb-panel{--lb-portada:30vh}}

/* ---------- contacto: cuatro datos etiquetados ---------- */
.datos-items--cuatro{grid-template-columns:repeat(4,1fr);gap:34px}
.dato-rot{display:block;font-family:var(--titulos);font-weight:700;font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:rgba(216,212,203,.6);margin-bottom:8px}
@media (max-width:900px){.datos-items--cuatro{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.datos-items--cuatro{grid-template-columns:1fr}}

/* ---------- pie rediseñado ---------- */
.footer .footer-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,.8fr) minmax(0,1.1fr);gap:60px;padding-bottom:60px}
.footer-marca img{height:38px;width:auto}
.footer .firma{margin:26px 0 0;font-family:var(--titulos);font-weight:600;font-size:12px;letter-spacing:.3em;line-height:1.9;text-transform:uppercase;color:rgba(216,212,203,.85)}
.footer-desc{margin-top:16px;font-size:12.5px;letter-spacing:.06em;color:var(--sand)}
.footer-rot{display:inline-flex;align-items:baseline;gap:9px;font-family:var(--titulos);font-weight:700;font-size:10.5px;letter-spacing:.28em;text-transform:uppercase;color:rgba(216,212,203,.5);margin-bottom:6px}
.footer-rot i{font-style:normal;color:var(--teal);letter-spacing:0}
.footer .footer-nav{display:flex;flex-direction:column;gap:14px}
.footer .footer-nav a{font-family:var(--titulos);font-weight:600;font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--beige);opacity:.85;transition:color .3s,opacity .3s;width:max-content}
.footer .footer-nav a:hover{color:var(--teal);opacity:1}
.footer-contacto{display:flex;flex-direction:column;gap:14px}
.footer-contacto a,.footer-contacto address{font-style:normal;font-size:14px;line-height:1.5;color:var(--beige);transition:color .3s}
.footer-contacto a:hover{color:var(--teal)}
.footer-contacto small{display:block;font-family:var(--titulos);font-weight:700;font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--sand);margin-bottom:2px}
.footer-contacto .redes{margin-top:10px}
.footer .legal{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;text-align:left}
@media (max-width:900px){
  .footer .footer-grid{grid-template-columns:1fr;gap:44px;text-align:left}
  .footer .footer-nav{align-items:flex-start}
  .footer .legal{justify-content:center;text-align:center}
}

/* ---------- responsive de lo nuevo ---------- */
@media (max-width:1100px){.episodios--seis,.pagina-podcast .episodios--seis{grid-template-columns:repeat(2,1fr)}}
@media (max-width:900px){
  .depic{grid-template-columns:repeat(3,1fr);gap:34px 18px}
  .depic::before{display:none}
  .paso .letra{width:96px;height:96px;font-size:42px}
  .paso::after{right:calc(50% - 62px)}
  .dimensiones{grid-template-columns:1fr}
.fases{grid-template-columns:1fr;gap:40px}
.fase--plan,.fase--ejec{grid-column:auto}
  .logos--ppt{gap:46px 24px}
.logo-celda{flex-basis:calc((100% - 48px) / 3)}
}
@media (max-width:620px){
  .episodios--seis,.pagina-podcast .episodios--seis{grid-template-columns:1fr}
  .depic{grid-template-columns:repeat(2,1fr)}
  .logos--ppt{gap:36px 18px}
.logo-celda{flex-basis:calc((100% - 18px) / 2);min-height:56px}
.logos--ppt .logo-img{width:calc(var(--w) * .8)}
  .hero .firma{font-size:11px;letter-spacing:.26em}
}

/* ==========================================================================
   MENÚ MÓVIL
   Debajo de 980px los siete enlaces ya no entran en una línea: la cabecera
   pasa a logo + botón y la navegación se abre como panel a pantalla completa.
   La cabecera queda fija para que el botón esté siempre a mano.
   ========================================================================== */
.menu-boton{display:none}
@media (max-width:980px){
  .header{position:sticky;top:0;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px 24px;text-align:left;border-bottom:1px solid var(--linea-oscura)}
  .marca{position:relative;z-index:3}
  .marca img{height:36px}
  .menu-boton{position:relative;z-index:3;display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border:1px solid rgba(216,212,203,.35);border-radius:50%;color:var(--beige);transition:border-color .3s}
  .menu-boton:hover{border-color:var(--beige)}
  .menu-lineas{position:relative;width:18px;height:10px}
  .menu-lineas span{position:absolute;left:0;right:0;height:1.5px;background:currentColor;transition:transform .35s ease,top .35s ease}
  .menu-lineas span:first-child{top:0}
  .menu-lineas span:last-child{top:8.5px}
  .menu-abierto .menu-lineas span:first-child{top:4.25px;transform:rotate(45deg)}
  .menu-abierto .menu-lineas span:last-child{top:4.25px;transform:rotate(-45deg)}

  .header .nav{position:fixed;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;flex-wrap:nowrap;gap:4px;padding:110px 32px 48px;overflow-y:auto;
    background:radial-gradient(90% 60% at 100% 100%,rgba(67,112,117,.5) 0%,rgba(67,112,117,0) 70%),var(--black);
    visibility:hidden;opacity:0;transition:opacity .3s ease,visibility 0s linear .3s}
  .menu-abierto .header .nav{visibility:visible;opacity:1;transition:opacity .3s ease}
  .header .nav a{font-size:clamp(1.15rem,5.4vw,1.5rem);letter-spacing:.12em;padding:10px 0 12px}
  .header .nav a::after{bottom:4px}
  body.menu-abierto{overflow:hidden}
}
@media (max-width:980px) and (prefers-reduced-motion:reduce){
  .header .nav,.menu-lineas span{transition:none}
}

/* Formulario de contacto de la versión estática: dos canales, dichos con claridad. */
.form-correo{width:100%;margin-top:12px;color:var(--black)}
.form-nota{margin-top:16px;font-size:13px;line-height:1.55;color:var(--sand);text-align:center}
.form-alt{display:inline-block;margin-top:8px;font-weight:500;color:var(--teal);border-bottom:1px solid rgba(67,112,117,.4)}
.form-nota a{color:var(--teal);border-bottom:1px solid rgba(67,112,117,.35)}

/* Etapa de la metodología: hueco para el ícono de la PPT (se inyecta el SVG). */
.paso-icono{display:none;width:64px;height:64px;margin-top:-8px;align-items:center;justify-content:center;border-radius:50%;background:var(--beige);color:var(--black)}
.paso-icono:not(:empty){display:flex}
.paso-icono svg{width:30px;height:30px}
.paso--ejec .paso-icono{background:var(--black);color:var(--beige);box-shadow:0 0 0 1px var(--linea-oscura)}

/* Metodología en pantallas chicas: el diagrama de 5 columnas no entra.
   Se apila por etapa y el conector (pensado para la fila) se retira. */
@media (max-width:900px){
  .depic{grid-template-columns:repeat(3,1fr);gap:34px 12px}
  .conector{display:none}
  .fases{grid-template-columns:1fr;gap:44px;margin-top:44px}
  .fase--plan,.fase--ejec{grid-column:auto}
  .fase{gap:20px}
  .fase .bracket{display:none}
  .chips li::before{display:none}
}
@media (max-width:620px){
  .depic{grid-template-columns:repeat(2,1fr);gap:30px 10px}
  .paso-aro{width:92px;height:92px}
  .paso .letra{font-size:42px}
  .paso-curva text{font-size:12px}
  .paso-icono{width:54px;height:54px;margin-top:-12px}
  .paso-icono img{width:29px;height:29px}
}

/* Texto del caso dentro del modal: desafío, contexto, solución y resultado. */
.lb-texto{margin-top:30px}
.lb-rot{display:flex;align-items:baseline;gap:9px;font-family:var(--titulos);font-weight:700;font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--sand);margin:26px 0 10px}
.lb-rot i{font-style:normal;color:var(--teal)}
.lb-rot:first-child{margin-top:0}
.lb-texto p{font-size:15.5px;line-height:1.7;color:rgba(0,0,0,.78);margin-bottom:12px}
.lb-lista{margin:0 0 14px;padding:0;list-style:none}
.lb-lista li{position:relative;padding-left:20px;font-size:15.5px;line-height:1.7;color:rgba(0,0,0,.78)}
.lb-lista li::before{content:"";position:absolute;left:2px;top:.72em;width:7px;height:1px;background:var(--teal)}