/* =============================
   Fuentes
   ============================= */
/* IBM Plex Sans */
@import url('https://fonts.googleapis.com/css?family=IBM+Plex+Sans:400,700&display=swap');
/* Open Sauce One */
@import url('https://fonts.googleapis.com/css2?family=Open+Sauce+One:wght@400;600;700;800;900&display=swap');
/* TT Wellingtons */
@import url('https://fonts.googleapis.com/css2?family=TT+Wellingtons:wght@600;700;800;900&display=swap');


/* =============================
   Variables de tema / layout
   ============================= */
:root{
  --brand:#ff5a2a;
  --ink:#111318;
  --txt:#ffffff;
  --muted:#5b5f6a;
  --card:#f6f7f9;

  /* ancho compartido “Nuestro Estudio” / “Equipo” */
  --container-max:1100px;     /* base */
  --gutter:24px;
  --container-pad:24px;       /* usado en full-bleed */
}

/* +15% SOLO en desktop (1265px) */
@media (min-width:1025px){
  :root{ --container-max:1265px; }
}


/* =============================
   Reset básico
   ============================= */
html, body{
  margin:0; padding:0; width:100%; height:100%;
  overflow-x:hidden; scroll-behavior:smooth;
  font-family:'Open Sauce One', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, sans-serif;
}
section{ margin:0; padding:0; }


/* =============================
   Navbar
   ============================= */
.navbar{
  position:fixed; top:0; left:0; width:100%;
  z-index:1000; padding:10px 20px;
  background:rgba(0,0,0,.8);
  border-bottom:1px solid rgba(255,255,255,.2);
  box-sizing:border-box;
}
.navbar ul{
  list-style:none; margin:0; padding:0;
  display:flex; justify-content:flex-end; width:100%;
}
.navbar ul li a{
  text-decoration:none; padding:10px 15px;
  color:rgba(255,255,255,.8); font-weight:400; font-size:.9rem;
  transition:color .3s ease;
}
.navbar ul li a:hover{ color:#fff; }

/* Ocultar checkbox hamburguesa en desktop */
@media (min-width:769px){
  .navbar input[type="checkbox"],
  .menu-icon{ display:none; }
}


/* =============================
   Portada (HERO) — compatible con video o slider
   ============================= */
.hero{
  position:relative;
  height:100svh;             /* ocupa el alto visible */
  min-height:560px;
  overflow:hidden;
  color:var(--txt);
}

/* fondo de vídeo (opcional) */
.hero video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; z-index:-2; transform:scale(1.02);
}

/* contenedor del slider (opcional) */
.hero-bg{
  position:absolute; inset:0;
  z-index:-2;
  overflow:hidden;
}

/* cada slide del slider */
.hero-slide{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  opacity:0; transition:opacity 1.2s ease; will-change:opacity;
  transform:scale(1.02);
}
.hero-slide.is-active{ opacity:1; }

/* ====== HERO en B/N ====== */
.hero .hero-bg .hero-slide{
  filter: grayscale(100%);
  transition: opacity .8s ease, filter .3s ease;
}

/* overlay degradado sobre el fondo (común a vídeo/slider) */
.hero .overlay{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.35));
  z-index:-1;
}

/* triángulo naranja por encima del fondo y debajo del contenido */
.hero::before{
  content:"";
  position:absolute;
  left:-20vw; top:-20vh;
  width:75vw; height:75vh;
  background:var(--brand);
  transform:skewY(-18deg) translateY(-15%);
  box-shadow:0 10px 40px rgba(0,0,0,.25);
  z-index:0;                 /* por encima de overlay/video/slider, bajo el texto */
  pointer-events:none;
}

