/* ============================================================
   VARIABLES DE MARCA — cambia aquí y se aplica a toda la página
   ============================================================ */
:root{
  --blanco:        #FFFFFF;
  --blanco-calido:  #FAFAF8;
  --tinta:          #17181C;
  --tinta-suave:    #5B5D63;
  --naranjo:        #E8551C;
  --naranjo-oscuro: #B83E10;
  --grafito:        #14151A;
  --linea:          #E9E7E2;

  --fuente-titulo: 'Space Grotesk', sans-serif;
  --fuente-texto:  'IBM Plex Sans', sans-serif;

  --ancho-maximo: 1180px;
}

/* ============================================================
   RESET BÁSICO
   ============================================================ */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  font-family:var(--fuente-texto);
  color:var(--tinta);
  background:var(--blanco);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
button{ font-family:inherit; cursor:pointer; }
:focus-visible{ outline:2px solid var(--naranjo); outline-offset:3px; }
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.01ms !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; }
}

.envoltura{ max-width:var(--ancho-maximo); margin:0 auto; padding:0 32px; }

h1,h2,h3{ font-family:var(--fuente-titulo); font-weight:700; line-height:1.15; letter-spacing:-0.01em; }

/* ============================================================
   NAVEGACIÓN
   ============================================================ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:rgba(255,255,255,0.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid transparent;
  transition:border-color .3s ease, box-shadow .3s ease;
}
.nav.nav--con-scroll{
  border-bottom-color:var(--linea);
  box-shadow:0 4px 24px rgba(20,21,26,0.05);
}
.nav__fila{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 32px;
  max-width:var(--ancho-maximo); margin:0 auto;
}
.marca{
  display:flex; flex-direction:column; gap:4px;
  font-family:var(--fuente-titulo); font-weight:700; font-size:22px;
  letter-spacing:0.01em;
}
.marca span{ display:block; width:34px; height:3px; background:var(--naranjo); }
.marca__logo{ height:66px; width:auto; }

.nav__enlaces{ display:flex; align-items:center; gap:36px; }
.nav__enlaces a{
  font-size:15px; font-weight:500; color:var(--tinta-suave);
  transition:color .2s ease;
}
.nav__enlaces a:hover{ color:var(--naranjo); }

.nav__derecha{ display:flex; align-items:center; gap:24px; }

/* Selector de idioma */
.idioma{ position:relative; }
.idioma__boton{
  display:flex; align-items:center; gap:8px;
  background:none; border:1px solid var(--linea); border-radius:8px;
  padding:8px 12px; font-size:14px; color:var(--tinta);
  white-space:nowrap;
}
.idioma__boton:hover{ border-color:var(--naranjo); }
.idioma__lista{
  position:absolute; top:calc(100% + 8px); right:0;
  background:var(--blanco); border:1px solid var(--linea); border-radius:10px;
  box-shadow:0 12px 32px rgba(20,21,26,0.12);
  min-width:170px; padding:6px; display:none; flex-direction:column;
}
.idioma.idioma--abierto .idioma__lista{ display:flex; }
.idioma__lista button{
  display:flex; align-items:center; gap:10px;
  background:none; border:none; text-align:left;
  padding:10px 12px; border-radius:6px; font-size:14px;
  color:var(--tinta); width:100%;
}
.idioma__lista button:hover{ background:var(--blanco-calido); }

.menu-movil-boton{
  display:none; flex-direction:column; gap:5px; background:none; border:none; padding:6px;
}
.menu-movil-boton span{ width:24px; height:2px; background:var(--tinta); }

/* ============================================================
   HERO / PORTADA
   ============================================================ */
.hero{
  position:relative; overflow:hidden;
  min-height:640px;
  display:flex; align-items:center;
  padding:180px 0 70px;
  background:linear-gradient(135deg, var(--grafito) 0%, var(--naranjo-oscuro) 160%);
}
.hero__slides{ position:absolute; inset:0; z-index:0; }
.hero__slide{
  position:absolute; inset:0; opacity:0;
  transition:opacity 1.4s ease;
}
.hero__slide.is-activa{ opacity:1; }
.hero__slide img{ width:100%; height:100%; object-fit:cover; object-position:right center; position:relative; z-index:2; }
.hero__slide .foto__marcador{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(135deg, var(--grafito) 0%, var(--naranjo-oscuro) 160%);
}
.hero__velo{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(100deg, rgba(20,21,26,0.88) 0%, rgba(20,21,26,0.65) 42%, rgba(20,21,26,0.3) 68%, rgba(20,21,26,0.08) 100%);
}
.hero__contenido{ position:relative; z-index:2; text-align:left; width:100%; }
.hero__texto{ max-width:620px; text-align:left; }

