:root{
  --menu-width: 240px;
  --page-hero-height: 400px;
  --page-hero-height-tablet: 400px;
  --page-hero-height-mobile: 400px;
  --bg-menu: #f2f2f2; /*Color del menu*/
  --bg-main: #f7f7f7;
  --bg-card: #ffffff;
  --text-main: #580d22; /*Texto menu*/
  --text-soft: #fff;
  --accent: #800f2e;
  --accent-2: #ff3964;
  --line: rgba(81, 1, 8, 0.10);
  --overlay: rgba(20, 10, 14, 0.30);
  --white: #ffffff;
  --radius: 18px;
  --shadow: 0 18px 45px rgba(81, 1, 8, 0.10);
  --transition: all .3s ease;
}

@media (min-width: 1600px) {
  :root {
    --page-hero-height: 400px;
    --page-hero-height-tablet: 400px;
    --page-hero-height-mobile: 400px;
  }
}

*{
  box-sizing:border-box;
}



body{
  margin:0;
  font-family: 'Red Hat Text', sans-serif;
  background:var(--bg-main);
  color:var(--text-main);
  overflow-x:hidden;
}

body.search-open,
body.menu-open{
  overflow:hidden;
}

a{
  color:inherit;
  text-decoration:none;
}

button,
input{
  font:inherit;
}

img{
  max-width:100%;
  display:block;
}

.site{
  min-height:100vh;
  position:relative;
  background:var(--bg-main);
}

.layout{
  position:relative;
  min-height:100vh;
}

/* =========================
   TIPOGRAFÍA
========================= */

.brand-title,
.hero-brand-name,
.page-title,
.section-kicker,
.section-content h2,
.audience-copy h3,
.audience-copy h4,
.feature-card h3,
.promise-card h3,
.brandlight-item strong,
.hero-copy h1,
.voz-main-title,
.voz-col-heading,
.voz-card-title,
.voz-detail-title,
.voz-example-title,
.search-panel-title{
  font-family:'Ubuntu', sans-serif;
}

.brand-subtitle,
.page-intro,
.section-content p,
.audience-copy p,
.feature-card p,
.hero-copy p,
.menu-link,
.menu-section-toggle,
.search-trigger,
.index-card-title,
.index-list a,
.label-row,
.voz-lead,
.voz-col-text p,
.voz-detail-content p,
.voz-example-list li,
.voz-index-title,
.voz-index-list li{
  font-family:'Red Hat Text', sans-serif;
}

/* =========================
   FORZAR TIPOGRAFÍA GLOBAL
========================= */

/* TEXTO GENERAL */
p, span, a, li, input, button{
  font-family: 'Red Hat Text', sans-serif !important;
}

/* TITULOS */
h1, h2, h3, h4, h5, h6{
  font-family: 'Ubuntu', sans-serif !important;
}

/* =========================
   SIDEBAR
========================= */
.sidebar{
  width:var(--menu-width);
  min-width:var(--menu-width);
  max-width:var(--menu-width);
  background:var(--bg-menu);
  border-right:1px solid var(--line);
  padding:clamp(14px, 2.6vh, 22px) 16px clamp(12px, 2.2vh, 18px);
  overflow-y:hidden;
  overflow-x:hidden;
  position:fixed;
  left:0;
  top:0;
  height:100vh;
  z-index:1300;
  transform:translateX(0);
  opacity:1;
  pointer-events:auto;
  transition:transform .35s ease, opacity .25s ease;
}

.layout.menu-hidden .sidebar{
  transform:translateX(0);
  opacity:1;
  pointer-events:auto;
}

.sidebar.open,
.layout.menu-hidden .sidebar.open{
  transform:translateX(0);
  opacity:1;
  pointer-events:auto;
}

.sidebar::-webkit-scrollbar{
  width:6px;
}

.sidebar::-webkit-scrollbar-thumb{
  background:rgba(81,1,8,.18);
  border-radius:999px;
}

/* =========================
   BACKDROP
========================= */

.menu-backdrop{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.28);
  opacity:0;
  pointer-events:none;
  transition:opacity .25s ease;
  z-index:1200;
}

.menu-backdrop.show{
  opacity:1;
  pointer-events:auto;
}

/* =========================
   BOTÓN MENÚ
========================= */

.floating-menu-btn{
  position:fixed;
  top:0;
  left:calc(var(--menu-width) + 45px);
  width:45px;
  height:45px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:0;
  background:#800f2e;
  border-radius:0 0 5px 5px;
  cursor:pointer;
  z-index:1400;
  box-shadow:0 8px 18px rgba(0,0,0,.08);
  transition:left .32s ease, transform .2s ease, opacity .2s ease;
}

.site.menu-closed .floating-menu-btn{
  left:0;
}

.floating-menu-btn:hover{
  transform:none;
}

.burger-lines{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:6px;
  width:28px;
}

.burger-lines span{
  display:block;
  width:100%;
  height:3px;
  border-radius:999px;
  background:#9a072a;
}

/* =========================
   BRAND MENU
========================= */

.brand-box{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:22px;
  padding:4px 2px 0;
}

.brand-mark{
  width:42px;
  height:42px;
  border-radius:50%;
  flex-shrink:0;
  background:linear-gradient(135deg, #c78953 0%, #9a5d33 45%, #800f2e 100%);
}

.brand-copy{
  min-width:0;
}

.brand-title{
  font-size:1.25rem;
  font-weight:500;
  line-height:1;
  margin:0 0 4px;
  white-space:nowrap;
  color:var(--text-main);
}

.brand-subtitle{
  font-size:.62rem;
  letter-spacing:.20em;
  text-transform:uppercase;
  color:var(--text-soft);
  line-height:1.1;
  white-space:nowrap;
}

/* =========================
   SEARCH
========================= */

.search-trigger{
  width:100%;
  height:clamp(32px, 5.2vh, 40px);
  border:0;
  border-radius:50px;
  background:#fff;
  color:var(--text-main);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  cursor:pointer;
  margin:clamp(10px, 1.8vh, 14px) 0 clamp(14px, 2.2vh, 18px);
  font-size:clamp(.76rem, 1.55vh, .88rem);
  transition:var(--transition);
  color:#1f3554; 
}

.search-trigger:hover{
  background:#9a072a;
  color:#fff; 

}

.search-degree{
  font-size:1rem;
  transform:translateY(-1px);
}

/* =========================
   MENÚ LINKS
========================= */

.menu-section{
  margin-bottom:clamp(8px, 1.55vh, 14px);
}

.menu-section-toggle{
  width:100%;
  border:0;
  background:transparent;
  padding:clamp(3px, .75vh, 5px) 0;
  color:var(--text-main);
  display:flex;
  align-items:center;
  gap:8px;
  font-size:clamp(.68rem, 1.35vh, .78rem);
  font-weight:700;
  letter-spacing:.01em;
  text-transform:uppercase;
  cursor:pointer;
  text-align:left;
}

.menu-arrow{
  width:0;
  height:0;
  border-left:4px solid transparent;
  border-right:4px solid transparent;
  border-top:6px solid var(--text-main);
  flex-shrink:0;
  transition:transform .25s ease;
}

.menu-section.collapsed .menu-arrow{
  transform:rotate(-90deg);
}

.menu-links{
  overflow:hidden;
  max-height:1000px;
  transition:max-height .3s ease, opacity .25s ease, margin-top .25s ease;
  opacity:1;
  margin-top:clamp(2px, .5vh, 4px);
  padding-left:16px;
}

.menu-section.collapsed .menu-links{
  max-height:0;
  opacity:0;
  margin-top:0;
}

.menu-link{
  display:block;
  padding:clamp(4px, .9vh, 7px) 0;
  font-size:clamp(.70rem, 1.45vh, .82rem);
  color:var(--text-main);
  transition:var(--transition);
}

.menu-link:hover,
.menu-link.active{
  color:#ff758f;
  font-weight:600;
}

/* =========================
   CONTENT
========================= */

.content{
  min-width:0;
  width:100%;
  min-height:100vh;
  background:#ffffff;
  padding-left:0 !important;
  margin-left:0 !important;
}

/* =========================
   HERO
========================= */

.hero-full{
  position:relative;
  min-height:380px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.62) 0%, rgba(255,255,255,.36) 32%, rgba(255,255,255,.10) 58%, rgba(0,0,0,.18) 100%),
    url('https://images.unsplash.com/photo-1494790108377-be9c29b29330?auto=format&fit=crop&w=1600&q=80') center center / cover no-repeat;
  overflow:hidden;
}