/* contenido del hero */
.hero-content{
  position:relative; z-index:1;  /* encima del triángulo */
  height:100%;
  display:flex; flex-direction:column; justify-content:center; gap:22px;
  max-width:var(--container-max); margin:0 auto; padding:0 var(--gutter);
}
.hero h1{ font-size:clamp(2.2rem, 4.2vw, 4rem); line-height:1.05; font-weight:800; }
.hero .sub{ font-size:clamp(1.05rem, 1.8vw, 1.25rem); max-width:52ch; opacity:.95; }
.cta-group{ display:flex; gap:14px; flex-wrap:wrap; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:14px 22px; border-radius:30px; font-weight:700; text-decoration:none; transition:.18s ease;
}
.btn-primary{ background:linear-gradient(135deg,#ff6a3a,#ff8c4f); color:#fff; box-shadow:0 8px 22px rgba(255,106,58,.28); }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 12px 28px rgba(255,106,58,.35); }
.btn-ghost{ border:2px solid rgba(255,255,255,.65); color:#fff; background:transparent; }
.btn-ghost:hover{ background:rgba(255,255,255,.08); transform:translateY(-2px); }

/* respeta preferencias del usuario */
@media (prefers-reduced-motion: reduce){
  .hero-slide{ transition:none; }
}


/* =============================
   Contenedor 2: Cumplimiento Normativo (imagen fade-in)
   ============================= */
#contenedor-dos{
  min-height:600px; display:flex; align-items:center; justify-content:center;
  position:relative; width:100%;
}
#contenedor-dos img{ width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity 2s ease-in-out; }
#contenedor-dos img.visible{ opacity:1; }


/* =============================
   Nuestro Estudio (ns-solid)
   ============================= */
#nuestro-estudio.ns-solid{
  --ink:#000;
  background:var(--brand); color:var(--ink);
  padding:clamp(72px, 8vw, 96px) 20px; text-align:center; position:relative; overflow:hidden;
}
#nuestro-estudio .ns-center{
  max-width:var(--container-max); margin-inline:auto; padding-inline:var(--gutter);
  display:grid; gap:12px; justify-items:center;
}
#nuestro-estudio .ns-kicker{
  display:inline-flex; align-items:center; white-space:nowrap; width:auto; max-width:max-content;
  color:#000; font-weight:900; text-transform:uppercase; letter-spacing:.05em;
  font-size:clamp(.78rem,1.2vw,.9rem); line-height:1; padding:6px 10px; background:#fff;
  border:1px solid rgba(0,0,0,.14); border-radius:999px; box-shadow:0 2px 6px rgba(0,0,0,.08);
}
#nuestro-estudio h2{
  margin:4px 0 6px; font-size:clamp(1.8rem,3.2vw,2.6rem); line-height:1.15; font-weight:900; color:var(--ink);
}
#nuestro-estudio .ns-lead{ color:var(--ink); font-size:clamp(1rem,1.4vw,1.1rem); line-height:1.7; max-width:75ch; }
@media (min-width:1025px){
  #nuestro-estudio .ns-lead{ max-width:95ch; }
}
#ns-rotator{ transition:opacity .12s ease, transform .12s ease; }
#ns-rotator.is-out{ opacity:0; transform:translateY(4px); }
#nuestro-estudio .ns-chips{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:8px; }
#nuestro-estudio .chip{
  background:#fff; color:#000; border:1px solid rgba(0,0,0,.15);
  border-radius:999px; padding:10px 14px; font-weight:800; letter-spacing:.01em;
  font-size:clamp(.9rem, 1.2vw, 1rem);
}

/* full-bleed + altura de toda la ventana */
#nuestro-estudio{
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  min-height:100svh;
  display:grid;
  place-items:center;
  box-sizing:border-box;
}