.hero__texto-slide{ display:none; }
.hero__texto-slide.is-activa{ display:block; opacity:0; animation:aparecer .6s ease forwards; }
.hero__texto-slide h1, .hero__texto-slide h2{
  font-size:clamp(36px, 5vw, 58px);
  max-width:16ch; color:var(--blanco); text-align:left;
}
.hero__texto-slide h1 .resaltado, .hero__texto-slide h2 .resaltado{ color:var(--naranjo); }
.hero__texto-slide p{
  margin-top:22px; max-width:46ch;
  font-size:18px; color:rgba(255,255,255,0.85); text-align:left;
}
.hero__acciones{ margin-top:36px; display:flex; gap:16px; flex-wrap:wrap; opacity:0; animation:aparecer .7s ease forwards; animation-delay:.35s; }

.hero__flecha{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:46px; height:46px; border-radius:50%;
  background:rgba(255,255,255,0.14); border:1px solid rgba(255,255,255,0.4);
  color:var(--blanco); display:flex; align-items:center; justify-content:center;
  transition:background .2s ease, border-color .2s ease;
}
.hero__flecha:hover{ background:rgba(255,255,255,0.28); border-color:var(--blanco); }
.hero__flecha svg{ width:20px; height:20px; }
.hero__flecha--prev{ left:24px; }
.hero__flecha--next{ right:24px; }

.hero__puntos{
  position:absolute; z-index:3; left:50%; transform:translateX(-50%); bottom:26px;
  display:flex; gap:10px;
}
.hero__puntos button{
  width:9px; height:9px; border-radius:50%; border:none; padding:0;
  background:rgba(255,255,255,0.4);
  transition:background .25s ease, transform .25s ease;
}
.hero__puntos button.is-activo{ background:var(--naranjo); transform:scale(1.25); }

.boton{
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 26px; border-radius:8px; font-weight:600; font-size:15px;
  transition:transform .2s ease, background .2s ease, border-color .2s ease;
}
.boton--principal{ background:var(--naranjo); color:var(--blanco); }
.boton--principal:hover{ background:var(--naranjo-oscuro); }
.boton--fantasma{ border:1px solid rgba(255,255,255,0.55); color:var(--blanco); }
.boton--fantasma:hover{ border-color:var(--blanco); background:rgba(255,255,255,0.12); }

@keyframes aparecer{ to{ opacity:1; transform:translateY(0); } }

@media (max-width:680px){
  .hero__flecha{ display:none; }
}


/* ============================================================
   SECCIONES GENERALES
   ============================================================ */
.seccion{ padding:70px 0; }
.seccion--alterna{ background:var(--blanco-calido); }
.seccion__cabecera{ max-width:56ch; margin-bottom:56px; }
.seccion__cabecera h2{ font-size:clamp(28px,3.4vw,40px); }
.seccion__cabecera p{ margin-top:16px; font-size:17px; color:var(--tinta-suave); }

.nosotros__fila{
  display:grid; grid-template-columns:0.9fr 1.1fr; gap:64px; align-items:center;
}
.nosotros__texto p + p{ margin-top:16px; }
.nosotros__texto p{ color:var(--tinta-suave); font-size:16.5px; }

/* ============================================================
   ESPACIOS DE FOTO
   ============================================================ */
.foto{
  position:relative; overflow:hidden; border-radius:14px;
  background:linear-gradient(135deg, var(--naranjo) 0%, var(--naranjo-oscuro) 100%);
}
.foto img{ width:100%; height:100%; object-fit:cover; position:relative; z-index:2; }
.foto__marcador{
  position:absolute; inset:0; z-index:1;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px; padding:24px; text-align:center; color:rgba(255,255,255,0.85);
  background-image:repeating-linear-gradient(135deg, rgba(255,255,255,0.07) 0 2px, transparent 2px 18px);
}
.foto__marcador svg{ width:36px; height:36px; opacity:.9; }
.foto__marcador code{
  font-family:monospace; font-size:12.5px; background:rgba(0,0,0,0.18);
  padding:4px 10px; border-radius:6px;
}
.foto--retrato{ aspect-ratio:4/5; }
.foto--ancha{ aspect-ratio:16/9; }

/* ============================================================
   TARJETAS DE SERVICIO
   ============================================================ */