.hero-brand{
  position:relative;
  z-index:1;
  padding:128px 40px 70px 86px;
  max-width:720px;
  display:flex;
  align-items:center;
  gap:18px;
}

.hero-brand-mark{
  width:72px;
  height:72px;
  border-radius:50%;
  flex-shrink:0;
  background:linear-gradient(135deg, #c78953 0%, #9a5d33 45%, #800f2e 100%);
}

.hero-brand-name{
  font-size:clamp(2.8rem, 5vw, 5rem);
  line-height:.95;
  font-weight:500;
  color:var(--text-main);
}

/* =========================
   PAGE
========================= */

.page-shell{
  max-width:1120px;
  margin:0 auto;
  padding:42px 30px 60px;
}

.page-header-grid{
  display:grid;
  grid-template-columns:minmax(0, 1.5fr) minmax(260px, .75fr);
  gap:28px;
  align-items:start;
}

.page-title{
  margin:0 0 20px;
  font-size:clamp(2.8rem, 5vw, 4.5rem);
  line-height:.95;
  font-weight:500;
  color:var(--text-main);
}

.page-intro{
  margin:0;
  max-width:820px;
  font-size:1.05rem;
  line-height:1.8;
  color:var(--text-main);
}

.index-card{
  background:#ffffff;
  border:1px solid rgba(81,1,8,.08);
  border-radius:28px;
  padding:26px 26px 22px;
  box-shadow:var(--shadow);
  position:sticky;
  top:28px;
}

.index-card-title{
  margin:0 0 14px;
  font-size:1rem;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--text-soft);
}

.index-list{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:12px;
}

.index-list a{
  display:flex;
  gap:10px;
  align-items:flex-start;
  font-size:1rem;
  line-height:1.45;
  color:var(--text-main);
  transition:var(--transition);
}

.index-list a:hover{
  color:var(--accent);
  transform:translateX(3px);
}

.index-number{
  min-width:22px;
  font-weight:700;
  color:var(--accent);
}

.divider{
  border:0;
  border-top:1px solid var(--line);
  margin:34px 0 10px;
}

.content-section{
  padding:54px 0 12px;
  border-bottom:1px solid rgba(81,1,8,.08);
}

.content-section:last-of-type{
  border-bottom:0;
}

.section-grid{
  display:grid;
  grid-template-columns:220px minmax(0, 1fr);
  gap:28px;
  align-items:start;
}

.section-kicker{
  font-size:2rem;
  line-height:1.05;
  color:var(--accent);
  margin:0;
}

.section-content h2{
  margin:0 0 16px;
  font-size:2rem;
  line-height:1.2;
  font-weight:500;
  color:var(--text-main);
}

.section-content p{
  margin:0 0 14px;
  font-size:1rem;
  line-height:1.8;
  color:var(--text-main);
}

.full-image-card{
  margin-top:26px;
  border-radius:20px;
  overflow:hidden;
  box-shadow:var(--shadow);
  border:1px solid rgba(81,1,8,.08);
}

.full-image-card img{
  width:100%;
  height:auto;
  aspect-ratio:16 / 8;
  object-fit:cover;
}

.label-row{
  margin:0 0 18px;
  font-size:.8rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--text-soft);
}

.audience-block{
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(250px, .95fr);
  gap:28px;
  align-items:center;
  margin:0 0 36px;
  padding:0 0 36px;
  border-bottom:1px solid rgba(81,1,8,.08);
}

.audience-block:last-child{
  margin-bottom:0;
  padding-bottom:0;
  border-bottom:0;
}

.audience-block.reverse{
  grid-template-columns:minmax(250px, .95fr) minmax(0, 1fr);
}

.audience-copy h3{
  margin:0 0 10px;
  font-size:1.9rem;
  font-weight:600;
  color:var(--accent);
}

.audience-copy h4{
  margin:0 0 18px;
  font-size:2rem;
  line-height:1.22;
  font-weight:500;
  color:var(--text-main);
}

.audience-copy p{
  margin:0 0 14px;
  font-size:1rem;
  line-height:1.75;
}

.audience-copy p.emphasis{
  font-style:italic;
}

.audience-image{
  border-radius:20px;
  overflow:hidden;
  box-shadow:var(--shadow);
  min-height:340px;
  background:#eaded9;
}

.audience-image img{
  width:100%;
  height:100%;
  min-height:340px;
  object-fit:cover;
}

.feature-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:18px;
  margin-top:10px;
}

.feature-card{
  background:var(--bg-card);
  border-radius:18px;
  border:1px solid rgba(81,1,8,.08);
  padding:22px 18px;
  box-shadow:0 12px 30px rgba(81, 1, 8, 0.07);
}

.feature-card h3{
  margin:0 0 12px;
  font-size:1.35rem;
  color:var(--text-main);
}

.feature-card p{
  margin:0;
  line-height:1.7;
  color:var(--text-soft);
}

.promise-card{
  background:linear-gradient(135deg, #fff2f5 0%, #fff 100%);
  border:1px solid rgba(255,117,143,.35);
  border-radius:22px;
  padding:28px 26px;
  box-shadow:var(--shadow);
}

.promise-card h3{
  margin:0 0 12px;
  font-size:1.65rem;
}

.brandlight-card{
  margin-top:10px;
  background:var(--bg-card);
  border:1px solid rgba(81,1,8,.08);
  border-radius:22px;
  padding:26px;
  box-shadow:var(--shadow);
}

.brandlight-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:14px;
  margin-top:18px;
}

.brandlight-item{
  background:#fff6f8;
  border:1px solid rgba(81,1,8,.08);
  border-radius:16px;
  padding:18px 16px;
}

.brandlight-item span{
  display:block;
  margin-bottom:8px;
  font-size:.78rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--text-soft);
}

.brandlight-item strong{
  font-size:1.08rem;
  color:var(--text-main);
  line-height:1.35;
}

/* =========================
   WELCOME
========================= */

.welcome-main{
  background:var(--bg-main);
  padding:48px 0 0;
}

.welcome-inner{
  max-width:1050px;
  margin:0 auto;
  padding:0 32px 56px;
}

.hero-copy h1{
  margin:0 0 28px;
  font-size:clamp(2.6rem, 5vw, 4.8rem);
  line-height:.95;
  font-weight:500;
  color:var(--text-main);
  max-width:760px;
}

.hero-copy h1 strong{
  font-weight:700;
}

.hero-copy p{
  margin:0 0 14px;
  font-size:1rem;
  line-height:1.78;
  color:var(--text-main);
  max-width:820px;
}

/* =========================
   FOOTER
========================= */

.bottom-brand-bar{
  position:fixed;
  left:var(--menu-width);
  right:0;
  bottom:0;
  background:#a60b2f;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:28px 40px;
  z-index:1100;
}

@media (max-width: 1400px){
  .bottom-brand-bar{
    width:100%;
    margin-left:0;
  }
}

/* IZQUIERDA */
.footer-logo-left{
  width:120px;
  height:auto;
}

/* DERECHA */
.bottom-brand-right{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:6px;
  color:#fff;
}

/* texto pequeño */
.footer-label{
  font-size:14px;
  opacity:.9;
}

/* bloque anpersan */
.footer-anpersan{
  display:flex;
  align-items:flex-end;
  gap:10px;
}

/* logo grande */
.footer-anpersan img{
  width:180px;
  height:auto;
}

/* studio */
.footer-studio{
  font-size:16px;
  opacity:.9;
}