/* quitar outlines/bordes forzados (solo aquí) */
#nuestro-estudio,
#nuestro-estudio .ns-center,
#nuestro-estudio .ns-center:focus,
#nuestro-estudio .ns-center:focus-visible,
#nuestro-estudio .ns-center:focus-within,
#nuestro-estudio:target,
#equipo,
#equipo:target,
#equipo:focus,
#equipo:focus-visible,
#equipo:focus-within{
  outline:none !important;
  border:0 !important;
  box-shadow:none !important;
}
#nuestro-estudio a:focus-visible,
#equipo a:focus-visible,
.team-nav:focus-visible{
  outline:3px solid color-mix(in srgb, var(--brand, #ff5a2a) 55%, #fff);
  outline-offset:2px;
}


/* =============================
   Equipo — Carrusel moderno
   ============================= */
.team-section{ padding:72px 20px; background:#f9fafb; }
.team-section h2{
  text-align:center; margin:0 auto 28px; font-size:clamp(1.9rem,3.2vw,2.4rem); color:#111318;
  max-width:var(--container-max); padding:0 var(--gutter);
}
/* Título “Nuestro Equipo” con logo en una línea */
.team-title{
  display:flex; align-items:center; justify-content:center; gap:15px;
  margin:0 auto 30px; font-size:clamp(2rem,3.5vw,2.6rem);
}
.team-title img{
  height: clamp(64px, 12vw, 180px);
  width:auto; object-fit:contain; display:block;
}

.team-shell{ max-width:var(--container-max); margin:0 auto; position:relative; padding:0 var(--gutter); box-sizing:content-box; }
.team-viewport{
  position:relative; overflow:hidden; border-radius:18px;
  background:linear-gradient(180deg,#fff,#fafafa);
  border:1px solid #eceff3; padding:18px 0 46px;
}
.team-viewport::before,
.team-viewport::after{
  content:""; position:absolute; top:0; bottom:46px; width:clamp(24px,3vw,40px); z-index:2; pointer-events:none;
}
.team-viewport::before{ left:0; background:linear-gradient(90deg,#fff,rgba(255,255,255,0)); }
.team-viewport::after{ right:0; background:linear-gradient(270deg,#fff,rgba(255,255,255,0)); }
.team-track{
  display:flex; gap:clamp(16px,2vw,32px);
  padding:8px clamp(16px,3vw,40px) 0;
  will-change:transform; scroll-snap-type:x mandatory; overflow:auto; scrollbar-width:none; perspective:1000px;
}
.team-track::-webkit-scrollbar{ display:none; }
.team-card{
  scroll-snap-align:center;
  flex:0 0 clamp(240px,28vw,320px);
  max-width:340px; background:#fff; border:1px solid #eceff3; border-radius:16px;
  box-shadow:0 8px 24px rgba(17,19,24,.06);
  transform-origin:center center; transition:transform .35s ease, box-shadow .35s ease, filter .35s ease, opacity .35s ease;
  opacity:.9; filter:saturate(.92) blur(.2px);
}
@media (min-width:1200px){ .team-card{ flex-basis:clamp(260px,22vw,300px); } }
@media (min-width:1600px){ .team-card{ flex-basis:280px; } }
.team-card img{ width:100%; height:auto; display:block; border-top-left-radius:16px; border-top-right-radius:16px; }
.team-body{ padding:16px 16px 18px; text-align:center; }
.team-body h3{ margin:8px 0 6px; font-size:1.05rem; font-weight:900; color:#111318; }
.team-body p{ margin:0 0 10px; color:#5b5f6a; font-size:.96rem; line-height:1.55; }
.team-body a{ font-weight:700; text-decoration:none; color:#111318; border-bottom:2px solid var(--brand); }
.team-card.is-active{ transform:translateZ(0) scale(1.03); box-shadow:0 16px 40px rgba(17,19,24,.12); opacity:1; filter:none; }

/* === EQUIPO: B/N por defecto y a color en hover === */
.team-card img{
  filter: grayscale(100%) contrast(1.02) saturate(.98);
  transition: filter .35s ease;
}
.team-card:hover img,
.team-card:focus-within img{
  filter: none;
}

.team-nav{
  position:absolute; top:45%; transform:translateY(-50%);
  width:42px; height:42px; border-radius:999px; border:1px solid #e8e9ee;
  background:#fff; color:#111; font-size:22px; display:grid; place-items:center; cursor:pointer; z-index:3;
  box-shadow:0 6px 16px rgba(0,0,0,.08); transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.team-nav:hover{ transform:translateY(-50%) scale(1.05); box-shadow:0 10px 24px rgba(0,0,0,.12); }
.team-nav:active{ transform:translateY(-50%) scale(.98); }
.team-nav.prev{ left:8px; } .team-nav.next{ right:8px; }
@media (max-width:720px){ .team-nav{ display:none; } }
.team-dots{ position:absolute; left:0; right:0; bottom:8px; display:flex; justify-content:center; gap:8px; z-index:3; }
.team-dots .dot{ width:8px; height:8px; border-radius:999px; border:1px solid rgba(0,0,0,.25); background:#fff; cursor:pointer; transition:transform .18s ease, background .18s ease, border-color .18s ease; }
.team-dots .dot.is-active{ background:var(--brand); border-color:var(--brand); transform:scale(1.15); }
.team-progress{ position:absolute; left:24px; right:24px; bottom:0; height:4px; background:#ededf0; border-radius:999px; overflow:hidden; }
.team-progress > span{ display:block; height:100%; width:0%; background:linear-gradient(90deg,#ff6a3a,#ff8c4f); transition:width .2s linear; }


/* =============================
   Servicios (paleta y tarjetas como “Equipo”)
   ============================= */

/* fondo, paddings y título */
#servicios{ position:relative; padding: clamp(72px, 7vw, 96px) 20px; background:#374651; }
#servicios h2{ text-align:center; margin-bottom:24px; font-size:clamp(1.8rem,3vw,2.2rem); color:#fff; }

/* slider base (si lo sigues usando) */
.slider-container{ position:relative; overflow:hidden; width:100%; z-index:1; }
.slider{ display:flex; transition:transform .5s ease; flex-wrap:nowrap; justify-content:space-between; }

/* tarjeta del slider con estética “Equipo” */
#servicios .slider-item{ background:transparent; box-shadow:none; flex:0 0 auto; width:408px; height:436px; margin-right:20px; margin-bottom:20px; display:flex; }
#servicios .slider-item .card{
  background:#fff; border:1px solid #eceff3; border-radius:16px;
  box-shadow:0 8px 24px rgba(17,19,24,.12);
  display:flex; flex-direction:column; justify-content:flex-start; padding:20px; box-sizing:border-box; width:100%;
}
#servicios .slider-item .card img{
  width:100%; height:50%; object-fit:cover;
  border-top-left-radius:16px; border-top-right-radius:16px;
}
#servicios .slider-item .card .card-text{
  padding:10px; color:#111318; text-align:center; font-size:.9rem; line-height:1.5;
}
#servicios .slider-item .card .card-text h3{ font-size:1rem; margin-bottom:10px; font-weight:900; color:#111318; }
#servicios .slider-item .card .card-text p{ color:#5b5f6a; font-size:.85rem; line-height:1.45; margin-bottom:0; }

/* oculta CTAs/botones si existieran dentro de la tarjeta */
#servicios .slider-item .card .btn,
#servicios .slider-item .card .cta,
#servicios .slider-item .card a.btn{ display:none !important; }

/* flechas visibles solo en #servicios */
.slider-nav{ display:none !important; }
#servicios .slider-nav{
  display:inline-flex !important; position:absolute; top:50%; transform:translateY(-50%);
  background:transparent; border:0; color:var(--brand); font-size:28px; line-height:1; z-index:2; cursor:pointer;
}
#servicios #prev{ left:12px; } #servicios #next{ right:12px; }

/* nunca mostrar flechas en Equipo */
.team-section .slider-nav{ display:none !important; }


/* =============================
   Contenedores 4/5/6/7/8 (resto del layout)
   ============================= */
#contenedor-cuatro{ height:auto; display:flex; flex-direction:column; padding:20px; background:#fff; min-height:600px; }
#contenedor-cuatro .top-section h2{
  font-family:'TT Wellingtons', sans-serif; font-size:2.5rem; font-weight:700; text-align:left; color:#000; margin-bottom:15px;
}
#contenedor-cuatro .top-section p{
  font-family:'Open Sauce One', sans-serif; font-size:1rem; text-align:left; color:#000; margin-bottom:20px;
}
#contenedor-cuatro .bottom-section{ display:flex; gap:0; }
#contenedor-cuatro .left-half, #contenedor-cuatro .right-half{
  flex:1; display:flex; flex-direction:column; justify-content:center; align-items:center; padding:30px; box-sizing:border-box; text-align:center;
}
#contenedor-cuatro .left-half{ background:#FF7043; color:#fff; }
#contenedor-cuatro .right-half{ background:#FFD5B5; color:#000; }
#contenedor-cuatro .icon{ width:80px; margin-bottom:15px; }
#contenedor-cuatro .left-half h3, #contenedor-cuatro .right-half h3{ font-family:'TT Wellingtons', sans-serif; font-size:1.5rem; margin-bottom:10px; }
#contenedor-cuatro .left-half p, #contenedor-cuatro .right-half p{ font-family:'IBM Plex Sans', sans-serif; font-size:1rem; line-height:1.5; }
@media (max-width:768px){
  #contenedor-cuatro .bottom-section{ flex-direction:column; }
  #contenedor-cuatro .left-half, #contenedor-cuatro .right-half{ padding:20px; }
}

#contenedor-cinco{
  height:600px; background:#FF7043; display:flex; justify-content:center; align-items:center;
  padding:40px 20px; box-sizing:border-box;
}
#contenedor-cinco .content{
  display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:20px;
  max-width:var(--container-max); width:100%;
}
.image-section{ flex:1; display:flex; justify-content:flex-end; }
.image-concepcion{ width:100%; border-radius:15px; box-shadow:0 4px 8px rgba(0,0,0,.2); }
.text-section{ flex:1; max-width:500px; text-align:left; margin-right:20px; }
.text-section h2{ font-family:'TT Wellingtons', sans-serif; font-size:2.5rem; font-weight:700; margin:0; color:#000; }
.text-section p{ font-family:'IBM Plex Sans', sans-serif; font-size:1rem; line-height:1.5; margin-top:20px; }
.logo-img{ width:150px; margin-bottom:20px; }

#contenedor-seis{
  background:#FF7043; padding:40px 20px; display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:600px; position:relative;
}
#contenedor-seis .background-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-1; }
#contenedor-seis h2{ font-family:'TT Wellingtons', sans-serif; font-size:2rem; color:#fff; margin-bottom:20px; position:relative; z-index:1; }
#contenedor-seis h2::before{
  content:''; position:absolute; top:-80px; left:50%; transform:translateX(-50%);
  width:200px; height:200px; background-image:url('transparencia.png'); background-size:contain; background-repeat:no-repeat;
}

#contenedor-siete{
  background:#374651; padding:40px 20px; display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:600px; position:relative;
}
#contenedor-siete h2{ font-family:'TT Wellingtons', sans-serif; font-size:2.5rem; font-weight:bold; color:#fff; margin-bottom:30px; text-align:center; }
#contenedor-siete .team-container{
  display:flex; justify-content:center; gap:40px; flex-wrap:wrap; align-items:flex-start;
  max-width:var(--container-max); margin:0 auto; padding:0 var(--gutter);
}
.team-member{
  background:#fff; width:250px; padding:20px; border-radius:10px; box-shadow:0 4px 8px rgba(0,0,0,.1);
  text-align:center; transition:transform .3s ease; display:flex; flex-direction:column; align-items:center; justify-content:space-between;
}
.team-member:hover{ transform:translateY(-10px); }
.team-member img{ width:120px; height:120px; object-fit:cover; border-radius:50%; margin-bottom:15px; }
.team-member h3{ font-family:'TT Wellingtons', sans-serif; font-size:1.2rem; font-weight:bold; color:#333; margin-bottom:10px; }
.team-member p{ font-size:.9rem; line-height:1.4; color:#555; margin-bottom:10px; text-align:justify; }
.team-member a{ font-size:.9rem; color:#FF7043; text-decoration:none; display:inline-block; margin-top:5px; }
.team-member a:hover{ text-decoration:underline; }

#contenedor-ocho{ display:flex; width:100%; height:600px; }
#contenedor-ocho .left{
  width:40%; background:#fff; padding:20px; box-sizing:border-box; color:#000; height:100%;
  display:flex; flex-direction:column; justify-content:flex-start; text-align:left; margin-left:50px; overflow:hidden;
}
#contenedor-ocho .left .contact-info .social-icons a img:hover{ transform:scale(1.1); }
#contenedor-ocho .left .footer-image{ margin-top:20px; display:flex; justify-content:center; width:100%; height:auto; }
#contenedor-ocho .left .footer-image img{ width:100%; height:auto; object-fit:cover; }
#contenedor-ocho .right{
  width:60%; background:#e69f25; padding:20px; box-sizing:border-box; height:100%;
  background-image:url('footerderecho1.png'); background-size:cover; background-repeat:no-repeat; background-position:center;
}


/* =============================
   Footer (FT) — versión completa
   ============================= */

/* Base + full-bleed */
.ft{
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);

  --brand:#ff5a2a;
  --ink:#111318;
  --container-max:1265px;
  --gutter:24px;

  color:#fff;
  background:#374651;
}

/* Contenido interno: 3 columnas IGUALES en desktop */
.ft__inner{
  --gap: clamp(18px,3vw,28px);

  max-width:var(--container-max);
  margin-inline:auto;
  padding:clamp(40px,6vw,72px) var(--gutter);

  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:var(--gap);
  align-items:stretch;
}

/* Columnas */
.ft__col{
  position:relative;
  display:flex;
  flex-direction:column;
  min-width:0;
  padding: clamp(12px,1.4vw,18px) clamp(8px,1.6vw,16px);
}

/* Separadores verticales */
.ft__col::after{
  content:"";
  position:absolute;
  top:8px; bottom:8px;
  right: calc(-.5 * var(--gap));
  width:1px; background:rgba(255,255,255,.18);
}

/* Adaptaciones por breakpoint */
@media (min-width:1025px){
  .ft__col:nth-child(3n)::after{ display:none; }
}
@media (max-width:1024px) and (min-width:641px){
  .ft__inner{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .ft__col:nth-child(2n)::after{ display:none; }
}
@media (max-width:640px){
  .ft__inner{ grid-template-columns:1fr; }
  .ft__col::after{ display:none; }
}

/* Títulos, listas y enlaces */
.ft__title{
  margin:0 0 10px;
  font-weight:900;
  letter-spacing:.02em;
  text-transform:uppercase;
  font-size:clamp(.95rem,1.2vw,1.05rem);
  color:#fff;
}
.ft__list{
  list-style:none; margin:0; padding:0;
  display:grid; gap:10px;
}
.ft__list a{
  color:#fff; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.25);
}
.ft__list a:hover{ border-color:var(--brand); }

/* Logo proporcional + claim */
.ft__brand .ft__logo{
  width:auto !important; height:auto !important;
  max-width: clamp(140px, 16vw, 220px);
  max-height: clamp(44px, 6vw, 64px);
  object-fit:contain; display:block; margin-bottom:10px;
}
.ft__tag{ margin:0; opacity:.9; }

/* Iconos sociales (SVG) — centrados */
.ft__icons{
  display:flex; justify-content:center; gap:12px; flex-wrap:wrap; margin-bottom:12px;
}
.ft__iconbtn{
  --size:44px;
  inline-size:var(--size); block-size:var(--size);
  display:grid; place-items:center;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.25);
  color:#fff; background:transparent;
  transition: transform .18s ease, box-shadow .18s ease,
              border-color .18s ease, background .18s ease, color .18s ease;
}
.ft__iconbtn svg{ width:22px; height:22px; }
.ft__iconbtn:hover,
.ft__iconbtn:focus-visible{
  background: var(--brand);
  border-color: var(--brand);
  color:#0b0d11;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(255,90,42,.28);
  outline:none;
}

/* CTA WhatsApp */
.ft__cta{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 14px; border-radius:999px; font-weight:800;
  background:linear-gradient(135deg,#ff6a3a,#ff8c4f);
  color:#0b0d11; text-decoration:none;
  box-shadow:0 8px 22px rgba(255,106,58,.28);
}
.ft__cta:hover{ transform:translateY(-1px); box-shadow:0 12px 28px rgba(255,106,58,.35); }

/* === Mapa centrado en el footer === */
.ft__map{ justify-self:center; width:100%; max-width:420px; margin:0 auto; }
.map-wrap{
  position:relative; width:100%; aspect-ratio: 4 / 3; border:0;
  border-radius:12px; overflow:hidden; box-shadow:0 8px 24px rgba(0,0,0,.15);
}
.map-wrap iframe{
  position:absolute; inset:0; width:100%; height:100%; border:0;
}
@media (max-width:900px){
  .ft__map{ max-width:none; }
  .map-wrap{ aspect-ratio: 16 / 9; }
}

/* Franja legal inferior */
.ft__legal{
  max-width:var(--container-max);
  margin:18px auto 0;
  padding:12px var(--gutter) 22px;
  border-top:1px solid rgba(255,255,255,.18);

  display:flex; gap:10px; justify-content:space-between; flex-wrap:wrap;
  font-size:.9rem; color:rgba(255,255,255,.85);
}
.ft__legal a{ color:#FFD36A; text-decoration:none; }
.ft__legal a:hover{ text-decoration:underline; }

/* Orden y centrado en móvil */
@media (max-width:640px){
  .ft__brand{ order:3; text-align:center; }
  .ft__brand .ft__logo{ margin-inline:auto; }
  .ft__info{ order:1; }
  .ft__social{ order:2; }
  .ft__legal{ justify-content:center; text-align:center; }
}


/* =============================
   SERVICIOS · Tiles (paleta E&B)
   ============================= */
.svc-tiles{ background:#fff; padding:clamp(56px,6vw,88px) 0; color:var(--ink); }
.svc-tiles__inner{ max-width:var(--container-max); margin:0 auto; padding:0 var(--gutter); }

.svc-tiles__head{ text-align:center; margin-bottom:22px; }
.svc-tiles__head h2{
  margin:0 0 6px;
  font-size:clamp(1.6rem,3.2vw,2.2rem);
  letter-spacing:.02em; text-transform:uppercase; font-weight:900;
  color:var(--ink);
}
.svc-tiles__head h2 span{ color:var(--brand); }
.svc-tiles__head p{
  margin:0 auto; max-width:62ch; color:var(--muted);
  position:relative; padding-bottom:14px;
}
.svc-tiles__head p:after{
  content:""; display:block; width:72px; height:3px; border-radius:2px;
  background:var(--brand); margin:12px auto 0;
}

.tiles-viewport{ position:relative; }
.tiles-track{
  display:grid; grid-auto-flow:column;
  grid-auto-columns:clamp(240px, 28%, 360px);
  gap:clamp(14px,2vw,24px);
  overflow-x:auto; scroll-snap-type:x mandatory;
  padding:14px 56px;  /* deja espacio a las flechas */
  -webkit-overflow-scrolling:touch;
}
.tiles-track::-webkit-scrollbar{ display:none; }

.tile{
  position:relative; display:block; aspect-ratio:4/3;
  border-radius:12px; overflow:hidden;
  background-size:cover; background-position:center;
  filter:saturate(.92) contrast(.96);
  scroll-snap-align:center;
  transition:transform .25s ease, filter .25s ease, box-shadow .25s ease;
  box-shadow:0 10px 26px rgba(17,19,24,.10);
}
.tile:before{
  /* overlay oscuro + degradé inferior */
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.55) 70%);
}
.tile .label{
  position:absolute; left:16px; bottom:14px;
  color:#fff; font-weight:900; text-transform:uppercase;
  font-size:clamp(.9rem,1.4vw,1.15rem); letter-spacing:.03em;
  text-shadow:0 2px 6px rgba(0,0,0,.35);
}
.tile:hover{
  transform:translateY(-4px);
  filter:saturate(1) contrast(1);
  box-shadow:0 18px 40px rgba(17,19,24,.16);
}
.tile:hover:before{
  /* ligero tinte naranja al pasar el mouse */
  background:linear-gradient(180deg, rgba(255,90,42,.22), rgba(0,0,0,.55) 70%);
}

.tiles-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:42px; height:42px; border-radius:999px; border:0; cursor:pointer;
  display:grid; place-items:center; z-index:2;
  background:#fff; color:var(--brand); font-size:26px; line-height:1;
  box-shadow:0 8px 18px rgba(0,0,0,.12);
  transition:transform .18s ease, box-shadow .18s ease;
}
.tiles-nav:hover{ transform:translateY(-50%) scale(1.06); box-shadow:0 12px 26px rgba(0,0,0,.16); }
.tiles-nav.prev{ left:8px; }
.tiles-nav.next{ right:8px; }
@media (max-width:720px){ .tiles-nav{ display:none; } }

.tiles-dots{ display:flex; justify-content:center; gap:8px; margin:14px 0 6px; }
.tiles-dots .dot{
  width:7px; height:7px; border-radius:999px; background:#d7dbe2; border:0; cursor:pointer;
}
.tiles-dots .dot.is-active{ background:var(--brand); width:24px; border-radius:999px; }

.svc-tiles__cta{ display:flex; justify-content:center; margin-top:10px; }
.tiles-track{ scroll-behavior:smooth; }
.svc-tiles__cta{ display:none !important; }

/* ====== SERVICIOS · Full-bleed + tiles grandes (override final) ====== */
#servicios.svc-tiles{ padding-block-start: clamp(72px, 6vw, 96px); }
#servicios.svc-tiles .svc-tiles__inner{
  max-width: 1400px;
  margin-inline: auto;
  padding-inline: clamp(24px, 4vw, 64px);
}
#servicios.svc-tiles .svc-tiles__head h2{
  font-size: clamp(1.9rem, 3.4vw, 2.4rem);
}
#servicios.svc-tiles .tiles-track{
  grid-auto-columns: clamp(260px, 30vw, 420px);
  gap: clamp(16px, 2.6vw, 28px);
  padding: 16px clamp(40px, 5vw, 72px);
}
#servicios.svc-tiles .tile{
  aspect-ratio: 16 / 10;
  border-radius: 16px;
}
/* Mantiene las imágenes en gris siempre */
#servicios.svc-tiles .tile,
#servicios.svc-tiles .tile__media,
#servicios.svc-tiles .tile__media img,
#servicios.svc-tiles .tile > img{
  filter: grayscale(100%) saturate(0) contrast(1.05) !important;
}
#servicios.svc-tiles .tile:hover,
#servicios.svc-tiles .tile:focus-within{
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 18px 40px rgba(0,0,0,.28);
  filter: grayscale(100%) saturate(0) contrast(1.05) !important;
}


