/* ===== base ===== */
:root{
  --paper:#ffffff;
  --ink:#0b0b0b;
  --muted:#6b7280;

  /* Paleta corporativa: oro + negros/blancos (sin azules vivos) */
  --gold:#D8B880;          /* dorado principal */
  --gold-strong:#C9A86A;   /* dorado intenso para acentos */
  --gold-soft:#E8DCC0;     /* dorado suave para fondos */
 
  --slate:#1f2937;         /* gris carbón */
  --line:rgba(0,0,0,.10);
  --offset-total:72px;
  --header-h:68px;

  --about-gold-h: 300px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--ink);
  background:#fff;
  font:16px/1.7 "Poppins", sans-serif; 
  font-size: 14px;
  padding-top:var(--offset-total);
  overflow-x:hidden;
}
img{
  display:block;
  max-width:100%
}
.container{
  max-width:1200px;
  margin-inline:auto;
  padding:0 1.25rem
}

/* ===== MENÚ ===== */
.site-header{
  position:fixed; 
  top:var(--topbar-h,0); 
  left:0;
  right:0; 
  z-index:9999;
  background:#fff; 
  height:var(--header-h);
  
}
.header-inner{ 
  display:flex; 
  align-items:center; 
  gap:8rem; 
  padding:.5rem 0; 
  height:100% 
}
.logo{ 
  height:40px 
}
.nav{ 
  margin-left:auto 
}
.nav-toggle, .nav-toggle.m{
  display:inline-flex; 
  align-items:center; 
  justify-content:center;
  padding:.4rem .55rem; 
  border:1px solid var(--line); 
  background:#fff; 
  border-radius:10px; 
  font-size:.95rem; 
  cursor:pointer;
  color:gray;
}
.nav-list{ 
  list-style:none; 
  margin:0; 
  padding:0; 
  gap:.6rem; 
  align-items:center 
}
.nav-list a{
  color:var(--ink); 
  text-decoration:none; 
  padding:.7rem .6rem; 
  border-radius:5px; 
  font-weight:500;
}
.nav-list a.is-active{
  font-weight:700;
  background:transparent;
  text-decoration: underline var(--gold);
  text-decoration-thickness: 3px;
  text-underline-offset: 6px;
  text-decoration-skip-ink: auto;
}
.nav-list a:hover{ 
  color:rgb(78, 78, 78); 
  font-weight:600 
}
.lang-switch{ 
  display:flex; 
  align-items:center; 
  gap:.4rem; 
  margin-left:4.5rem; 
  border-radius:5px 
}
.lang,.m-lang .lang{ 
  border:1px solid var(--line); 
  background:#fff; 
  padding:.28rem 12px; 
  font-size:.9rem; 
  border-radius:7px;
  border: 1px solid black;
  color:black;
}
.lang:hover{ 
  border: 1px solid var(--gold);
  color:var(--gold-strong)
}
.lang.is-active{ 
  background:black; 
  font-weight:600; 
  color:white;
  border: 1px solid gray;
}

@media (min-width:980px){
  .nav-toggle{ display:none }
  .nav-list{ display:flex }
}
.header-mobile{ display:none }
@media (max-width:979px){
  .header-inner{display:none}
  .header-mobile{
    display:grid; 
    grid-template-columns:48px 1fr 100px; 
    align-items:center; 
    padding:.2rem .6rem; 
    gap:.25rem; 
    height:100%;
    border-top:1px solid rgb(207, 207, 207)
  }
  .nav-toggle.m{
    justify-self:start
  }
  .m-center{
    justify-self:center; 
    display:flex; 
    align-items:center; 
    justify-content:center
  }
  .m-brand{gap:.45rem}
  .m-logo{ 
    height:40px; 
    width:auto; 
    object-fit:contain
   }
  .m-lang{ 
    display:flex; 
    justify-self:end; 
    gap:.35rem; 
    padding-right:.25rem 
  }
  .m-lang .lang{ 
    padding:.25rem .6rem; 
    font-size:.8rem; 
    text-align:center;
  }
  #site-nav{
    position:fixed; 
    top:calc(var(--topbar-h) + var(--header-h) + 8px); 
    left:12px; 
    right:12px; 
    z-index:10001;
    background-color: rgba(255, 255, 255, 0.945); 
    border:1px solid var(--line); 
    border-radius:12px;
    display:none; 
    flex-direction:column; 
    gap:.2rem; 
    padding:.5rem;
    box-shadow:0 10px 30px rgba(0,0,0,.10); 
    max-height:50vh; 
    overflow:auto;
  }
  #site-nav.open{
    display:flex
  }
  #site-nav a{
    padding:.6rem;
    border-radius:8px;
    color:#111 !important}
}