@media (max-width: 768px){
  .bottom-brand-bar{
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 22px 24px;
  }

  .bottom-brand-left{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex: 1;
  }

  .bottom-brand-right{
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    flex: 1;
    gap: 4px;
  }

  .footer-logo-left{
    width: 120px;
    height: auto;
  }

  .footer-label{
    font-size: 12px;
    line-height: 1.1;
  }

  .footer-anpersan{
    display: flex;
    align-items: flex-end;
    gap: 6px;
  }

  .footer-anpersan img{
    width: 135px;
    height: auto;
  }

  .footer-studio{
    font-size: 12px;
    line-height: 1;
  }

}
/* =========================
   SEARCH MODAL
========================= */

.search-modal{
  position:fixed;
  inset:0;
  z-index:2100;
  display:none;
  align-items:center;
  justify-content:center;
  padding:20px;
}

.search-modal.show{
  display:flex;
}

.search-overlay{
  position:absolute;
  inset:0;
  background:var(--overlay);
  backdrop-filter:blur(2px);
}

.search-panel{
  position:relative;
  width:min(860px, 100%);
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 28px 70px rgba(0,0,0,.28);
  z-index:1;
}

.search-panel-header{
  background:var(--bg-menu);
  color:var(--text-main);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:20px 26px;
  gap:20px;
}

.search-close{
  width:28px;
  height:28px;
  border:0;
  border-radius:999px;
  background:#ffffff; /* fondo blanco */
  color:#800f2e;      /* rojo del menú */
  cursor:pointer;
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:22px;
  font-weight:bold;
}

/* la X */
.search-close::before{
  content:"×";
  line-height:1;
}
.search-panel-body{
  background:linear-gradient(180deg, #510108 0%, #800f2e 100%);
  padding:24px 26px 22px;
  color:var(--white);
}

.search-input-row{
  display:flex;
  align-items:center;
  gap:14px;
  border-bottom:1px solid rgba(255,255,255,.45);
  padding-bottom:12px;
}

.search-input-icon{
  font-size:1.35rem;
  opacity:.75;
  line-height:1;
}

.search-input{
  width:100%;
  border:0;
  background:transparent;
  color:var(--white);
  font-size:1.08rem;
  padding:4px 0;
  outline:none;
}

.search-input::placeholder{
  color:rgba(255,255,255,.55);
}

.search-results{
  margin-top:16px;
  min-height:50px;
  color:rgba(255,255,255,.92);
}

.search-results-title{
  font-size:.9rem;
  color:rgba(255,255,255,.78);
  margin-bottom:10px;
}

.search-result-list{
  display:grid;
  gap:8px;
}

.search-result-item{
  padding:12px 14px;
  border-radius:12px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.10);
}

.search-result-item strong{
  display:block;
  margin-bottom:4px;
  color:#fff;
  font-size:.95rem;
}

.search-result-item span{
  color:rgba(255,255,255,.78);
  font-size:.87rem;
}

.search-empty{
  opacity:.85;
  font-size:.92rem;
  line-height:1.6;
}

/* =========================
   VOZ Y TONO
========================= */

.voz-page{
  background:#ffffff;
  min-height:100vh;
}

.voz-wrap{
  width:100%;
  max-width:1180px;
  margin:0 auto;
  padding-left:42px;
  padding-right:42px;
}

.voz-hero-block{
  padding-top:72px;
  padding-bottom:54px;
  
}

.voz-top-grid{
  display:grid;
  grid-template-columns:minmax(0, 1.55fr) minmax(260px, .7fr);
  gap:56px;
  align-items:start;
}

.voz-main-title{
  margin:0 0 22px;
  font-size:clamp(3rem, 6vw, 6rem);
  line-height:.92;
  font-weight:500;
  color:var(--text-main);
}

.voz-lead{
  margin:0;
  max-width:760px;
  font-size:1.05rem;
  line-height:1.85;
  color:var(--text-main);
}

.voz-top-right{
  padding-top:18px;
}

.voz-index-title{
  margin:0 0 16px;
  font-size:.8rem;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--text-soft);
}

.voz-index-list{
  margin:0;
  padding-left:18px;
}

.voz-index-list li{
  margin-bottom:10px;
  color:var(--text-main);
  line-height:1.55;
}

.voz-index-list a{
  transition:var(--transition);
}

.voz-index-list a:hover{
  color:var(--accent);
}

.voz-two-col-block{
  padding-top:54px;
  padding-bottom:54px;
  
}

.voz-two-col{
  display:grid;
  grid-template-columns:270px minmax(0, 1fr);
  gap:44px;
  align-items:start;
}

.voz-col-heading{
  font-size:2.4rem;
  line-height:1.05;
  font-weight:500;
  color:var(--accent);
}

.voz-col-text p{
  margin:0 0 18px;
  font-size:1rem;
  line-height:1.85;
  color:var(--text-main);
}

.voz-col-text p:last-child{
  margin-bottom:0;
}

.voz-cards-block{
  padding-top:56px;
  padding-bottom:28px;
}

.voz-cards{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:22px;
}