/* =============================
   Accesibilidad (reduce motion)
   ============================= */
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
}


/* =============================
   Mismo ancho compartido (1100 / 1265 en desktop)
   ============================= */
#nuestro-estudio .ns-center,
.team-section .team-shell,
#equipo .team-shell,
.team-section h2{
  max-width:1100px !important;
  margin-left:auto !important;
  margin-right:auto !important;
  padding-left:24px !important;
  padding-right:24px !important;
  box-sizing:content-box !important;
}
@media (min-width:1025px){
  #nuestro-estudio .ns-center,
  .team-section .team-shell,
  #equipo .team-shell,
  .team-section h2{
    max-width:1265px !important;
  }
  #nuestro-estudio .ns-lead{ max-width:95ch !important; }
}


/* =============================
   Aparición lateral (Nuestro Estudio)
   ============================= */
.ns-reveal{
  opacity: 0;
  transform: translateX(-28px);
  transition: opacity .55s ease, transform .55s ease;
  will-change: transform, opacity;
}
.ns-reveal.from-right{ transform: translateX(28px); }
.ns-reveal.is-in{ opacity: 1; transform: none; }
.ns-reveal[data-delay="100"]{ transition-delay: .1s; }
.ns-reveal[data-delay="200"]{ transition-delay: .2s; }

