/* Etiqueta/label para el botón flotante de WhatsApp */
.wa-fab-label {
  position:fixed;
  right:18px;
  bottom:35px;
  font-size:22px;
  font-weight:700;
  color:#fff;
  background:transparent;
  z-index:1000; /* por encima del contenido */
  text-align:center;
  width:200px;
  pointer-events:none; /* no bloquea clics debajo */
}

/* Botón flotante de WhatsApp (versión pastilla con texto)
   Nota: más abajo existe otra regla .wa-fab (versión ícono redondo)
   que sobreescribe varias propiedades por cascada. */
.wa-fab{
  position:fixed;
  right:18px;
  bottom:18px;
  min-width: 200px;
  height: 56px;
    min-width: 220px; /* pequeño ajuste de ancho */
    height: 56px;
    background: #25d366; /* color WhatsApp */
    color: #fff;
    border-radius: 32px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
    padding: 0 32px 0 20px;
    font-size: 20px;
    font-weight: 600;
    box-shadow: 0 8px 32px 0 rgba(0,0,0,.18);
}
.wa-fab-icon {
  display: flex;
  align-items: center; /* centra verticalmente el ícono */
}

.wa-fab-text {
  font-size: 20px;
  font-weight: 600;
  color: #fff;
}
.wa-fab:hover{
  background:#1ebe57;
  box-shadow:0 8px 32px rgba(0,0,0,.25);
}
/* Duplicado intencional: mismo hover (no cambia comportamiento) */
.wa-fab:hover{
  background:#1ebe57;
  box-shadow:0 8px 32px rgba(0,0,0,.25);
}

/* Tipografía global: párrafos justificados en todo el sitio */
p{
  text-align:justify;
  text-justify:inter-word;
  hyphens:auto;
}

/* Botón principal para solicitar cotización */
.btn-cotizacion {
  background: #002f2f !important;
  color: #fff !important;
  border: 2px solid #002f2f !important;
  transition: background 0.2s, color 0.2s, border 0.2s;
}
.btn-cotizacion:hover {
  background: #f19800!important; /* usa color secundario al hover */
  color: #002f2f !important;
  border: 2px solid #f19800 !important;
}

/* Hover genérico para .btn-primary (excluye .btn-cotizacion) */
.btn-primary:not(.btn-cotizacion):hover {
  background: #002f2f; /* versión 1: usa primario */
  color: #fff;
  border: 2px solid #002f2f;
}
/* OJO: esta segunda regla sobreescribe la anterior por orden (última gana) */
.btn-primary:not(.btn-cotizacion):hover {
  background: #f19800; /* versión 2: usa secundario */
  color: #fff;
  border: 2px solid #f19800;
}

/* Variables y tokens de diseño */
:root{
  --color-primary:#002f2f;   /* verde oscuro corporativo */
  --color-secondary:#f19800; /* acento naranja */
  --color-accent:#114552;    /* acento secundario */
  --color-dark:#007838;      /* variante oscura para botones */
  --color-muted:#002540;     /* fondos secciones oscuras */
  --text:#0b1723;            /* color base de texto */
  --white:#ffffff;
  --radius:16px;             /* radio por defecto */
  --shadow:0 10px 25px rgba(0,0,0,.08); /* sombra suave */
  --container:1500px;        /* ancho máximo del contenedor */
}