/* ABOUT 2 - Nosotros */
.about2{
  position:relative;
  margin-top:0;
  padding: 50px 0;
  background:#fff;

}
.about2::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:var(--about-gold-h);
  background: linear-gradient(180deg, var(--gold), #666);
  z-index:0
}
.about2-grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:22px;
  align-items:stretch
}
@media (max-width:979px){
  .about2-grid{
    grid-template-columns:1fr;
    gap:16px
  }
}
.about2-title{
  margin:0 0 15px;
  font-size:23px;
  color:#fff
}
.about2 p{
  margin:.35rem 0 1rem;
  color:#fff;
  text-align:justify;
  font-size:14px
}
.about2-cards{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px
}
@media (max-width:640px){
  .about2-cards{
    grid-template-columns:1fr
  }
}
.about2-card{
  background:#fff;
  border:1px solid #eadfca;
  padding:35px 45px;
  box-shadow:0 16px 36px rgba(0,0,0,.14);
  min-height:250px;
  transform:translateY(12%);
  border-radius: 5px;
}
.about2-card h3{
  margin:.1rem 0 .45rem;
  font-size:18px;
  text-align:center
}
.about2-card p{
  margin:.35rem 0 0;
  color:#111;
  text-align:justify;
  font-size:13px
}

/* Carrusel FULL del contenedor + borde redondeado */
.about2-right{
  position:relative;
  min-height: clamp(260px, 42vw, 480px)
}
.about2-slider{
  position:absolute;
  inset:0;
  overflow:hidden;
  border-radius:18px
}
.about2-slider .slide{
  position:absolute;
  inset:0;
  opacity:0;
  transition:opacity .7s ease-in-out}
.about2-slider .slide.is-active{
  opacity:1
}
.about2-slider img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover; 
  border-radius: 5px;
}

/* Responsive ONLY */
@media (max-width: 979px){
  .about2{ padding-top:30px; }

  .about2-grid{
    display:grid;
    grid-template-columns: 1fr;
    grid-template-areas:
      "title"   /* h2 */
      "sub"     /* párrafo introductorio */
      "image"   /* slider/imagen */
      "cards";  /* cards debajo */
    gap:16px;
    align-items:start;
    position:relative;
  }

  .about2-left{ display: contents; }

  .about2-title{
    grid-area:title;
    position:relative;
    z-index:3;
    margin:0;
  }

  .about2-grid > p{
    grid-area:sub;
    position:relative;
    z-index:3;
  }

  .about2-right{
    grid-area:image;           
    position:relative;
    z-index:2;                 
    --img-h: clamp(260px, 58vw, 360px);
    min-height: var(--img-h);
    margin-top: calc(var(--about-gold-h, 180px) * -0.1);
    border-radius:16px;
  }
  .about2-slider{ border-radius:16px; }
  .about2-slider img{ border-radius:10px; }

  .about2-cards{
    grid-area:cards; 
    display:grid;
    grid-template-columns:1fr;
    gap:14px;
    margin-top:8px;
    position:relative;
    z-index:1;
    margin: 0 30px;
  }
  .about2-card{
    transform:none;
    min-height:unset;
    padding:30px 18px;
    border-radius:10px;
    box-shadow:0 12px 28px rgba(0,0,0,.12);
  }
}


/* ABOUT - Clientes  */
.about{
  position: relative;
  padding: 56px 0;
  background:#fff;
  overflow: hidden;
}

.about::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height: var(--about-gold-h, 180px);
  background: linear-gradient(180deg, var(--gold), #666);
  z-index: 0;
}