/* Badge superior centrado en el contenedor "Sobre BCR" */
.twocol{
  position: relative;
  padding-top: clamp(90px, 14vw, 140px); /* espacio para el badge */
}
.twocol .section-badge{
  position: absolute; top: 0; left: 50%; transform: translate(-50%, -55%);
  width: clamp(120px, 18vw, 200px); height: auto; opacity: .95;
  pointer-events: none; user-select: none;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.12));
}
/* Un poco más de aire en pantallas pequeñas */
@media (max-width: 600px){
  .twocol{ padding-top: clamp(100px, 24vw, 160px); }
}
/* 1) Ancla el triángulo al vértice superior izquierdo: posicionamiento predecible */
.hero::before{
  transform-origin: top left;
}

/* 2) Variables de posición/tamaño del logo (fáciles de ajustar) */
.hero{
  --badge-top: 4px;                             /* más arriba */
  --badge-left: 40px;                            /* leve ajuste horizontal */
  --badge-size: clamp(120px, 15vw, 220px);       /* tamaño algo más contenido */
}

/* 3) Logo PNG sobre el triángulo */
.hero::after{
  content:"";
  position:absolute;
  top: var(--badge-top);
  left: var(--badge-left);
  width: var(--badge-size);
  aspect-ratio: 1 / 1;                           /* caja cuadrada para el badge */
  background: url('transparencia.png') center / contain no-repeat;
  z-index:0;                                      /* sobre el triángulo, bajo el texto */
  pointer-events:none;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.15));
  transform: translateY(-8%);                     /* empuje extra hacia arriba */
}