.tarjetas{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.tarjeta{
  padding:36px 30px; border:1px solid var(--linea); border-radius:14px;
  border-left:3px solid var(--linea);
  background:var(--blanco);
  transition:border-color .25s ease, background .25s ease;
}
.tarjeta:hover{ border-left-color:var(--naranjo); background:var(--blanco-calido); }
.tarjeta svg{ width:34px; height:34px; color:var(--naranjo); margin-bottom:22px; }
.tarjeta h3{ font-size:19px; margin-bottom:12px; }
.tarjeta p{ font-size:15.5px; color:var(--tinta-suave); }

/* ============================================================
   FRANJA — ALCANCE GLOBAL
   ============================================================ */
.franja{
  position:relative; padding:70px 0 130px; color:var(--blanco); overflow:hidden;
  background:var(--grafito);
}
.franja__foto{ position:absolute; inset:0; z-index:0; }
.franja__foto img{ width:100%; height:100%; object-fit:cover; opacity: 0.95;; position:relative; z-index:2; }
.franja__foto .foto__marcador{ position:absolute; inset:0; background:linear-gradient(135deg, var(--grafito) 0%, var(--naranjo-oscuro) 130%); }
.franja__velo{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(20,21,26,0.15), rgba(20,21,26,0.55));
}
.franja__contenido{ position:relative; z-index:2; text-align:center; }
.franja__contenido p.previo{
  display:inline-block;
  background:var(--naranjo);
  color:var(--blanco);
  font-weight:600;
  margin-bottom:18px;
  padding:6px 16px;
  border-radius:20px;
  font-size:18px;
}
.franja__contenido h2{
  font-size:clamp(28px,4vw,44px); max-width:24ch; margin:0 auto; line-height:1.3;
}
.franja__linea{ width:64px; height:3px; background:var(--naranjo); margin:34px auto 0; }

@media (max-width:768px){ .franja__foto{ background-attachment:scroll; } }
@media (min-width:769px){ .franja{ background-attachment:fixed; } }

/* ============================================================
   CONTACTO
   ============================================================ */
.contacto__fila{ display:grid; grid-template-columns:1fr 1fr; gap:64px; }
.contacto__lista{ margin-top:28px; display:flex; flex-direction:column; gap:20px; }
.contacto__item{ display:flex; gap:16px; align-items:flex-start; }
.contacto__item svg{ width:22px; height:22px; color:var(--naranjo); flex-shrink:0; margin-top:2px; }
.contacto__item strong{ display:block; font-size:14px; color:var(--tinta-suave); font-weight:500; }
.contacto__item span{ font-size:16.5px; }

.contacto__panel{
  background:var(--tinta); color:var(--blanco); border-radius:16px; padding:44px;
}
.contacto__panel h3{ font-size:22px; margin-bottom:14px; }
.contacto__panel p{ color:rgba(255,255,255,0.72); font-size:15.5px; margin-bottom:28px; }
.contacto__panel .boton--principal{ width:100%; justify-content:center; }
.contacto--centrada{ text-align:center; }
.seccion__cabecera--centrada{ margin-left:auto; margin-right:auto; }
.contacto__lista--fila{
  flex-direction:row; justify-content:center; flex-wrap:wrap;
  gap:48px; margin-top:44px;
}
.contacto__lista--fila .contacto__item{ text-align:left; }
#contacto{ position:relative; overflow:hidden; }
.contacto__fondo{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:600px; max-width:90%; opacity:.06; pointer-events:none; z-index:0;
}
.contacto--centrada > *{ position:relative; z-index:1; }

.contacto__lista--grande{ gap:64px; }
.contacto__lista--grande .contacto__item svg{ width:30px; height:30px; }
.contacto__lista--grande .contacto__item strong{ font-size:15px; }
.contacto__lista--grande .contacto__item span{ font-size:18px; }

/* ============================================================
   FOOTER
   ============================================================ */
footer{ background:var(--grafito); color:rgba(255,255,255,0.7); padding:56px 0 30px; }
.footer__fila{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:24px;
  padding-bottom:34px; border-bottom:1px solid rgba(255,255,255,0.12);
}
.footer__marca{ font-family:var(--fuente-titulo); font-weight:700; font-size:19px; color:var(--blanco); }
.footer__enlaces{ display:flex; gap:28px; flex-wrap:wrap; }
.footer__enlaces a{ font-size:14.5px; color:rgba(255,255,255,0.7); }
.footer__enlaces a:hover{ color:var(--naranjo); }
.footer__abajo{
  padding-top:24px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
  font-size:13.5px; color:rgba(255,255,255,0.45);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:960px){
  .nosotros__fila, .contacto__fila{ grid-template-columns:1fr; }
  .tarjetas{ grid-template-columns:1fr 1fr; }
}
@media (max-width:680px){
  .envoltura{ padding:0 22px; }
  .nav__enlaces, .idioma{ display:none; }
  .menu-movil-boton{ display:flex; }
  .nav--abierto .nav__enlaces{
    display:flex; flex-direction:column; position:absolute; top:100%; left:0; right:0;
    background:var(--blanco); padding:20px 22px; gap:18px; border-bottom:1px solid var(--linea);
  }
  .hero{ min-height:560px; padding:150px 0 60px; }
  .hero__velo{ background:linear-gradient(180deg, rgba(20,21,26,0.78), rgba(20,21,26,0.55)); }
  .tarjetas{ grid-template-columns:1fr; }
  .seccion{ padding:80px 0; }
  .contacto__panel{ padding:30px; }
}