.voz-card{
  min-height:290px;
  border-radius:24px;
  padding:26px 24px;
  background:linear-gradient(180deg, #ffd6df 0%, #ff9bb0 100%);
  box-shadow:0 14px 35px rgba(81, 1, 8, 0.10);
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}

.voz-card-number{
  font-size:.95rem;
  font-weight:700;
  letter-spacing:.08em;
  color:var(--text-main);
}

.voz-card-title{
  font-size:2.1rem;
  line-height:1;
  font-weight:600;
  color:var(--text-main);
}

.voz-detail-block{
  padding-top:58px;
  padding-bottom:58px;
  
}

.voz-detail-grid{
  display:grid;
  grid-template-columns:120px minmax(0, 1fr);
  gap:28px;
  align-items:start;
}

.voz-detail-number{
  font-size:2.4rem;
  line-height:1;
  color:var(--accent);
  padding-top:6px;
}

.voz-detail-title{
  margin:0 0 20px;
  font-size:clamp(2.3rem, 4vw, 4.2rem);
  line-height:.98;
  font-weight:500;
  color:var(--text-main);
}

.voz-detail-title span{
  color:var(--accent);
}

.voz-detail-content{
  max-width:850px;
}

.voz-detail-content p{
  margin:0 0 18px;
  font-size:1rem;
  line-height:1.85;
  color:var(--text-main);
}

.voz-example-title{
  margin:28px 0 12px;
  font-size:1.55rem;
  line-height:1.2;
  font-weight:600;
  color:var(--text-main);
}

.voz-example-list{
  margin:0;
  padding-left:22px;
}

.voz-example-list li{
  margin-bottom:10px;
  font-size:1rem;
  line-height:1.75;
  color:var(--text-main);
}

/* =========================
   TABLET
========================= */
@media (min-width: 769px) and (max-width: 1400px){

  html, body{
    background:#fff !important;
    background-image:none !important;
  }

  body::before,
  body::after{
    display:none !important;
    content:none !important;
    background:none !important;
  }

  .layout{
    background:#fff !important;
    background-image:none !important;
  }

  .layout::before,
  .layout::after{
    display:none !important;
    content:none !important;
    background:none !important;
  }
}

@media (max-width: 1400px){

  /* 🔥 SIDEBAR OCULTO POR DEFECTO */
  .sidebar{
    width:236px;
    min-width:236px;
    max-width:236px;
    padding-left:15px;
    padding-right:15px;
    box-shadow:16px 0 40px rgba(0,0,0,.12);
    transform:translateX(-100%) !important;
    opacity:0 !important;
    pointer-events:none !important;
    transition:transform .35s ease, opacity .25s ease;
  }

  /* 🔥 CUANDO SE ABRE */
  .sidebar.open{
    transform:translateX(0) !important;
    opacity:1 !important;
    pointer-events:auto !important;
  }

  /* 🔥 ESTADO CON layout.menu-hidden */
  .layout.menu-hidden .sidebar{
    transform:translateX(-100%) !important;
    opacity:0 !important;
    pointer-events:none !important;
  }

  .layout.menu-hidden .sidebar.open{
    transform:translateX(0) !important;
    opacity:1 !important;
    pointer-events:auto !important;
  }

  /* 🔥 BOTÓN HAMBURGUESA VISIBLE */
  .floating-menu-btn{
    display:flex !important;
  }

  /* 🔥 BACKDROP */
  .menu-backdrop.show{
    opacity:1;
    pointer-events:auto;
  }

  /* 🔥 CONTENIDO SIN MARGEN */
  .content{
    padding-left:0 !important;
    margin-left:0 !important;
    width:100% !important;
  }

  .sidebar .brand-box{
    padding-top:18px;
    padding-bottom:34px;
    margin-bottom:0;
  }

  .sidebar .brand-logo{
    width:132px;
    filter:brightness(0) saturate(100%) invert(13%) sepia(74%) saturate(2924%) hue-rotate(329deg) brightness(80%) contrast(101%) !important;
  }

  .search-trigger{
    width:100%;
    height:42px;
    border-radius:999px;
    margin:0 0 34px;
    font-size:.95rem;
  }

  .menu-section{
    margin-bottom:18px;
  }

  .menu-section-toggle{
    padding:0;
    gap:13px;
    font-size:.9rem;
    line-height:1.15;
  }

  .menu-links{
    padding-left:30px;
    margin-top:11px;
  }

  .menu-link{
    padding:6px 0;
    font-size:.9rem;
    line-height:1.18;
  }

.hero-full{
  position:relative;
  min-height:330px;
  display:block !important;
  height:auto !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
  background:
    linear-gradient(90deg, rgba(255,255,255,.62) 0%, rgba(255,255,255,.36) 32%, rgba(255,255,255,.10) 58%, rgba(0,0,0,.18) 100%),
    url('https://images.unsplash.com/photo-1494790108377-be9c29b29330?auto=format&fit=crop&w=1600&q=80') center center / cover no-repeat !important;
}

.hero-brand{
  position:relative;
  z-index:1;
  display:flex !important;
  padding:104px 30px 54px 74px;
  max-width:520px;
  align-items:center;
  gap:18px;
}

.hero-brand-mark{
  width:62px;
  height:62px;
}

.hero-brand-name{
  display:block !important;
}

  .page-shell{
    padding:36px 24px 48px;
  }

  .page-header-grid{
    grid-template-columns:1fr;
  }

  .index-card{
    position:relative;
    top:auto;
  }

  .section-grid{
    grid-template-columns:1fr;
    gap:16px;
  }

  .feature-grid{
    grid-template-columns:1fr;
  }

  .brandlight-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .audience-block,
  .audience-block.reverse{
    grid-template-columns:1fr;
  }

  .welcome-inner{
    padding:0 24px 44px;
  }

  .hero-copy h1{
    font-size:3.2rem;
  }

  .search-panel{
    width:min(760px, 100%);
  }

  .voz-wrap{
    padding-left:28px;
    padding-right:28px;
  }

  .voz-top-grid{
    grid-template-columns:1fr;
    gap:28px;
  }

  .voz-top-right{
    padding-top:0;
  }

  .voz-two-col{
    grid-template-columns:1fr;
    gap:18px;
  }

  .voz-col-heading{
    font-size:2rem;
  }

  .voz-cards{
    grid-template-columns:1fr;
  }

  .voz-card{
    min-height:220px;
  }

  .voz-detail-grid{
    grid-template-columns:1fr;
    gap:16px;
  }

  .voz-detail-number{
    font-size:2rem;
    padding-top:0;
  }
  .mobile-topbar{
  display:none !important;
}
}

@media (min-width: 1401px){
  .mobile-topbar{
    display:none !important;
  }

  .sidebar{
    transform:translateX(0) !important;
    opacity:1 !important;
    pointer-events:auto !important;
  }

  .floating-menu-btn{
    display:none !important;
  }

  .content{
    padding-top:0 !important;
    margin-left:var(--menu-width) !important;
    width:calc(100% - var(--menu-width)) !important;
  }
}

/* Menu estatico */
@media (min-width: 1401px){
  :root{
    --menu-width: 236px;
  }

  .sidebar{
    padding:26px 15px 18px;
    overflow-y:hidden;
  }

  .sidebar .brand-box{
    display:flex;
    padding-top:18px;
    padding-bottom:34px;
    margin-bottom:0;
  }

  .sidebar .brand-logo{
    width:132px;
    filter:brightness(0) saturate(100%) invert(13%) sepia(74%) saturate(2924%) hue-rotate(329deg) brightness(80%) contrast(101%) !important;
  }

  .search-trigger{
    height:42px;
    border-radius:999px;
    margin:0 0 34px;
    font-size:.95rem;
  }

  .menu-section{
    margin-bottom:18px;
  }

  .menu-section-toggle{
    padding:0;
    gap:13px;
    font-size:.9rem;
    line-height:1.15;
  }

  .menu-links{
    padding-left:30px;
    margin-top:11px;
  }

  .menu-link{
    padding:6px 0;
    font-size:.9rem;
    line-height:1.18;
  }
}
/* =========================
   MOBILE
========================= */

@media (max-width: 768px){

  .mobile-topbar{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:82px;
  background:var(--bg-menu);
  display:flex !important;
  align-items:center;
  justify-content:center;
  padding:0 20px;
  z-index:1450;
}

  .floating-menu-btn{
  position:fixed !important;
  top:40px !important;
  left:18px !important;
  width:44px !important;
  height:44px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:transparent !important;
  border:none !important;
  border-radius:0 !important;
  box-shadow:none !important;
  z-index:2000 !important;
}

  .content{
    padding-top:82px !important;
    margin-left:0 !important;
    width:100% !important;
  }

  
  .aud-block{
    display:flex !important;
    flex-direction:column !important;
  }

  .aud-copy{
    order:1 !important;
  }

  .aud-image{
    order:2 !important;
    margin-top:15px;
  }

  /* TOP BAR MÓVIL */
  .mobile-topbar{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:82px;
    background:var(--bg-menu);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0 20px;
    z-index:1450;
   
  }

  .mobile-topbar-logo-link{
    display:flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
  }

  .mobile-topbar-logo{
    width:152px;
    max-width:38vw;
    height:auto;
    object-fit:contain;
    display:block;
    filter:brightness(0) saturate(100%) invert(13%) sepia(74%) saturate(2924%) hue-rotate(329deg) brightness(80%) contrast(101%) !important;
  }

  .floating-menu-btn{
    position:fixed;
    left:20px;
    top:50%;
    transform:translateY(-50%);
    width:44px;
    height:44px;
    display:flex !important;
    align-items:center;
    justify-content:center;
    background:transparent;
    border:none;
    border-radius:0;
    box-shadow:none;
    z-index:1460;
  }

  .floating-menu-btn:hover{
    transform:translateY(-50%);
  }

  .burger-lines{
    width:30px;
    gap:6px;
  }

  .floating-menu-btn .burger-lines span,
  .burger-lines span{
    width:100%;
    height:3px;
    margin:0;
    border-radius:999px;
    background:#800f2e !important;
    display:block;
  }

  .site.menu-closed .floating-menu-btn{
    left:20px;
  }

  .sidebar{
    width:100vw;
    min-width:100vw;
    max-width:100vw;
    height:100vh;
    padding:clamp(104px, 15vh, 126px) clamp(28px, 7vw, 48px) 28px;
    border-right:none;
    box-shadow:none;
    z-index:1430;
    overflow-y:hidden;
    overflow-x:hidden;
    transform:translateX(-100%);
    opacity:0;
    pointer-events:none;
    transition:transform .35s ease, opacity .25s ease;
  }

  .sidebar.open{
    transform:translateX(0);
    opacity:1;
    pointer-events:auto;
  }

  .layout.menu-hidden .sidebar{
    transform:translateX(-100%);
    opacity:0;
    pointer-events:none;
  }

  .layout.menu-hidden .sidebar.open{
    transform:translateX(0);
    opacity:1;
    pointer-events:auto;
  }

  .menu-backdrop{
    z-index:1420;
  }

  .menu-backdrop.show{
    opacity:1;
    pointer-events:auto;
  }

  .content{
    padding-left:0 !important;
    margin-left:0 !important;
    width:100% !important;
    padding-top:82px;
  }

  /* OCULTAR LOGO INTERNO DEL SIDEBAR EN MÓVIL
     porque ya existe en la barra superior */
  .sidebar .brand-box{
    display:none;
  }

  .brand-box{
    margin-top:6px;
    margin-bottom:36px;
    padding-left:30px;
    gap:14px;
  }

  .brand-mark{
    width:50px;
    height:50px;
  }

  .brand-title{
    font-size:2.15rem;
    line-height:1;
    font-weight:500;
  }

  .brand-subtitle{
    display:none;
  }

  .search-trigger{
    height:50px;
    border-radius:14px;
    font-size:1rem;
    margin:0 0 28px;
    background:#fff;
  }

  .menu-section{
    margin-bottom:18px;
  }

  .menu-section-toggle{
    font-size:1.05rem;
    gap:12px;
    padding:10px 0;
  }

  .menu-links{
    padding-left:24px;
    margin-top:8px;
  }

  .menu-link{
    font-size:1rem;
    line-height:1.25;
    padding:8px 0;
  }

  .hero-full{
    min-height:300px;
  }

  .hero-brand{
    padding:30px 22px 30px 24px;
    max-width:none;
    gap:14px;
    align-items:center;
  }

  .hero-brand-mark{
    width:54px;
    height:54px;
  }

  .hero-brand-name{
    font-size:2.9rem;
    line-height:1;
    color:var(--text-main);
  }

  .page-shell{
    padding:34px 24px 40px;
  }

  .page-title{
    font-size:3.1rem;
    line-height:.95;
    margin-bottom:18px;
  }

  .page-intro{
    font-size:1rem;
    line-height:1.7;
    max-width:100%;
  }

  .index-card{
    margin-top:28px;
    border-radius:24px;
    padding:22px 20px 18px;
  }

  .index-card-title{
    margin-top:0;
    margin-bottom:18px;
    font-size:.9rem;
    letter-spacing:.08em;
    color:var(--text-main);
  }

  .index-list{
    gap:14px;
  }

  .index-list a{
    font-size:1rem;
    line-height:1.45;
  }

  .welcome-main{
    padding-top:28px;
  }

  .welcome-inner{
    padding:0 18px 34px;
  }

  .hero-copy h1{
    font-size:2.2rem;
    line-height:1.02;
    margin-bottom:20px;
  }

  .hero-copy p,
  .page-intro,
  .section-content p,
  .audience-copy p{
    font-size:.96rem;
    line-height:1.7;
  }

  .bottom-brand-bar{
    width:100%;
    margin-left:0;
    padding:18px 16px;
  }

  .search-modal{
    padding:16px;
  }

  .search-panel{
    width:100%;
  }

  .search-panel-header{
    padding:16px 18px;
  }

  .search-panel-body{
    padding:18px 18px 18px;
  }

  .search-input-row{
    gap:12px;
  }

  .search-input-icon{
    font-size:1.15rem;
  }

  .search-input{
    font-size:.98rem;
  }

  .voz-wrap{
    padding-left:18px;
    padding-right:18px;
  }

  .voz-hero-block{
    padding-top:72px;
    padding-bottom:36px;
  }

  .voz-main-title{
    font-size:2.8rem;
    line-height:.95;
    margin-bottom:16px;
  }

  .voz-lead{
    font-size:.96rem;
    line-height:1.75;
  }

  .voz-two-col-block,
  .voz-detail-block{
    padding-top:36px;
    padding-bottom:36px;
  }

  .voz-col-heading{
    font-size:1.7rem;
  }

  .voz-col-text p,
  .voz-detail-content p,
  .voz-example-list li{
    font-size:.95rem;
    line-height:1.72;
  }

  .voz-card{
    min-height:185px;
    padding:22px 20px;
    border-radius:18px;
  }

  .voz-card-title{
    font-size:1.7rem;
  }

  .voz-detail-title{
    font-size:2.2rem;
  }

  .voz-example-title{
    font-size:1.3rem;
  }
}

@media (max-width: 430px){
  .mobile-topbar{
    height:78px;
    padding:0 16px;
  }

  .floating-menu-btn{
    left:16px;
    width:42px;
    height:42px;
  }

  .mobile-topbar-logo{
    width:132px;
    max-width:36vw;
  }

  .sidebar{
    padding:94px 24px 22px;
  }

  .content{
    padding-top:78px;
    margin-left:0 !important;
    width:100% !important;
  }

  .brand-box{
    padding-left:26px;
  }

  .brand-title{
    font-size:1.9rem;
  }

  .hero-full{
    min-height:280px;
  }

  .hero-brand{
    padding:24px 18px 26px 22px;
    gap:12px;
  }

  .hero-brand-mark{
    width:48px;
    height:48px;
  }

  .hero-brand-name{
    font-size:2.35rem;
  }

  .page-shell{
    padding:30px 20px 36px;
  }

  .page-title{
    font-size:2.65rem;
  }

  .page-intro{
    font-size:.96rem;
  }

  .index-card{
    padding:20px 18px 18px;
  }
}


/* =========================
   RESPONSIVE DEEP LINK
========================= */

@media (max-width: 1100px){
  .deep-link-wrap{
    left:-72px;
    top:10px;
  }

  .deep-link-trigger{
    width:40px;
    height:40px;
  }

  .deep-link-copy{
    height:40px;
    font-size:.86rem;
    padding:0 14px 0 11px;
  }
}

@media (max-width: 768px){
  .deep-link-wrap{
    display:none !important;
  }

  .deep-link-trigger{
    opacity:1;
    visibility:visible;
    transform:none;
    pointer-events:auto;
    width:40px;
    height:40px;
  }

  .deep-link-copy{
    position:static;
    opacity:1;
    visibility:visible;
    transform:none;
    pointer-events:auto;
    height:40px;
    font-size:.84rem;
    padding:0 12px;
  }
}

@media (max-width: 480px){
  .deep-link-copy{
    font-size:.8rem;
    padding:0 11px;
  }

  .deep-link-trigger svg,
  .deep-link-copy svg{
    width:17px;
    height:17px;
  }
}

.brand-box{
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:clamp(14px, 2.4vh, 22px);
   padding-bottom: 40px;
    padding-top: 20px;
}

.brand-logo{
  width:clamp(110px, 16.5vh, 146px);
  max-width:100%;
  height:auto;
  display:block;
  object-fit:contain;
  filter:brightness(0) saturate(100%) invert(13%) sepia(74%) saturate(2924%) hue-rotate(329deg) brightness(80%) contrast(101%);
}
.pos-section-body-full{
  width: 100%;
  max-width: 100%;
}

.como-intro{
  max-width: 100%;
  margin: 0 0 24px;
}

.pos-cards-full{
  width: 100%;
  max-width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.pos-card-img{
  width: 100%;
  border-radius: 20px;
  overflow: hidden;
  line-height: 0;
}

.pos-card-img img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 20px;
}

@media (max-width: 768px){
  .pos-section-grid{
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .pos-section-body-full{
    width: 100%;
    max-width: 100%;
    overflow: hidden;
  }

.pos-cards-full{
    grid-template-columns: 1fr !important;
  }

  .pos-card-img{
    width: 100%;
  }

  .pos-card-img img{
    width: 100%;
    height: auto;
    display: block;
  }
}
.pos-card-img{
  width: 100%;
  border-radius: 20px;
  overflow: hidden;
  line-height: 0;
}

.pos-card-img img{
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* ===== MODO HAMBURGUESA POR ZOOM ===== */
html.zoom-compact .mobile-topbar{
  display:none !important;
}

html.zoom-compact .floating-menu-btn{
  display:flex !important;
  position:fixed !important;
  top:0 !important;
  left:0 !important;
  width:45px !important;
  height:45px !important;
  align-items:center !important;
  justify-content:center !important;
  background:#f2f2f2 !important;
  border:0 !important;
  border-radius:0 0 5px 5px !important;
  box-shadow:0 8px 18px rgba(0,0,0,.08) !important;
  z-index:1400 !important;
}

html.zoom-compact .floating-menu-btn .burger-lines span{
  background:#800f2e !important;
}

html.zoom-compact .sidebar{
  transform:translateX(-100%) !important;
  opacity:0 !important;
  pointer-events:none !important;
}

html.zoom-compact .sidebar.open{
  transform:translateX(0) !important;
  opacity:1 !important;
  pointer-events:auto !important;
}

html.zoom-compact .layout.menu-hidden .sidebar{
  transform:translateX(-100%) !important;
  opacity:0 !important;
  pointer-events:none !important;
}

html.zoom-compact .layout.menu-hidden .sidebar.open{
  transform:translateX(0) !important;
  opacity:1 !important;
  pointer-events:auto !important;
}

html.zoom-compact .content{
  margin-left:0 !important;
  width:100% !important;
  padding-top:0 !important;
}
/* Ocultar deep links en responsive */
@media (max-width: 768px) {
  .section-deeplink > .deep-link-wrap,
  .section-deeplink .deep-link-wrap,
  .deep-link-wrap,
  .deep-link-trigger,
  .deep-link-copy,
  .copy-link-btn,
  .copy-link-btn2,
  .copy-link-icon,
  .copy-link-icon2,
  .copy-text,
  .copy-text2,
  .copy-toast,
  .copy-feedback {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
}

.copy-toast {
  display: none;
  position: fixed;
  left: 50%;
  bottom: 80px;
  transform: translateX(-50%) translateY(20px);
  z-index: 9999;
  padding: 12px 22px;
  border-radius: 999px;
  background: #9a072a;
  color: #ffffff;
  font-family: "Ubuntu", sans-serif;
  font-size: 14px;
  line-height: 1;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
  transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease;
}

.copy-toast.show {
  display: block;
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* Footer global */
.site-footer {
  background: #cccccc;
  min-height: 140px;
  width: 100%;
  max-width: 100%;
  margin-top: auto;
  padding-top: 28px;
  padding-bottom: 28px;
  padding-left: max(56px, calc((100% - 1550px) / 2 + 56px));
  padding-right: max(56px, calc((100% - 1550px) / 2 + 56px));
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}

.content > .site-footer {
  align-self: stretch;
  margin-left: 0;
  margin-right: 0;
}

.site-footer__left {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.site-footer__logo {
  height: 58px;
  width: auto;
  display: block;
  align-self: center;
  filter: brightness(0) saturate(100%) invert(40%) sepia(0%) saturate(0%) hue-rotate(180deg) brightness(96%) contrast(89%);
}

.site-footer__right {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.site-footer__text {
  font-family: "Ubuntu", sans-serif;
  font-size: 16px;
  line-height: 1;
  font-weight: 300;
  color: #666666;
  opacity: 0.9;
  white-space: nowrap;
}

.site-footer__partner {
  height: 56px;
  width: auto;
  display: block;
  align-self: center;
  filter: brightness(0) saturate(100%) invert(40%) sepia(0%) saturate(0%) hue-rotate(180deg) brightness(96%) contrast(89%);
}

@media (max-width: 1200px) {
  .site-footer {
    padding-left: 40px;
    padding-right: 40px;
  }
}

@media (max-width: 992px) {
  .site-footer {
    padding-left: 28px;
    padding-right: 28px;
  }
}

/* =========================
   HERO GLOBAL RESPONSIVE
========================= */

.trust-bienvenido-hero,
.aplicaciones-hero,
.color-hero,
.descargables-hero,
.diagramacion-hero,
.foto-hero,
.fotografia-hero,
.icon-hero,
.iconografia-hero,
.ilu-hero,
.ilustracion-hero,
.tipografia-page-hero,
.logosimbolo-hero,
.hero-full,
.voz-top-hero {
  height: var(--page-hero-height) !important;
  min-height: var(--page-hero-height) !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  background-color: transparent !important;
  background-position: 50% 50% !important;
  overflow: hidden !important;
}

.trust-bienvenido-hero,
.hero-full,
.voz-top-hero {
  background-size: cover !important;
  background-repeat: no-repeat !important;
}

.aplicaciones-hero img,
.color-hero img,
.descargables-hero img,
.diagramacion-hero img,
.foto-hero img,
.fotografia-hero img,
.icon-hero-img,
.iconografia-hero img,
.ilu-hero img,
.ilustracion-hero img,
.tipografia-page-hero img,
.aplicaciones-hero-video,
.diagramacion-hero-video,
.fotografia-hero-video,
.iconografia-hero-video,
.ilustracion-hero-video,
.logosimbolo-hero-video,
.color-hero-video,
.tipografia-page-hero-video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

@media (max-width: 991px) {
  .trust-bienvenido-hero,
  .aplicaciones-hero,
  .color-hero,
  .descargables-hero,
  .diagramacion-hero,
  .foto-hero,
  .fotografia-hero,
  .icon-hero,
  .iconografia-hero,
  .ilu-hero,
  .ilustracion-hero,
  .tipografia-page-hero,
  .logosimbolo-hero,
  .hero-full,
  .voz-top-hero {
    height: var(--page-hero-height-tablet) !important;
  }
}

@media (max-width: 576px) {
  .trust-bienvenido-hero,
  .aplicaciones-hero,
  .color-hero,
  .descargables-hero,
  .diagramacion-hero,
  .foto-hero,
  .fotografia-hero,
  .icon-hero,
  .iconografia-hero,
  .ilu-hero,
  .ilustracion-hero,
  .tipografia-page-hero,
  .logosimbolo-hero,
  .hero-full,
  .voz-top-hero {
    height: var(--page-hero-height-mobile) !important;
  }

  .trust-bienvenido-hero {
    background-image: url("../img/bienvenido/Hero -Mobile.webp") !important;
    background-position: center center !important;
  }

  .hero-full {
    background-image: url("../img/posicionamiento/Hero -Mobile.webp") !important;
    background-position: center center !important;
  }
}

@media (max-width: 768px) {
  .trust-bienvenido-hero,
  .aplicaciones-hero,
  .color-hero,
  .descargables-hero,
  .diagramacion-hero,
  .foto-hero,
  .fotografia-hero,
  .icon-hero,
  .iconografia-hero,
  .ilu-hero,
  .ilustracion-hero,
  .tipografia-page-hero,
  .logosimbolo-hero,
  .hero-full,
  .voz-top-hero {
    height: 200px !important;
    min-height: 200px !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  .trust-bienvenido-hero,
  .hero-full,
  .voz-top-hero {
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-color: #ffffff !important;
  }

  .aplicaciones-hero img,
  .color-hero img,
  .descargables-hero img,
  .diagramacion-hero img,
  .foto-hero img,
  .fotografia-hero img,
  .icon-hero-img,
  .iconografia-hero img,
  .ilu-hero img,
  .ilustracion-hero img,
  .tipografia-page-hero img,
  .aplicaciones-hero-video,
  .diagramacion-hero-video,
  .fotografia-hero-video,
  .iconografia-hero-video,
  .ilustracion-hero-video,
  .logosimbolo-hero-video,
  .color-hero-video,
  .tipografia-page-hero-video {
    object-fit: cover !important;
    object-position: center center !important;
    background-color: #ffffff !important;
  }
}

@media (max-width: 480px) {
  .trust-bienvenido-hero,
  .aplicaciones-hero,
  .color-hero,
  .descargables-hero,
  .diagramacion-hero,
  .foto-hero,
  .fotografia-hero,
  .icon-hero,
  .iconografia-hero,
  .ilu-hero,
  .ilustracion-hero,
  .tipografia-page-hero,
  .logosimbolo-hero,
  .hero-full,
  .voz-top-hero {
    height: 175px !important;
    min-height: 175px !important;
  }
}

@media (max-width: 768px) {
  .site-footer {
    min-height: 90px;
    padding: 0 22px;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    overflow: hidden;
  }

  .site-footer__left {
    display: flex;
    align-items: center;
    flex: 0 1 auto;
    min-width: 0;
  }

  .site-footer__right {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex: 0 1 auto;
    min-width: 0;
  }

  .site-footer__logo {
    height: 38px;
    width: auto;
    max-width: 120px;
    object-fit: contain;
  }

  .site-footer__text {
    font-size: 10px;
    line-height: 1;
    flex: 0 0 auto;
  }

  .site-footer__partner {
    height: 40px;
    width: auto;
    max-width: 112px;
    object-fit: contain;
  }
}

@media (max-width: 480px) {
  .site-footer {
    min-height: 82px;
    padding: 0 16px;
    gap: 10px;
  }

  .site-footer__logo {
    height: 30px;
    max-width: 96px;
  }

  .site-footer__right {
    gap: 5px;
  }

  .site-footer__text {
    font-size: 8px;
  }

  .site-footer__partner {
    height: 32px;
    max-width: 86px;
  }
}

/* Menu fijo sin barra de desplazamiento */
.sidebar,
.sidebar.open,
html.zoom-compact .sidebar,
html.zoom-compact .sidebar.open {
  overflow-y: hidden !important;
  overflow-x: hidden !important;
}

/* Responsive global: textos e imagenes seguros en movil */
@media (max-width: 768px) {
  body[class^="page-"],
  body:not([class]) {
    overflow-x: hidden !important;
  }

  body[class^="page-"] main p,
  body:not([class]) .pos-page p {
    text-align: left !important;
    overflow-wrap: break-word;
    hyphens: auto;
  }

  body[class^="page-"] main img:not(.site-footer__logo):not(.site-footer__partner),
  body:not([class]) .pos-page img {
    max-width: 100% !important;
  }

  .site-footer .site-footer__logo {
    height: 38px !important;
    width: auto !important;
    max-width: 120px !important;
    object-fit: contain !important;
  }

  .site-footer .site-footer__partner {
    height: 40px !important;
    width: auto !important;
    max-width: 112px !important;
    object-fit: contain !important;
  }
}

@media (max-width: 480px) {
  .site-footer .site-footer__logo {
    height: 30px !important;
    max-width: 96px !important;
  }

  .site-footer .site-footer__partner {
    height: 32px !important;
    max-width: 86px !important;
  }
}

/* Margenes moviles consistentes entre paginas */
@media (max-width: 768px) {
  .aplicaciones-wrap,
  .color-wrap,
  .descargables-wrap,
  .diagramacion-wrap,
  .fotografia-wrap,
  .icon-intro,
  .ilu-wrap,
  .brand-section-shell,
  .trust-bienvenido-page,
  .voz-wrap,
  .tipografia-wrap,
  .pos-page {
    width: 100% !important;
    max-width: none !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }
}

/* Menu movil global: mismo logo y color en todas las paginas */
@media (max-width: 768px) {
  .mobile-topbar-logo {
    width: 152px !important;
    max-width: 38vw !important;
    height: auto !important;
    object-fit: contain !important;
    filter: brightness(0) saturate(100%) invert(13%) sepia(74%) saturate(2924%) hue-rotate(329deg) brightness(80%) contrast(101%) !important;
  }

  .sidebar .brand-logo {
    width: 132px !important;
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    filter: brightness(0) saturate(100%) invert(13%) sepia(74%) saturate(2924%) hue-rotate(329deg) brightness(80%) contrast(101%) !important;
  }

  .floating-menu-btn .burger-lines span,
  .burger-lines span {
    background: #800f2e !important;
  }
}

@media (max-width: 430px) {
  .mobile-topbar-logo {
    width: 132px !important;
    max-width: 36vw !important;
  }
}

/* Menu movil compacto: mostrar todos los items */
@media (max-width: 768px) {
  .sidebar,
  .sidebar.open,
  html.zoom-compact .sidebar,
  html.zoom-compact .sidebar.open {
    padding: 88px 24px 18px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  .search-trigger {
    height: 42px !important;
    margin-bottom: 18px !important;
    font-size: 0.9rem !important;
  }

  .menu-section {
    margin-bottom: 10px !important;
  }

  .menu-section-toggle {
    padding: 6px 0 !important;
    gap: 10px !important;
    font-size: 0.92rem !important;
    line-height: 1.05 !important;
  }

  .menu-links {
    margin-top: 4px !important;
    padding-left: 20px !important;
  }

  .menu-link {
    padding: 5px 0 !important;
    font-size: 0.9rem !important;
    line-height: 1.1 !important;
  }
}

@media (max-width: 430px) {
  .sidebar,
  .sidebar.open,
  html.zoom-compact .sidebar,
  html.zoom-compact .sidebar.open {
    padding: 82px 20px 16px !important;
  }

  .search-trigger {
    height: 38px !important;
    margin-bottom: 14px !important;
  }

  .menu-section {
    margin-bottom: 8px !important;
  }

  .menu-section-toggle {
    font-size: 0.86rem !important;
    padding: 5px 0 !important;
  }

  .menu-link {
    font-size: 0.84rem !important;
    padding: 4px 0 !important;
  }
}

/* Logo movil Trust con color exacto */
@media (max-width: 768px) {
  .mobile-topbar-logo-link {
    position: relative !important;
    width: 152px !important;
    max-width: 38vw !important;
    height: 54px !important;
  }

  .mobile-topbar-logo-link::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    background: #800f2e !important;
    -webkit-mask: url("../img/Logo Trust.svg") center / contain no-repeat !important;
    mask: url("../img/Logo Trust.svg") center / contain no-repeat !important;
  }

  .mobile-topbar-logo {
    opacity: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
  }
}

@media (max-width: 430px) {
  .mobile-topbar-logo-link {
    width: 132px !important;
    max-width: 36vw !important;
    height: 48px !important;
  }
}

/* Texto general uniforme solo en responsive movil */
@media (max-width: 768px) {
  main.content :where(p, li, a, button, label, small, em),
  main.content :where(.download-name, .palette-label, .palette-value, .color-hex-default, .copy-text, .copy-text2) {
    font-size: 16px !important;
  }
}

/* Espaciado movil compacto en todas las paginas */
@media (max-width: 768px) {
  body[class][class] main.content > section:not(.logosimbolo-hero):not(.fotografia-hero):not(.iconografia-hero):not(.ilu-hero):not(.ilustracion-hero):not(.voz-top-hero):not(.descargables-hero):not(.diagramacion-hero):not(.aplicaciones-hero):not(.tipografia-page-hero):not(.trust-bienvenido-hero):not(.hero-full) {
    padding-top: 22px !important;
    padding-bottom: 22px !important;
  }

  body[class][class] main.content :where(
    .brand-section-shell,
    .color-wrap,
    .descargables-wrap,
    .diagramacion-wrap,
    .fotografia-wrap,
    .icon-shell,
    .icon-intro,
    .ilu-wrap,
    .voz-wrap,
    .tipografia-wrap,
    .aplicaciones-wrap,
    .pos-page,
    .trust-bienvenido-page
  ) {
    padding-top: 22px !important;
    padding-bottom: 22px !important;
  }

  body[class][class] main.content :where(
    .brand-section-head,
    .brand-feature-grid,
    .brand-two-col,
    .color-top-grid,
    .color-two-col,
    .color-section-grid,
    .combinations-grid-wrap,
    .foto-intro-grid,
    .foto-section-head,
    .foto-guidelines,
    .icon-intro-grid,
    .icon-section-head,
    .ilu-top-grid,
    .ilu-two-col,
    .ilu-color-text,
    .voz-top-grid,
    .voz-two-col,
    .voz-detail-grid,
    .diagramacion-grid,
    .diagramacion-section-grid
  ) {
    gap: 20px !important;
  }

  body[class][class] main.content :where(
    .brand-section-head-left h1,
    .color-main-title,
    .descargables-title,
    .diagramacion-title,
    .foto-intro-copy h1,
    .icon-main-title,
    .ilu-main-title,
    .voz-main-title,
    .tipografia-title,
    .page-title,
    h1,
    h2,
    h3
  ) {
    margin-top: 0 !important;
    margin-bottom: 0px !important;
  }

  body[class][class] main.content :where(
    .brand-section:not(.brand-section-intro) .brand-section-shell,
    .foto-categories,
    .foto-section,
    .icon-section,
    .ilu-section,
    .voz-two-col-block,
    .voz-detail-block,
    .voz-cards-block,
    .diagramacion-section,
    .color-section,
    .descargables-section
  ) {
    padding-top: 24px !important;
    padding-bottom: 24px !important;
  }

  body[class][class] main.content :where(
    .voz-section-line,
    .ilu-section-line,
    .diagramacion-divider,
    .foto-section-line,
    .brand-section-shell,
    .section-line
  ) {
    margin-bottom: 50px !important;
  }

  body[class][class] main.content :where(
    .foto-gallery-block,
    .foto-mosaic,
    .foto-guidelines-section,
    .brand-card-large,
    .photo-grid,
    .dual-example-grid,
    .wrong-uses-grid,
    .style-grid,
    .set-grid,
    .forbidden-grid,
    .ilu-card-grid,
    .ilu-two-images,
    .ilu-wrong-grid,
    .gradient-image-grid,
    .extended-palette-grid,
    .brand-colors-grid
  ) {
    margin-top: 16px !important;
    margin-bottom: 18px !important;
  }

  body[class][class] main.content :where(
    .foto-intro,
    .foto-categories,
    .foto-section,
    .icon-section,
    .ilu-section,
    .ilu-showcase,
    .brand-section,
    .color-section,
    .voz-hero-block,
    .voz-two-col-block,
    .voz-detail-block,
    .voz-cards-block,
    .diagramacion-section,
    .descargables-section,
    .aplicaciones-section,
    .tipografia-section
  ) {
    padding-top: 24px !important;
    padding-bottom: 24px !important;
  }
}

/* Menu movil final: barra 392x60 */
@media (max-width: 768px) {
  .mobile-topbar,
  html.zoom-compact .mobile-topbar {
    position: fixed !important;
    top: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: min(392px, 100vw) !important;
    max-width: 392px !important;
    height: 60px !important;
    min-height: 60px !important;
    padding: 0 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--bg-menu) !important;
    z-index: 1450 !important;
  }

  .content,
  html.zoom-compact .content {
    padding-top: 60px !important;
  }

  .floating-menu-btn,
  .site.menu-closed .floating-menu-btn,
  html.zoom-compact .floating-menu-btn {
    position: fixed !important;
    top: 0 !important;
    left: max(0px, calc((100vw - 392px) / 2)) !important;
    width: 76px !important;
    height: 60px !important;
    transform: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    z-index: 2000 !important;
  }

  .floating-menu-btn:hover {
    transform: none !important;
  }

  .burger-lines {
    width: 29px !important;
    gap: 6px !important;
  }

  .floating-menu-btn .burger-lines span,
  .burger-lines span {
    width: 29px !important;
    height: 3px !important;
    background: #800f2e !important;
  }

  .mobile-topbar-logo-link,
  html.zoom-compact .mobile-topbar-logo-link {
    width: 132px !important;
    max-width: 40vw !important;
    height: 42px !important;
  }
}

/* Heroes moviles: ancho completo y alto uniforme */
@media (max-width: 768px) {
  body[class][class] :where(
    .trust-bienvenido-hero,
    .aplicaciones-hero,
    .color-hero,
    .descargables-hero,
    .diagramacion-hero,
    .foto-hero,
    .fotografia-hero,
    .icon-hero,
    .iconografia-hero,
    .ilu-hero,
    .ilustracion-hero,
    .tipografia-page-hero,
    .logosimbolo-hero,
    .hero-full,
    .voz-top-hero
  ) {
    width: 100% !important;
    max-width: none !important;
    height: 147px !important;
    min-height: 147px !important;
    max-height: 147px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    overflow: hidden !important;
  }

  body[class][class] :where(
    .aplicaciones-hero img,
    .color-hero img,
    .descargables-hero img,
    .diagramacion-hero img,
    .foto-hero img,
    .fotografia-hero img,
    .icon-hero-img,
    .iconografia-hero img,
    .ilu-hero img,
    .ilustracion-hero img,
    .tipografia-page-hero img,
    .aplicaciones-hero-video,
    .diagramacion-hero-video,
    .fotografia-hero-video,
    .iconografia-hero-video,
    .ilustracion-hero-video,
    .logosimbolo-hero-video,
    .color-hero-video,
    .tipografia-page-hero-video
  ) {
    width: 100% !important;
    height: 147px !important;
    min-height: 147px !important;
    max-height: 147px !important;
    object-fit: cover !important;
    object-position: center center !important;
  }
}
/* Margenes laterales globales en responsive movil */
@media (max-width: 768px) {
  body[class][class] main.content
    :where(
      .brand-section-shell,
      .color-wrap,
      .descargables-wrap,
      .aplicaciones-wrap,
      .diagramacion-wrap,
      .fotografia-wrap,
      .ilu-wrap,
      .voz-wrap,
      .tipografia-wrap,
      .pos-page,
      .foto-section-shell,
      .icon-section-shell,
      .icon-intro,
      .ilu-section-shell,
      .voz-section-shell,
      .diagramacion-section-shell,
      .aud-section-shell,
      .posicionamiento-section-shell,
      .tipografia-section-shell
    ) {
    padding-left: 20px !important;
    padding-right: 20px !important;
    box-sizing: border-box !important;
  }

  body[class][class] main.content
    :where(
      .brand-section-shell,
      .color-wrap,
      .descargables-wrap,
      .aplicaciones-wrap,
      .diagramacion-wrap,
      .fotografia-wrap,
      .ilu-wrap,
      .voz-wrap,
      .tipografia-wrap,
      .pos-page
    )
    > :where(
      .brand-section-head,
      .brand-two-col,
      .brand-feature-grid,
      .color-top-grid,
      .color-two-col,
      .descargables-list,
      .foto-section,
      .icon-section,
      .ilu-section,
      .voz-section,
      .diagramacion-section
    ) {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  body[class][class] main.content
    :where(
      .color-top-grid,
      .color-two-col,
      .brand-section-head,
      .brand-two-col,
      .brand-feature-grid,
      .descargables-list
    ) {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* Override final: todos los wrappers moviles quedan con 20px laterales */
@media (max-width: 768px) {
  body[class][class] main.content :where(
    .brand-section,
    .color-section,
    .descargables-section,
    .foto-section,
    .icon-section,
    .ilu-section,
    .voz-section,
    .diagramacion-section,
    .tipografia-section,
    .posicionamiento-section,
    .aud-section
  ) {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  body[class][class] main.content :where(
    .aplicaciones-wrap,
    .color-wrap,
    .descargables-wrap,
    .diagramacion-wrap,
    .fotografia-wrap,
    .icon-intro,
    .ilu-wrap,
    .brand-section-shell,
    .trust-bienvenido-page,
    .voz-wrap,
    .tipografia-wrap,
    .pos-page
  ) {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* Override final movil: indices alineados al contenedor */
@media (max-width: 768px) {
  body[class][class] main.content :where(
    .brand-index,
    .color-index,
    .diagramacion-index,
    .foto-index,
    .icon-index,
    .ilu-index,
    .tipografia-index,
    .voz-index,
    .index-card,
    .pos-index
  ) {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: 24px !important;
    padding-left: 0 !important;
    box-sizing: border-box !important;
    text-align: left !important;
  }

  body[class][class] main.content :where(
    .brand-index h3,
    .color-index-title,
    .diagramacion-index-title,
    .foto-index h2,
    .icon-index-title,
    .ilu-index-title,
    .tipografia-index-title,
    .voz-index-title,
    .index-card-title,
    .pos-index-title
  ) {
    margin-left: 0 !important;
    padding-left: 0 !important;
    text-align: left !important;
  }

  body[class][class] main.content :where(
    .brand-index ol,
    .color-index-list,
    .diagramacion-index-list,
    .foto-index ol,
    .icon-index ol,
    .ilu-index ol,
    .tipografia-index-list,
    .voz-index-list
  ) {
    margin-left: 0 !important;
    padding-left: 22px !important;
    text-align: left !important;
  }

  body[class][class] main.content :where(
    .index-list,
    .pos-index-list
  ) {
    margin-left: 0 !important;
    padding-left: 0 !important;
    text-align: left !important;
  }

  body[class][class] main.content :where(
    .brand-index a,
    .color-index-list a,
    .diagramacion-index-list a,
    .foto-index a,
    .icon-index a,
    .ilu-index a,
    .tipografia-index-list a,
    .voz-index-list a,
    .index-list a,
    .pos-index-list a
  ) {
    text-decoration: none !important;
    text-align: left !important;
  }
}