/* 4) Ajustes finos por breakpoint */
@media (min-width:1025px){
  .hero{
    --badge-top: 3px;                            /* casi pegado al borde en desktop */
    --badge-left: 44px;
    --badge-size: 220px;
  }
  .hero::after{
    transform: translateY(-12%);                 /* un poco más arriba en desktop */
  }
}
@media (max-width:640px){
  .hero{
    --badge-top: calc(env(safe-area-inset-top, 0px) + 4px); /* respeta notch */
    --badge-left: 16px;
    --badge-size: 132px;
  }
  .hero::after{
    transform: translateY(-6%);                  /* menos empuje en móvil */
  }
}

/* === Ajustes visuales extra solicitados === */
/* Hero en B/N */
.hero .hero-bg .hero-slide{
  filter: grayscale(100%);
}
/* Equipo en B/N por defecto y a color al pasar/usar teclado */
.team-card img{
  filter: grayscale(100%) contrast(1.02) saturate(.98);
  transition: filter .35s ease;
}
.team-card:hover img,
.team-card:focus-within img{
  filter:none;
}

/* ===== HERO (móvil): dejar SOLO el logo dentro de la forma naranja y bajar el texto ===== */
@media (max-width: 768px){
  /* 1) Volver a mostrar el logo sobre la forma naranja en móvil (anula el "content:none") */
  .hero::after{
    content: "" !important;                     /* <- asegura que el logo aparezca */
    top: calc(env(safe-area-inset-top, 0px) + 8px);
    left: 16px;
    width: clamp(104px, 28vw, 180px);           /* tamaño del logo */
    transform: none !important;
  }

  /* 2) Ajustar un poco la forma naranja para que el logo “respire” */
  .hero::before{
    width: 72vw;                                /* antes: 75vw */
    height: 58vh;                               /* antes: 75vh */
    transform: skewY(-18deg) translateY(-18%);  /* sube levemente la forma */
  }

  /* 3) Bajar el bloque de contenido (título + párrafo + CTAs) por debajo de la forma */
  .hero-content{
    margin-top: clamp(150px, 36vh, 300px) !important; /* empuja el contenido hacia abajo */
    transform: none !important;                        /* anula el translateY(25%) anterior */
    align-items: flex-start;                           /* mantiene alineado a la izquierda */
    padding-left: 16px;
    padding-right: 16px;
  }

  /* Opcional: limitar ancho del título y subtítulo para que no invadan la forma */
  .hero h1{ max-width: 20ch; }
  .hero .sub{ max-width: 46ch; }
}