.about-grid{
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;  
  grid-template-areas: "left right";
  gap: 22px;
  align-items: stretch;
}

/* Colocar explícitamente cada bloque sin importar el orden del HTML */
.about-left  { grid-area: left; }
.about-right { grid-area: right; }

/* ===== Imagen / slider ===== */
.about-left{
  position: relative;
  min-height: clamp(260px, 42vw, 480px);
  border-radius: 18px;
  overflow: hidden;
}
.about-slider{
  position:absolute; 
  inset:0; 
  overflow:hidden; 
  border-radius:18px;
}
.about-slider .slide{ 
  position:absolute; 
  inset:0; 
  opacity:0; 
  transition:opacity .7s ease-in-out; }
.about-slider .slide.is-active{ 
  opacity:1; 
}
.about-slider img{
  position:absolute; 
  inset:0; 
  width:100%; 
  height:100%; 
  object-fit:cover; 
  border-radius:5px;
}

.about-title{ 
  margin:0 0 15px; 
  font-size:23px; 
  color:#fff; }
.about p{ 
  margin:.35rem 0 1rem; 
  color:#fff; 
  text-align:justify; 
  font-size:14px; 
}

.about-cards{ 
  display:grid; 
  grid-template-columns:1fr 1fr; 
  gap:16px; 
}
.about-card{
  background:#fff; 
  border:1px solid #eadfca; 
  padding:35px 45px;
  box-shadow:0 16px 36px rgba(0,0,0,.14); 
  min-height:250px; 
  transform:translateY(12%);
  border-radius:5px;
}
.about-card h3{ 
  margin:.1rem 0 .45rem; 
  font-size:18px; 
  text-align:center; 
}
.about-card p{ 
  margin:.35rem 0 0; 
  color:#111; 
  text-align:justify; 
  font-size:13px; 
}

/* ===== Responsive ===== */
@media (max-width: 979px){
  .about{
    padding-top:30px;
  }
  .about-grid{
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
      "title"   
      "sub"     
      "image"   
      "cards";  
    gap: 16px;
    align-items: start;
    position: relative;
  }

  .about-right{ display: contents; }

  .about-title{ 
    grid-area: title; 
    z-index: 3; 
    position: relative;
    margin:0;
  }
  .about-right > p{ 
    grid-area: sub; 
    z-index: 3; 
    position: relative;
  }

  .about-left{
    grid-area: image;
    position: relative;  
    z-index: 2;          
    --img-h: clamp(260px, 58vw, 360px);
    min-height: var(--img-h);
    margin-top: calc(var(--about-gold-h, 180px) * -0.1);
    border-radius: 16px;
  }
  .about-slider{ border-radius: 16px; }
  .about-slider img{ border-radius: 10px; }

  .about-cards{
    grid-area: cards;
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    margin-top: 8px;
    position: relative;
    z-index: 1;
    margin: 0px 30px;
  }
  .about-card{
    transform: none;       /* quita el “salto” de desktop */
    min-height: unset;
    padding: 30px 18px;
    border-radius: 10px;
    box-shadow: 0 12px 28px rgba(0,0,0,.12);
  }
}



/*  VALORES  */
.values{
  padding: clamp(48px,6vw,80px) 0 12px;
  padding: 20px 0px 40px 0;
  background-color: #eaeaea4f;
}
.values .container{
    display:grid;
    grid-template-columns: 0.4fr 1.6fr;
    align-items:center;
  }

.values-title{
  text-align:center;
  margin-top: 30px;
  font-size:27px;
  color:black;
  text-shadow:0 1px 0 rgba(0,0,0,.12);
}
.values-p{
  text-align:center;
  margin: 20px 320px;
  color:black;
  letter-spacing:.3px;
  font-size: 14px;
}

.values-list{
  display:flex;
  flex-direction:column;
  gap:35px;
  background: #666;
  padding: 20px;
}

.value-row{
  width: 850px;
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:center;
  padding:10px 25px;
  border-radius:14px;
  background: white;
  border:1px solid #efe7d4;
  color:black;
  margin-left:10px;
}
.value-text h3{
  margin:0 0 4px;
  font-size:1.05rem;
  text-align: left;
  margin-left:20px;
}
.value-text p{
  margin:0;
  max-width:720px;
  text-align: justify;
  font-size: 13px;
  margin-left:20px;
}

/* Círculos  */
.value-circle{
  display:flex;
  align-items: center;   
  justify-content: space-around;
  flex-wrap: wrap;
  gap:38px;
  padding: 0;
  margin-left: auto;
  background: #4b4a4a;
  padding:40px 20px;  
}

.value-donut{
  width: 110px;
  aspect-ratio: 1 / 1;
  border-radius: 20px;
  background: var(--gold);
  position:relative;
  margin: 0;
  border: 2px solid var(--gold-soft);
  box-shadow:0 10px 16px var(--gold);
}
.value-letter{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  font-weight:600;
  font-size: 35px;
  line-height:1;
  color:white;
}

/* VALORES */
@media (max-width:979px){
  .values{
    background:#666;
    overflow:hidden;
  }

  .values .container{
    display:grid;
    grid-template-columns:1fr;
    align-items:start;
    padding:0 12px 16px;
    box-sizing:border-box;
    max-width:100vw;
  }

  .values-title{ color:#fff; }
  .values-p{
    text-align:justify;
    margin:10px 10px 14px;
    color:#fff;
    letter-spacing:.1px;
    font-weight:500;
    font-size:13px;
    padding:0 4px;
  }

  .values .values-list{
    width:100%;
    padding:12px 12px 24px;
    box-sizing:border-box;
    background:#666;
    display:flex;
    flex-direction:column;
    gap:25px;
  }
  .values .values-list .value-row > svg{
    display:none !important;
  }

  .values .values-list .value-row{
    width:100%;
    box-sizing:border-box;
    margin:0;
    padding:25px 30px 2px;
    display:grid;
    grid-template-columns:1fr; 
    align-items:start;
    gap:8px;
    border:1px solid #efe7d4;
    border-radius:14px;
    background:#fff;
    overflow:hidden;
    cursor:pointer;
    position:relative;
  }

  .values .values-list .value-row .value-text{ min-width:0; }

/* Contenedor del título */
.values .values-list .value-row .value-text h3{
  position: relative;          /* crea contexto para el absoluto */
  margin: 0;
  font-size: 15px;
  line-height: 1.3;
  color: #111;
  padding-left: calc(42px + 2px + 2px + 8px - 12px); /* = 48px */
  z-index: 0;                  /* opcional: base */
}

/* Badge absoluto */
.values .values-list .value-row .value-text h3 .value-initial{
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-54%);
  width: 42px; height: 42px;
  border-radius: 50%;
  display: grid; place-items: center;
  font: 700 18px/1 system-ui, sans-serif;
  color: black;
  background: var(--gold,#D8B880);
  outline: 2px solid var(--gold,#D8B880);
  outline-offset: 2px;
  pointer-events: none;  
  z-index: 1;  
}

.values .values-list .value-row .value-text h3 .value-title-rest{
  position: relative;
  z-index: 2;
  font-size: 16px;
}


  /* Descripción colapsable */
  .values .values-list .value-row .value-text p{
    margin:10px 18px;                     /* limpio */
    grid-column:1 / -1;
    max-height:0;
    opacity:0;
    overflow:hidden;
    transition:max-height .35s ease, opacity .25s ease;
    font-size:13px;
    text-align:justify;
  }
  .values .values-list .value-row.is-open .value-text p{
    opacity:1;
  }

  /* Indicador + / – */
  .values .values-list .value-row::after{
    content:"+";
    position:absolute;
    right:12px;
    top:12px;
    font-weight:800;
    font-size:18px;
    color:#222;
  }
  .values .values-list .value-row.is-open::after{
    content:"–";
  }

  /* Oculta el carrusel de donuts grande */
  .values .value-circle{ display:none !important; }
}


/*  CÓMO TRABAJAMOS */
.stairs{
  padding:0px 0;
  background:#fff;
}
.stairs-title{
  text-align:center;
  margin-top:50px;
  font-size:27px;
  color:#000;
  text-shadow:0 1px 0 rgba(0,0,0,.12);
}
.stairs p{
  text-align:center;
  color:#000;
  letter-spacing:.3px;
  font-size:14px;
}
.stairs-wrap{
  position:relative;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  align-items:end;
  gap:18px;
  min-height:500px;
}
@media (max-width:900px){
  .stairs-wrap{ grid-template-columns:1fr; min-height:unset; gap:40px; }
}
/* ===== Step / Card ===== */
.step{
  display:flex;
  align-items:flex-end;
}

/* La card sostiene la imagen de fondo y el overlay */
.step-card{
  position:relative;
  width:100%;
  border-radius:18px;
  padding:22px 18px 24px;
  box-shadow:0 16px 36px rgba(0,0,0,.12);
  display:flex;
  flex-direction:column;
  justify-content:flex-end;     /* empuja contenido abajo */
  align-items:flex-start;
  min-height:340px;
  overflow:hidden;              /* para el overlay */
  transition: transform .3s ease, box-shadow .3s ease;
  outline:none;                 /* mejoraremos focus abajo */
  border:2px solid gray;
}

/* Efecto sutil al activar */
.step-card:hover,
.step-card:focus-within{
  transform: translateY(-2px);
  box-shadow:0 18px 40px rgba(0,0,0,.16);
}

.step-1 .step-card{
  background: url(../Img/Nosotros/Step1.png) center/cover no-repeat;
  border-radius:18px;
}
.step-2 .step-card{
  transform:translateY(-20px);
  background: url(../Img/Nosotros/Step2.png) center/cover no-repeat;
  border-radius:18px;
}
.step-3 .step-card{
  transform:translateY(-40px);
  background: url(../Img/Nosotros/Step3.png) center/cover no-repeat;
  border-radius:18px;
}
.step-4 .step-card{
  transform:translateY(-60px);
  background: url(../Img/Nosotros/Step4.png) center/cover no-repeat;
  border-radius:18px;
}

/* ===== Overlay para legibilidad (aparece más al hover/focus) ===== */
.step-card::before{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(to top, rgba(0,0,0,.50) 0%, rgba(0,0,0,.15) 45%, rgba(0,0,0,0) 100%);
  opacity:.55;
  transition: opacity .3s ease;
}
.step-card:hover::before,
.step-card:focus-within::before{
  background: linear-gradient(to top,
    rgba(0,0,0,.88) 0%,
    rgba(0,0,0,.72) 50%,
    rgba(0,0,0,.40) 75%,
    rgba(0,0,0,0) 100%
  );
  opacity:.95;
}

/* Títulos siempre visibles, párrafos colapsados */
.step h3{
  position:relative;
  z-index:1;
  margin:.5rem 0 .35rem;
  font-size:1rem;
  color:#fff;                 /* sobre imagen */
  text-align:left;
  text-shadow:0 1px 2px rgba(0,0,0,.45);
}

/* El párrafo por defecto: oculto/colapsado */
.step-card p{
  position:relative;
  z-index:1;
  margin:0;
  color:#fff;
  font-size: 13px;
  max-width: 62ch;
  text-align: justify;
  opacity:0;
  max-height:0;
  overflow:hidden;
  transform: translateY(6px);
  transition: opacity .28s ease, max-height .28s ease, transform .28s ease;
}

/* Mostrar al hover (desktop) y focus-within (móvil/teclado) */
.step-card:hover p,
.step-card:focus-within p{
  opacity:1;
  max-height:240px;          /* suficiente para tu copy */
  transform: translateY(0);
}

/* Accesibilidad foco visible si haces foco con teclado en la card */
.step-card:focus-visible{
  outline: 2px solid rgba(255,255,255,.85);
  outline-offset: 2px;
  border-radius:18px;
}

/* Texto general dentro de .stairs*/
.stairs > .container > p{
  color:#222;
  text-align:center;
}
.step-num{ display:none; }

/*ELEMENTOS CONCEPTUALES*/

.concepts{
  padding:26px 0 30px;
  background-color: #eaeaea4f;
}

.concepts .container{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  justify-content: center;
}
.concepts-title{
  text-align:center;
  margin-top: 30px;
  font-size:27px;
  color:black;
  text-shadow:0 1px 0 rgba(0,0,0,.12);
}
.concepts .sub{
  text-align:center;
  margin: 20px 20px;
  color:black;
  letter-spacing:.3px;
  font-size: 14px;
}
.concept-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px
}
@media (max-width:1024px){
  .concept-grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:720px){
  .concept-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:460px){.concept-grid{grid-template-columns:1fr}}
.concept{
  border:1px solid #ece5d3;
  border-radius:18px;
  background:#fff;
  overflow:hidden;
  box-shadow:0 12px 28px rgba(0,0,0,.08);
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  margin: 0 15px 30px;  
}
.concept.hero{
  max-width: clamp(320px, 54vw, 560px); 
  margin: 0 15px 30px;                   
  padding: 30px;
  background: #fff;
  border: 1px solid #efe7d4;
  border-radius: 16px;
  box-shadow: 0 12px 28px rgba(0,0,0,.08);
  text-align: center;
}

/* Imagen del tablero: centrada y contenida */
.concept.hero img{
  display:block;
  width: clamp(300px, 38vw, 400px);
  aspect-ratio: 3 / 2;           /* mantiene el “cuadro” */
  object-fit: contain;           /* no recorta el tablero */
  margin: 30px;
}
@media (max-width: 680px){
  .concept.hero img{
    margin: 0 0 10px;
  }
}


.concept:hover{
  transform:translateY(-3px);
  box-shadow:0 18px 44px rgba(0,0,0,.16);
  border-color:#e2d4b3
}
.concept img{
  width:100%;
  aspect-ratio:4/4;
  object-fit:cover;
  margin-bottom: 15px;
}
.concept h3{
  margin:0 0 4px;
  font-size:1.02rem;
  color:#111;
  position:relative;
  padding-bottom:6px
}
.concept h3::after{
  content:"";
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom:0;
  width:38px;
  height:3px;
  border-radius:3px;
  background:linear-gradient(90deg,#111,var(--gold));
  opacity:.25
}
.concept p{
  margin:8px 14px 16px;
  color:#2b2b2b;
  font-size:13px;
  text-align: justify;
}

/*  IMAGOTYPE */
.imagotype{
  padding:10px 0 28px;
  border-top:1px dashed rgba(0,0,0,.08);
  background:#fff;
}
.imagotype-title{
  text-align:center;
  margin-top:30px;
  font-size:27px;
  color:#000;
  text-shadow:0 1px 0 rgba(0,0,0,.12);
}
.imagotype .sub{
  margin:0 auto 12px;
  max-width:860px;
  text-align:center;
  color:#333;
}
/* Tres cuadritos iguales en una fila, con borde */
.reason{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin: 20px 180px;
}

.reason p{
  margin: 0;    
  padding: 20px;              
  min-height: 120px;               
  display: flex;           
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--gold);
  border: 2px solid var(--gold-soft);  
  border-radius: 12px;   
  box-shadow: 0 6px 14px var(--gold-soft);
  color: #111;
  line-height: 1.4;
}

.reason p:hover{
  box-shadow: 0 10px 22px var(--gold);
}

/* Responsive: apilar en pantallas pequeñas */
@media (max-width: 680px){
  .reason{
    grid-template-columns: 1fr;
    margin: 20px 30px;
  }
  .reason p{
    min-height: 96px;
  }
}



/* Contenedor en FLEX (wrap) con separación más corta */
.imago-grid{
  display:flex;
  flex-wrap: wrap;                 /* ✅ permite múltiples filas */
  gap:5px;                        /* ✅ más juntos */
  margin-top:6px;
  align-items: center;             /* centra operadores con imágenes */
  justify-content: center;         /* centra el conjunto */
}

/* Tarjeta base: tamaño fijo para uniformidad */
.imago{
  width:160px;                     /* ✅ “casi 150x150” para el cuadro de imagen */
  border:1px solid var(--line);
  border-radius:50%;
  background:#fff;
  overflow:hidden;
  box-shadow:0 10px 14px gray;
  transition:transform .15s ease, box-shadow .15s ease;
  display:flex;
  flex-direction:column;
  border:2px solid gray;
}
.imago:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 36px rgba(0,0,0,.12);
}

/* Imagen consistente: exactamente 150x150 dentro de la tarjeta */
.imago img{
  width:100%;
  height:150px;                    /* ✅ altura fija */
  object-fit: contain;             /* sin deformar */
  background:#fff;
  padding:8px;                     /* más juntos que antes (12px) */
}


/* Operadores como “recuadrito” de 50x50 y pegados al conjunto */
.imago.op{
  all:unset;
  display:flex;                    /* ✅ flex (no grid) */
  align-items:center;
  justify-content:center;
  width:50px;                      /* ✅ 50x50 */
  height:50px;
  border:2px solid var(--gold);
  border-radius:12px;
  background:#fff;
  box-shadow:0 6px 16px rgba(0,0,0,.08);
  font-weight:900;
  font-size:clamp(12px,1.4vw,16px);
  color:#111;
  line-height:1;
}

/* Variante destacada */
.imago.strong{
  border:2px solid var(--gold-strong);
  box-shadow:0 10px 14px var(--gold);
}

/* Responsive: una sola columna, todo hacia abajo */
@media (max-width: 768px){
  .imago-grid{
    flex-direction: column;        /* ✅ columna */
    align-items: center;           /* centra cada item */
    gap:10px;
  }
  .imago{
    width: 160px;                  /* un poco más grande en móvil si quieres */
  }
  .imago img{
    height:150px;                  /* mantiene 150x150 */
  }
}



/* ====== Footer ====== */
.site-footer{ 
  margin-top:15px; 
  border-top:1px solid #111; 
  background:#000; 
  color:#fff 
}
.footer-grid{
  display:grid; 
  grid-template-columns:repeat(4, minmax(0,1fr)); /* 4 columnas iguales y proporcionadas */
  gap:150px; 
  padding:22px 0; 
  align-items:start; 
  justify-items:center; 
  text-align:left; 
  width:100%;
}
@media (max-width:979px){
  .footer-grid{
    grid-template-columns:1fr; 
    justify-items:center; 
    text-align:center;
    gap:28px; 
  }
}

.f-col{ 
  display:flex; 
  flex-direction:column;
  align-items: center; 
  justify-content: center;
  gap:.8rem 
}
@media (max-width:979px){
  .f-col{ align-items:center }
}

.f-invert{ 
  filter:brightness(0) invert(1) 
}
.f-brand .isotipo{ 
  display:none 
}
.f-brand .logo{ 
  margin-top: 10px;
  margin-bottom:10px; 
  height:45px 
}
.f-social{ 
  display:flex; 
  gap:.7rem; 
  justify-content:flex-start; 
  align-items:center 
}
.f-social .sbtn:hover{
  color:gray;                  
  transform: translateY(-1px);
  outline: none;
}
@media (max-width:979px){ .f-social{ justify-content:center } }
.sbtn{
  display:inline-flex; 
  align-items:center; 
  justify-content:center; 
  min-width:36px; 
  height:36px; 
  padding:0 .6rem;
  border:1px solid var(--line); 
  border-radius:10px; 
  color:#1f2937; 
  text-decoration:none; 
  background:#fff
}

.f-links h5,.f-cta h5,.f-info h5{ 
  margin:.2rem 0 .4rem; 
  font-size:1rem; 
  color:#fff 
}
.f-links ul{ 
  list-style:none; 
  margin:0; 
  padding:0 
}
.f-links ul.cols-2{ 
  columns:2; 
  column-gap:28px 
}
.f-links ul.left{ 
  text-align:left 
}
.f-links li{ 
  break-inside:avoid; 
  margin-bottom:.35rem;
  font-weight: 500; 
}
.f-links a{ 
  color:#eee; 
  text-decoration:none; 
  opacity:.9 
}
.f-links a:hover{ 
  font-weight: 700;
}
.f-cta .schedule{ 
  font-weight:600; 
  margin-bottom:0; 
  color:#e5e7eb 
}

/* Nueva columna de info con íconos */
.f-info-list{ 
  list-style:none; 
  margin:0; 
  padding:0; 
  display:flex; 
  flex-direction:column; 
  gap:.6rem;
  font-weight: 500;
}
.fi-item{ 
  display:flex; 
  align-items:flex-start; 
  gap:.6rem 
}
@media (max-width:979px){ .fi-item{ 
  justify-content:left;
  padding: 0 35px; 
  text-align: justify;
} 
}
.fi-icon{ 
  display:inline-grid; 
  place-items:center; 
  width:28px; 
  height:28px; 
  border-radius:8px; 
  background:rgba(216,184,128,.12); 
  border:1px solid rgba(216,184,128,.35) 
}
.fi-icon.ubi{
  padding: 0 6px 0 4px;
}

.svg-gold{ 
  fill:var(--gold);
}
.fi-text{ 
  display:flex; 
  flex-direction:column; 
  gap:2px 
}
.fi-label{ 
  font-weight:700; 
  color:#fff 
}
.fi-value{ 
  color:#e7e7e7; 
  text-decoration:none 
}
.fi-value:hover{ 
  font-weight: 600;
}

/* Botón del footer */
.btn-footer{
  background:#fff; 
  color:#111; 
  border:1px solid #111; 
  padding:.55rem 1rem; 
  border-radius:12px; 
  font-weight:800;
  text-decoration: none;
}
.btn-footer:hover{ 
  color:black;
  font-size: 15px;
  background: var(--gold);
}

/* Franja inferior DORADA*/
.copy{
  display:flex; 
  justify-content:center; 
  align-items:center;
  border-top:1px solid var(--line); 
  padding:12px; 
  background:var(--gold); 
  color:black; 
  font-weight:600; 
  letter-spacing:.3px;
}

/* Footer — responsive extras */
@media (max-width:979px){
  .f-brand .logo{display:none}
  .f-brand .isotipo{display:block;height:40px}
  .f-links h5,.f-cta h5,.f-info h5{font-size:.95rem}
  .copy{
    font-size:.85rem;
    text-align: center;
  }
}


/*  WhatsApp flotante  */
.whatsapp-float{
  position:fixed; 
  right:16px; 
  bottom:16px;
  width:56px; 
  height:56px; 
  display:grid; 
  place-items:center;
  border-radius:50%; 
  text-decoration:none; 
  z-index:1000;
  background: white; 
}
.whatsapp-float:hover{ 
  background-color:black
}

/* ===== Títulos centrados con subrayado dorado ===== */
.h-underline-gold{
  position: relative;
  display: inline-block;      /* se ajusta al texto */
}

.h-underline-gold::after{
  content:"";
  position:absolute;
  left:50%;                   /* CENTRADO */
  bottom:-8px;
  width:120px;
  height:4px;
  border-radius:999px;
  background:linear-gradient(90deg, var(--gold), var(--gold-strong));
  opacity:0;
  transform: translateX(-50%) scaleX(.7);  /* arranca corto y centrado */
  transform-origin:center;                 /* crece desde el centro */
  transition: opacity .18s ease, transform .22s cubic-bezier(.22,.8,.22,1);
}

/* Reveal súper rápido */
.reveal{
  opacity:0;
  transform: translateY(6px);
  transition: opacity .22s cubic-bezier(.22,.8,.22,1),
              transform .22s cubic-bezier(.22,.8,.22,1);
}
.reveal.is-in{
  opacity:1;
  transform:none;
}
.reveal.is-in.h-underline-gold::after{
  opacity:1;
  transform: translateX(-50%) scaleX(1);
}

/* Asegura el texto del h2 centrado */
.values-title,
.stairs-title,
.concepts-title,
.imagotype-title,
.about-title,
.about2-title{
  text-align:center;
}

/* Accesibilidad: sin movimiento si el usuario lo pide */
@media (prefers-reduced-motion: reduce){
  .reveal{ transition:none; opacity:1; transform:none; }
  .h-underline-gold::after{ opacity:1; transform:translateX(-50%); }
}