/* Reseteos y utilidades base */
*{box-sizing:border-box}
html,body{margin:0;padding:0;color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Helvetica Neue',Arial,'Noto Sans','Liberation Sans',sans-serif;scroll-behavior:smooth}
img{max-width:100%;display:block}
a{color:var(--color-primary);text-decoration:none}
a:hover{opacity:.95}
.container{width:min(100%,var(--container));margin-inline:auto;padding-inline:20px}

/* Breadcrumbs (rastro de navegación) */
.breadcrumb{font-size:14px;line-height:1.4;color:rgba(11,23,35,.8);padding:8px 0}
.breadcrumb a{color:var(--color-primary);text-decoration:none;font-weight:600}
.breadcrumb a:hover{text-decoration:underline}
.breadcrumb .sep{margin:0 6px;color:rgba(11,23,35,.55)}

/* Tipografía y composición de secciones de texto largo */
.section p{margin:10px 0 14px}
.section .h2{margin-top:24px;margin-bottom:10px}
.section code{background:#f6f8f9;border:1px solid #e6edf2;border-radius:6px;padding:0 6px;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;font-size:.95em}

/* Listas de contenido (evitar heredar estilo del footer) */
.section .ft-list{list-style:disc;padding-left:1.25rem;margin:8px 0 18px;gap:6px;color:var(--text) !important;}
.section .ft-list li{margin:2px 0}

/* Navbar fija con sombra sutil */
.navbar{position:sticky;top:0;z-index:50;background:var(--white);box-shadow:0 1px 0 rgba(0,0,0,.06)}
.nav-inner{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:14px 0;
  gap:32px;
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  justify-content:center;
  flex:0 0 auto;
}
.nav-links {
  display: flex;
  gap: 28px;
}
.nav-left { margin-right: auto; }  /* empuja contenido a la izquierda */
.nav-right { margin-left: auto; }   /* empuja contenido a la derecha */
.brand img{ width:63px; height:auto; }
.brand .title{font-weight:800;letter-spacing:1.4px;color:var(--color-primary);font-size:clamp(20px,2.2vw,28px)}
.nav-links{display:flex;gap:28px}
.nav-links a{
  font-weight:600;
  padding:8px 4px;
  border-bottom:2px solid transparent;
  position:relative;
  transition: border-color 0.3s; /* subrayado animado */
}
.nav-links a:hover { border-color: var(--color-secondary); }
.nav-links a.active{border-color:var(--color-secondary)}
.nav-cta{display:none}

/* Hero con slider a la izquierda (sin difuminación) */
.hero{position:relative;isolation:isolate}
.hero-media{
  position:relative;
  height: 500px;
  background: var(--color-muted);
}
.hero-slides{position:absolute;inset:0;overflow:hidden;z-index:1;background:url('assets/hero1.png') center/cover no-repeat}
/* Cada imagen se desliza de derecha a izquierda y sale por la izquierda */
.hero-slides img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  animation:hero-slide-left 28s infinite ease-in-out;
  will-change:transform;
}
.hero-slides img:nth-child(1){animation-delay:0s}
.hero-slides img:nth-child(2){animation-delay:7s}
.hero-slides img:nth-child(3){animation-delay:14s}
.hero-slides img:nth-child(4){animation-delay:20s}
/* Animación: entra desde la derecha, permanece, y sale por la izquierda */
@keyframes hero-slide-left{
  0%   { transform: translateX(100%); }
  3%   { transform: translateX(0%); }
  26%  { transform: translateX(0%); }
  27%  { transform: translateX(-100%); }
  100% { transform: translateX(-100%); }
}

/* CTA del hero alineadas a la izquierda */
.hero-ctas{
  position:absolute;
  left:0;
  right:0;
  bottom:5px;
  display:flex;
  gap:20px;
  justify-content:flex-start;
  z-index:2;
}

/* Botones genéricos */
.btn{display:inline-flex;align-items:center;gap:10px;padding:16px 24px;border-radius:999px;font-weight:800;box-shadow:var(--shadow);border:2px solid transparent}
.btn-primary{background:var(--white);color:var(--color-primary)}
.btn-primary:hover{transform:translateY(-1px)} /* micro-elevación */
.btn-accent{background:var(--color-dark);color:#fff}

/* Banda destacada del hero */
.hero-band{background:var(--color-secondary);color:var(--white);padding:175px 0;text-align:center}
.h1{font-family:"Playfair Display",serif;font-weight:800;font-size:clamp(28px,3.6vw,48px);line-height:1.15;margin:0 auto 16px;max-width:1000px}
.lead{max-width:2000px;margin:0 auto;font-size:18px;opacity:.95}

/* Secciones genéricas (ancla con margen para navbar fija) */
section{scroll-margin-top:84px}
.section{padding:56px 0}
.eyebrow{color:var(--color-accent);font-weight:800;letter-spacing:.4px}
.h2{font-family:"Playfair Display",serif;font-weight:800;font-size:clamp(26px,3vw,40px);margin:6px 0 8px}
.sub{opacity:.9}

/* Ancho de lectura más cómodo para textos largos */
.prose-narrow{max-width:820px;margin-left:auto;margin-right:auto}
.prose-narrow p{line-height:1.7}
.prose-narrow .h2{margin-top:28px}
.prose-narrow ul{padding-left:1.25rem}

/* Nota legal / informativa */
.legal-note{background:#f9fbfc;border:1px solid #e6edf2;border-left:4px solid var(--color-secondary);border-radius:12px;padding:14px 16px;margin:8px 0 16px;font-size:14px}
.legal-note ul{margin:6px 0 0 18px}
.legal-note li{margin:2px 0}

/* Alertas informativas */
.alert{background:#f6f8f9;border:1px solid #e6edf2;border-left:4px solid var(--color-secondary);border-radius:12px;padding:12px 14px;margin:10px 0 0;font-size:14px}
.alert-success{border-left-color:var(--color-dark);background:#eef6f6}

/* Grid de servicios (2 columnas en desktop) */
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px;margin-top:36px}
.card{position:relative;border-radius:24px;overflow:hidden;box-shadow:var(--shadow);min-height:320px;aspect-ratio:16/9;background:#f6f8f9}
/* Hacer que el primer enlace cubra toda la tarjeta para facilitar el toque en móvil */
.card > a:first-child{position:absolute;inset:0;display:block}
.card>img, .card a>img{height:100%;width:100%;object-fit:cover;transition:filter .25s ease}
.card:hover>img, .card:hover a>img{filter:brightness(0.6)}
.badge{position:absolute;left:16px;top:18px;background:rgba(0,0,0,.55);color:#fff;padding:12px 16px;border-radius:14px;font-weight:800;font-size:22px;line-height:1.15;box-shadow:var(--shadow);z-index:2}
.badge span{display:block}
.more{position:absolute;right:18px;bottom:18px;background:rgba(255,255,255,.92);backdrop-filter:saturate(1.4) blur(2px);padding:10px 16px;border-radius:999px;font-weight:700;border:1px solid rgba(0,0,0,.06);z-index:2}
.more:hover{transform:translateY(-1px)}

/* Sección Nosotros (layout 60/40) */
.about{display:grid;grid-template-columns:1.2fr .8fr;gap:36px;align-items:center}
.about .pill{display:inline-block;background:#eef6f6;color:var(--color-primary);padding:8px 14px;border-radius:999px;font-weight:700}
/* Bloque de imagen a ancho completo en páginas internas */
.image-full{position:relative;margin:0}
.image-full::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom, rgba(0,0,0,.12), rgba(0,0,0,.22))}
.image-full img{display:block;width:100%;height:60vh;min-height:320px;object-fit:cover;border-radius:0}
/* Nosotros: bloques destacados */
.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:20px}
.card-simple{border:1px solid #e6edf2;border-radius:16px;padding:20px;background:#ffffff}
.card-simple p{text-align:justify;text-justify:inter-word;hyphens:auto}
.values{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:20px}
.values .value{border:1px solid #e6edf2;border-radius:14px;padding:16px;background:#f9fbfc;font-weight:600;text-align:center}
.timeline{position:relative;padding-left:22px;margin-top:8px}
.timeline:before{content:"";position:absolute;left:8px;top:0;bottom:0;width:2px;background:#e6edf2}
.timeline-item{position:relative;margin:14px 0;padding-left:12px}
.timeline-item:before{content:"";position:absolute;left:-2px;top:6px;width:10px;height:10px;border-radius:50%;background:var(--color-secondary)}
/* Historia: justificar párrafos para mejor lectura */
.timeline p{text-align:justify;text-justify:inter-word;hyphens:auto}
/* Nosotros: sección con texto sobre imagen de fondo */
.about-hero{position:relative;isolation:isolate;background:url('assets/equipo-saleda.png') center/contain no-repeat;background-position:center top;min-height:100vh;padding:40px 0 24px;display:flex;align-items:flex-end}
.about-hero .container{width:100%;max-width:none;padding-left:0;padding-right:0}
.about-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(to bottom, rgba(0,0,0,.35), rgba(0,0,0,.45))}
.about-hero .container{position:relative;z-index:1}
.about-hero .h2{color:#fff}
.about-hero p, .about-hero li{color:#fff}
.about-hero .pill{background:rgba(255,255,255,.85);color:var(--color-primary)}
/* Panel de contenido sobre la imagen */
.about-hero__content{background:rgba(255,255,255,.55);backdrop-filter:blur(4px) saturate(1.1);-webkit-backdrop-filter:blur(4px) saturate(1.1);border-radius:0;padding:32px clamp(16px,6vw,48px);box-shadow:0 12px 30px rgba(0,0,0,.12);max-width:none;width:100%;margin:0;color:var(--text);border:1px solid rgba(255,255,255,.3)}
.about-hero__content .h2{color:var(--text);margin:8px 0}
.about-hero__content p,.about-hero__content li{color:var(--text)}
.about-hero__content ul{margin:8px 0 0 18px}
.about-hero__content .pill{background:#eef6f6;color:var(--color-primary)}
@media (max-width: 900px){
  .about-hero{padding:24px 0 24px;min-height:100vh;align-items:flex-end;background-position:center top;background-size:contain}
  .about-hero__content{padding:16px;border-radius:12px}
}
@media (max-width: 900px){
  .cards{grid-template-columns:1fr}
  .values{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Service detail hero (generic, background provided inline) */
.service-hero{position:relative;isolation:isolate;background:center/cover no-repeat;min-height:70vh;padding:40px 0 24px;display:flex;align-items:flex-end}
.service-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(to bottom, rgba(0,0,0,.35), rgba(0,0,0,.45))}
.service-hero .container{position:relative;z-index:1;width:100%;max-width:none;padding-left:0;padding-right:0}
.service-hero__content{background:rgba(255,255,255,.55);backdrop-filter:blur(4px) saturate(1.1);-webkit-backdrop-filter:blur(4px) saturate(1.1);border-radius:0;padding:32px clamp(16px,6vw,48px);box-shadow:0 12px 30px rgba(0,0,0,.12);width:100%;border:1px solid rgba(255,255,255,.3)}
.service-hero__content .h1,.service-hero__content .h2{color:var(--text);margin:8px 0}
.service-hero__content p,.service-hero__content li{color:var(--text)}
.service-hero__content .pill{background:#eef6f6;color:var(--color-primary)}
@media (max-width: 900px){
  .service-hero{padding:24px 0 24px;min-height:60vh}
}

/* Tablas (menús) */
.table-wrap{width:100%;overflow:auto;border-radius:12px;box-shadow:var(--shadow);background:#fff;border:1px solid #e6edf2;margin-top:16px}
table.menu-table{width:100%;border-collapse:collapse;min-width:720px}
table.menu-table th, table.menu-table td{padding:12px 14px;text-align:left;border-bottom:1px solid #e6edf2}
table.menu-table thead th{background:#f6f8f9;font-weight:800}
table.menu-table tbody tr:nth-child(even){background:#fafcfd}
table.menu-table caption{caption-side:top;text-align:left;font-weight:800;margin-bottom:8px}
/* Tabs simples para alternar semanas */
.tabs{margin-top:12px}
.tab-buttons{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.tab-button{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:999px;font-weight:700;border:1px solid #e6edf2;background:#eef6f6;color:var(--color-primary);cursor:pointer}
.tab-button:hover{filter:brightness(0.98)}
.tab-button.active{background:var(--color-secondary);border-color:var(--color-secondary);color:#fff}
.tab-panel{display:none}
.tab-panel.active{display:block}

/* Equipos (icon cards) */
.equip-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:12px}
.equip-item{display:flex;align-items:center;gap:12px;padding:14px;border:1px solid #e6edf2;border-radius:14px;background:#ffffff}
.equip-item svg{width:28px;height:28px;fill:var(--color-secondary)}
@media (max-width: 900px){.equip-grid{grid-template-columns:1fr 1fr}}

/* Galería simple */
.gallery-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:12px}
.gallery-grid img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:12px;box-shadow:var(--shadow)}
@media (max-width: 900px){.gallery-grid{grid-template-columns:1fr 1fr}}

/* Lightbox */
.lightbox{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.82);z-index:1000;padding:20px}
.lightbox.open{display:flex}
.lightbox img{max-width:92vw;max-height:92vh;border-radius:10px;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.lightbox-close{position:absolute;top:14px;right:14px;width:40px;height:40px;border-radius:999px;border:1px solid rgba(255,255,255,.5);background:rgba(0,0,0,.35);color:#fff;font-size:22px;line-height:1;display:grid;place-items:center;cursor:pointer}
.lightbox-close:hover{background:rgba(0,0,0,.5)}

/* Indicadores (KPIs) */
.kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:12px}
.kpi{background:#ffffff;border:1px solid #e6edf2;border-radius:14px;padding:16px;box-shadow:var(--shadow)}
.kpi .value{font-weight:800;font-size:28px;line-height:1.1;color:var(--color-primary)}
.kpi .label{opacity:.85;margin-top:4px}
.progress{height:10px;background:#eef2f6;border-radius:999px;overflow:hidden;margin-top:10px}
.progress .bar{height:100%;background:linear-gradient(90deg,var(--color-secondary),#f7b543);width:0;border-radius:999px;transition:width .9s ease}
@media (max-width: 900px){.kpi-grid{grid-template-columns:1fr 1fr}}

/* Servicios (lista detallada en tarjetas simples) */
.srv-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:12px}
.srv{border:1px solid #e6edf2;border-radius:16px;padding:18px}
.srv h3{margin:0 0 6px;font-size:20px}
.srv p{margin:0}

/* Contacto (formulario + info en dos columnas) */
.contact{display:grid;grid-template-columns:1fr;gap:36px}
form{display:grid;gap:14px}
.row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
input,select,textarea{width:100%;padding:14px;border:1px solid #d9e3ea;border-radius:12px;font:inherit}
textarea{min-height:140px;resize:vertical}
.help{font-size:12px;opacity:.8}

/* Footer con fondo de color y texto claro */
footer{
  background:var(--color-secondary);
  color:#ffffff;
  margin-top:56px;
}
.footer-top{padding:36px 0;background:var(--color-secondary)}
.footer-top, .footer-top * { color: #fff !important; }

/* Slider simple en el footer (auto desplazamiento) */
.footer-slider{position:relative;overflow:hidden;border-radius:12px;margin-bottom:20px;height:160px;background:rgba(0,0,0,.12)}
.footer-slider-track{display:flex;width:400%;height:100%;animation:footer-slide 24s infinite ease-in-out}
.footer-slider img{width:100%;height:100%;object-fit:cover;flex:0 0 25%}
@keyframes footer-slide{
  0%,20%{transform:translateX(0)}
  25%,45%{transform:translateX(-25%)}
  50%,70%{transform:translateX(-50%)}
  75%,95%{transform:translateX(-75%)}
  100%{transform:translateX(0)}
}

/* Columnas y enlaces en footer */
.cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.ft-title{font-weight:800;margin-bottom:8px;color:#fff !important;}
.ft-list{list-style:none;margin:0;padding:0;display:grid;gap:8px;color:#fff !important;}
.socials{display:flex;gap:20px;margin-top:30px}
.socials a{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:10px;background:#ffffff;color:#ecb706 !important;}
.socials svg{width:30px;height:30px;fill:#f19800}
.footer-bottom{padding:1px 0;font-size:12px;opacity:.9;background:#8d5c02;text-align:center}

/* Espaciado seguro en footer para móviles */
@media (max-width: 900px){
  .footer-top{ 
    padding-left: max(20px, env(safe-area-inset-left));
    padding-right: max(20px, env(safe-area-inset-right));
  }
  .footer-bottom .container{
    padding-left: max(20px, env(safe-area-inset-left));
    padding-right: max(20px, env(safe-area-inset-right));
  }
}



/* Botón flotante de WhatsApp (versión ícono redondo)
   Al estar después, sus propiedades ganan por cascada sobre .wa-fab anterior. */
.wa-fab{position:fixed;right:18px;bottom:18px;width:56px;height:56px;display:grid;place-items:center;background:#25d366;color:#fff;box-shadow:0 6px 24px rgba(0,0,0,.2);z-index:60}
.wa-fab svg{width:28px;height:28px;fill:#fff}

/* Responsive: colapsa grids y oculta links en móviles */
@media (max-width: 1000px){
  .about{grid-template-columns:1fr}
  .contact{grid-template-columns:1fr}
}
@media (max-width: 900px){
  .nav-links{display:none} /* menú colapsado */
  .nav-cta{display:inline-flex}
  .hero-media{height:360px}
  .hero-ctas{gap:12px}
  .grid{grid-template-columns:1fr}
  .card{min-height:0}
  .srv-list{grid-template-columns:1fr}
  .row{grid-template-columns:1fr}
}
/* Botón hamburguesa y menú móvil */
.nav-toggle{display:none;align-items:center;justify-content:center;width:40px;height:40px;border-radius:10px;border:1px solid #e6edf2;background:#fff;color:var(--color-primary);cursor:pointer}
.nav-toggle svg{width:22px;height:22px}
.mobile-backdrop{display:none}
.mobile-menu{display:none}
.mobile-menu a{display:block;padding:12px 4px;border-bottom:1px solid #f2f5f8;font-weight:700}
.mobile-menu a:last-child{border-bottom:none}

/* Responsive refinements */
@media (max-width: 900px){
  .nav-cta{display:none}
  .nav-toggle{display:inline-flex}
  .hero-ctas{gap:12px;flex-wrap:wrap;padding:0 12px}
  .cols{grid-template-columns:1fr}
  /* Overlay oscuro + panel */
  .mobile-backdrop{display:block;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:48;opacity:0;transition:opacity .25s;pointer-events:none}
  .mobile-menu{display:block;position:fixed;left:0;right:0;top:0;background:#fff;border-bottom:1px solid #e6edf2;box-shadow:0 10px 28px rgba(0,0,0,.12);padding:76px 20px 14px;z-index:49;transform:translateY(-100%);opacity:0;transition:transform .28s ease, opacity .28s ease;will-change:transform}
  .navbar.menu-open .mobile-menu{transform:translateY(0);opacity:1}
  .navbar.menu-open ~ .mobile-backdrop, .navbar.menu-open .mobile-backdrop{opacity:1;pointer-events:auto}
}
@media (max-width: 600px){
  .hero-media{height:280px}
  .hero-band{padding:100px 0}
  .footer-slider{height:120px}
  .card{aspect-ratio:16/10}
}