/* ============================================================
   BOTÓN "MÁS" EN LAS TARJETAS DE "QUÉ HACEMOS"
   ============================================================ */
.tarjeta{ display:flex; flex-direction:column; }
.tarjeta p{ margin-bottom:26px; }
.tarjeta__mas{
  margin-top:auto; align-self:flex-start;
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 20px; border:1px solid var(--naranjo); border-radius:8px;
  color:var(--naranjo); font-size:13.5px; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase;
  transition:background .2s ease, color .2s ease;
}
.tarjeta__mas::after{ content:"→"; font-size:16px; line-height:1; }
.tarjeta__mas:hover{ background:var(--naranjo); color:var(--blanco); }

/* ============================================================
   PÁGINAS DE DETALLE DE CADA SERVICIO
   ============================================================ */
.vista--oculta{ display:none !important; }

.serv-cabecera{ padding:150px 0 56px; background:var(--blanco-calido); border-bottom:1px solid var(--linea); }
.serv-volver{
  display:inline-flex; align-items:center; gap:8px; margin-bottom:34px;
  font-size:14px; font-weight:600; color:var(--tinta-suave);
  transition:color .2s ease;
}
.serv-volver::before{ content:"←"; font-size:16px; }
.serv-volver:hover{ color:var(--naranjo); }
.serv-previo{
  color:var(--naranjo); font-weight:600; font-size:14px;
  letter-spacing:.1em; text-transform:uppercase; margin-bottom:14px;
}
.serv-cabecera h1{ font-size:clamp(34px,4.6vw,52px); max-width:20ch; }
.serv-cabecera h1::after{ content:""; display:block; width:56px; height:3px; background:var(--naranjo); margin-top:22px; }
.serv-intro{ margin-top:24px; max-width:68ch; font-size:18px; color:var(--tinta-suave); }

.serv-lista{ padding:30px 0 100px; }
.serv-item{
  display:grid; grid-template-columns:300px 1fr; gap:56px; align-items:center;
  padding:44px 0; border-bottom:1px solid var(--linea);
}
.serv-item:last-child{ border-bottom:none; }
.foto--cuadrada{ aspect-ratio:1/1; }
.serv-item__num{ font-family:var(--fuente-titulo); font-weight:700; font-size:15px; color:var(--naranjo); letter-spacing:.1em; }
.serv-item__texto h3{ font-size:clamp(22px,2.6vw,28px); margin:8px 0 14px; }
.serv-item__texto p{ font-size:16.5px; color:var(--tinta-suave); max-width:60ch; }

@media (max-width:760px){
  .serv-cabecera{ padding:130px 0 44px; }
  .serv-item{ grid-template-columns:1fr; gap:24px; padding:36px 0; }
  .serv-item .foto{ max-width:320px; }
}


/* ============================================================
   AÑADIDOS PARA LA VERSIÓN MULTIPÁGINA
   ============================================================ */
.idioma__lista a{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius:6px; font-size:14px;
  color:var(--tinta); width:100%;
}
.idioma__lista a:hover,
.idioma__lista a[aria-current="true"]{ background:var(--blanco-calido); }
.footer__servicios{
  display:flex; gap:28px; flex-wrap:wrap;
  padding:0 0 26px; margin-top:-8px;
}
.footer__servicios a{ font-size:14.5px; color:rgba(255,255,255,0.7); }
.footer__servicios a:hover{ color:var(--naranjo); }
.serv-cta{ padding:70px 0; background:var(--blanco-calido); }
.serv-cta__panel{ max-width:640px; margin:0 auto; }

html[lang="zh"] body, html[lang="zh"] h1, html[lang="zh"] h2, html[lang="zh"] h3, html[lang="zh"] .boton, html[lang="zh"] .marca{
  font-family:'IBM Plex Sans','PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC',sans-serif;
}
html[lang="zh"] h1, html[lang="zh"] h2, html[lang="zh"] h3{ letter-spacing:0; line-height:1.3; }
html[lang="zh"] p{ line-height:1.8; }
.serv-item__texto h2{ font-size:clamp(22px,2.6vw,28px); margin:8px 0 14px; }