/* ==== RESET GENERAL ==== */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Poppins', sans-serif;
  line-height: 1.6;
  color: #333;
  background-color: #f8f9fa;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.section-padding {
  padding: 80px 0;
}

/* ==== HEADER ==== */
.header {
  background-color: #fff;
  padding: 10px 0;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  position: sticky;
  top: 0;
  z-index: 1000;
  transition: transform .35s ease;
}

.nav-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav-menu {
  list-style: none;
  display: flex;
  gap: 18px;
  font-size: 0.95rem;
}

.nav-menu > li { position: relative; }

.nav-menu a {
  text-decoration: none;
  color: #333;
  font-weight: 600;
  transition: color 0.3s;
}

.nav-menu a:hover,
.nav-menu .active {
  color: #ff6600;
}

/* Dropdown */
.has-dropdown .dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  background: #fff;
  box-shadow: 0 10px 25px rgba(0,0,0,0.08);
  border-radius: 8px;
  padding: 10px 0;
  display: none;
  z-index: 1001;
}

.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown {
  display: block;
}

.dropdown li { list-style: none; }

.dropdown a {
  display: block;
  padding: 10px 16px;
  color: #333;
  white-space: nowrap;
}

.dropdown a:hover {
  background-color: #f5f7fa;
  color: #ff6600;
}

.logo img { max-height: 110px; }

/* ==== HERO ==== */
.hero {
  position: relative;
  color: white;
  padding: 70px 0;
  text-align: center;
  overflow: hidden;
}

.hero-bg,
.hero-swap {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

.hero-swap {
  opacity: 0;
  transition: opacity 0.5s ease;
  z-index: 0;
}

/* Overlay oscuro */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1;
}

/* Contenido por encima */
.hero-content {
  position: relative;
  z-index: 2;
  max-width: 700px;
  margin: 0 auto;
  padding: 10px;
}

.hero-content h1 {
  font-size: 2.7rem;
  margin-bottom: 15px;
}

.hero-content p {
  font-size: 1.1rem;
  margin-bottom: 25px;
  line-height: 1.6;
}

.hero-buttons {
  display: flex;
  justify-content: center;
  gap: 15px;
  flex-wrap: wrap;
}

/* ==== BUTTONS ==== */
.btn-primary,
.btn-secondary,
.btn-cta {
  padding: 12px 30px;
  border-radius: 5px;
  font-weight: bold;
  text-decoration: none;
  transition: 0.3s ease;
  border: none;
}

.btn-primary {
  background-color: #ff6600;
  color: #fff;
}
.btn-primary:hover {
  background: linear-gradient(to right, #7b2cbf, #ff6600);
}

.btn-secondary {
  background-color: transparent;
  color: #ff6600;
  position: relative;
  overflow: hidden;
  z-index: 0;
}
.btn-secondary::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, #7b2cbf, #ff6600);
  z-index: -1;
  opacity: 0;
  transition: opacity 0.3s ease;
  border-radius: 5px;
}
.btn-secondary:hover::before { opacity: 1; }
.btn-secondary:hover { color: #fff; }

.btn-cta {
  background-color: white;
  color: #7b2cbf;
}
.btn-cta:hover {
  background: linear-gradient(to right, #7b2cbf, #ff6600);
  color: #fff;
}

/* ==== SERVICES ==== */
.services-wrap {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 24px;
  align-items: start;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
  margin-top: 24px;
}

.services-grid.flip-grid {
  grid-template-columns: repeat(3, 1fr);
}

/* ==== FLIP CARDS ==== */
.flip-grid { perspective: 1200px; }
.flip-card { background: transparent; }

/* Altura dinámica con mínima amplia para que el botón nunca toque el borde */
.flip-inner {
  position: relative;
  width: 100%;
  height: auto;                /* antes: 360px */
  min-height: 480px;           /* ↑ más alta */
  transform-style: preserve-3d;
  transition: transform .5s cubic-bezier(.2,.8,.2,1);
  border-radius: 12px;
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
  cursor: pointer;
  background: #fff;
}

.flip-inner.is-flipped { transform: rotateY(180deg); }

.flip-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #fff;
  height: auto;                /* antes: 360px */
  min-height: inherit;         /* igual que el inner */
  padding-bottom: 40px;        /* colchón inferior visible */
}

.flip-face img {
  width: 100%;
  height: 240px;               /* ↑ imagen más alta */
  object-fit: cover;
  margin-bottom: 16px;
  border-bottom: 1px solid rgba(0,0,0,.06);
}

.flip-back { transform: rotateY(180deg); }

.flip-front { padding-bottom: 40px; }

.flip-front h3 {
  font-size: 1.2rem;
  margin: 16px 0 12px;
  text-align: center;
  padding: 0 12px;
}
.flip-front p {
  padding: 0 16px;
  color: #555;
  text-align: center;
  font-size: .95rem;
  margin-bottom: 12px;
}

/* Reverso con aire extra y botón separado del borde */
.flip-back-content {
  padding: 24px 20px 48px;     /* bottom grande para que no se pegue */
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  height: auto;
  flex: 1 1 auto;
}
.flip-back-content h4 { margin-bottom: 4px; }
.flip-back-content p  { font-size: 0.95rem; color: #555; }
.flip-back-content a  { margin-top: auto; margin-bottom: 12px; }

@media (hover: none), (pointer: coarse) {
  .flip-inner:hover { transform: none; }
}
.flip-inner:hover { transform: none; }

/* Altura mínima algo mayor en móvil para textos de 2 líneas */
@media (max-width: 768px){
  .flip-inner{ min-height: 500px; }
  .flip-face img{ height: 250px; }
}

/* ==== CTA ==== */
.cta-modern {
  background: linear-gradient(135deg, #ff6600, #7b2cbf);
  color: white;
  padding: 60px 20px;
}

.cta-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}

.cta-text h2 {
  font-size: 2.3rem;
  margin-bottom: 10px;
}
.cta-text p {
  font-size: 1.1rem;
  max-width: 500px;
}

/* ==== FOOTER ==== */
.footer {
  background-color: #222;
  color: #ccc;
  padding: 40px 0;
  font-size: 0.9rem;
}
.footer-sections {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
  padding-bottom: 20px;
  border-bottom: 1px solid #444;
}
.footer-column { flex: 1; min-width: 150px; }
.footer-column h4 { margin-bottom: 10px; color: #fff; }
.footer-column ul { list-style: none; padding: 0; }
.footer-column ul li { margin-bottom: 6px; }
.footer-column ul li a,
.footer-column.social a {
  color: #ccc;
  text-decoration: none;
  transition: color 0.3s;
}
.footer-column ul li a:hover,
.footer-column.social a:hover { color: #fff; }
.footer-bottom { text-align: center; margin-top: 20px; }

/* ==== RESPONSIVE ==== */
@media (max-width: 1024px) {
  .services-wrap { grid-template-columns: 1fr 360px; }
  .services-grid.flip-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .services-wrap { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .hero-content h1 { font-size: 2.2rem; }
  .hero-content p { font-size: 1rem; }

  /* ==== Botón hamburguesa ==== */
  .hamburger{
    display: inline-flex;
    background: none;
    border: 0;
    cursor: pointer;
    padding: 8px;
    width: 44px; height: 44px;
    align-items: center; justify-content: center;
    border-radius: 10px;
  }
  .hamburger span{
    display: block;
    width: 26px; height: 3px;
    border-radius: 2px; margin: 4px 0;
    background: linear-gradient(90deg, #7b2cbf, #ff6600);
    background-size: 200% 100%;
    transition: transform .3s ease, opacity .3s ease, background-position .4s ease;
  }
  .hamburger:hover span,
  .hamburger:focus-visible span{
    background-position: 100% 0;
  }
  .hamburger.is-active span{
    background: linear-gradient(90deg, #ff6600, #7b2cbf);
    background-size: 200% 100%;
  }
  .hamburger.is-active span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
  .hamburger.is-active span:nth-child(2){ opacity: 0; }
  .hamburger.is-active span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

  /* Panel del menú móvil */
  nav { position: relative; }

  .nav-menu {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 12px 24px rgba(0,0,0,.08);
    flex-direction: column; gap: 8px;
    padding: 12px 14px;
    max-height: 0;
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
    transition: max-height .35s ease, opacity .25s ease;
  }
  .nav-menu.is-open {
    max-height: 420px;
    opacity: 1;
    pointer-events: auto;
  }

  /* Franja superior degradada */
  .nav-menu::after {
    content:"";
    position:absolute;
    left:0; right:0; top:0;
    height:4px;
    border-radius: 12px 12px 0 0;
    background: linear-gradient(90deg, #7b2cbf, #ff6600);
    pointer-events: none;
  }

  /* Links más cómodos */
  .nav-menu a {
    padding: 10px 12px;
    border-radius: 8px;
  }
  .nav-menu a:hover {
    background-color: #f5f7fa;
    color: #ff6600;
  }

  /* Flip grid una columna */
  .services-grid.flip-grid { grid-template-columns: 1fr; }

  .cta-flex { flex-direction: column; align-items: center; text-align: center; }
  .cta-text p { max-width: 100%; }
}

/* Desktop: ocultar hamburguesa */
@media (min-width: 769px) {
  .hamburger { display: none; }
}

/* Header ocultable al deslizar */
.header.is-hidden { transform: translateY(-100%); }

/* Enlaces con gradiente */
.nav-menu a:hover,
.footer-column ul li a:hover,
.footer-column.social a:hover {
  background: linear-gradient(to right, #7b2cbf, #ff6600);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  transition: all 0.3s ease-in-out;
}

/* Anti-hover flip */
.flip-card:hover .flip-inner:not(.is-flipped),
.flip-inner:hover:not(.is-flipped) {
  transform: none !important;
}
.flip-inner.is-flipped { transform: rotateY(180deg); }

/* ===== OVERRIDE FINAL: forzar gradiente real en las barras ===== */
@media (max-width: 768px) {
  .hamburger span{
    background-image: linear-gradient(90deg, #7b2cbf, #ff6600) !important;
    background-size: 200% 100% !important;
    background-position: 0 0 !important;
    background-color: transparent !important;
  }
  .hamburger:hover span,
  .hamburger:focus-visible span{
    background-position: 100% 0 !important;
  }
  .hamburger.is-active span{
    background-image: linear-gradient(90deg, #ff6600, #7b2cbf) !important;
    background-size: 200% 100% !important;
    background-position: 100% 0 !important;
  }
}

/* ===== Quote page: CTA band (una sola definición, sin duplicados) ===== */
.quote-band{
  background: linear-gradient(135deg, #ff6600 0%, #7b2cbf 100%);
  color:#fff;
  padding: 64px 0;
  text-align: left;
}
.quote-band .container{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}
.quote-band h2{
  font-size: 2.4rem;
  line-height: 1.2;
  margin-bottom: 12px;
  color:#fff;
  font-weight:700;
}
.quote-band p{
  font-size: 1.125rem;
  color:#fff;
  opacity:.95;
}

/* ===== Formularios profesionales ===== */
.form-title{
  font-size: 1.8rem;
  margin-bottom: 16px;
  color:#111;
}

.form-card{
  background:#fff;
  border:1px solid #eaeaef;
  border-radius:16px;
  padding:24px;
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
}

.form-row{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap:16px;
  margin-bottom:16px;
}

.form-row .form-field{ grid-column: span 4; } /* 3 en fila desktop */
.form-field{ display:flex; flex-direction:column; gap:8px; }

.form-field label{
  font-size:.95rem;
  color:#333;
  font-weight:600;
}

.form-field input,
.form-field select,
.form-field textarea{
  appearance:none;
  width:100%;
  border:1px solid #e5e7eb;
  background:#fff;
  border-radius:12px;
  padding:12px 14px;
  font-size:1rem;
  outline:none;
  transition:border-color .2s ease, box-shadow .2s ease;
}

/* Más anchos para campos de 1 columna */
.form-card > .form-field{ margin-bottom:16px; }

.form-field textarea{ resize:vertical; min-height:120px; }

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus{
  border-color: #1a2fb2; /* var(--main-blue) si la defines */
  box-shadow: 0 0 0 4px rgba(26,47,178,.1);
}

/* Estados válidos/errores simples */
.form-field input:required:invalid,
.form-field select:required:invalid{
  border-color:#f1b4b4;
}
.form-field input:required:valid,
.form-field select:required:valid{
  border-color:#b7d1ff;
}

.form-actions{
  display:flex;
  justify-content:flex-end;
  gap:12px;
  margin-top:8px;
}

/* Resultado del estimador */
.estimate-result{
  margin-top:16px;
  background:#f7fafc;
  border:1px dashed #c3d4ff;
  color:#1f2937;
  border-radius:12px;
  padding:16px;
}

/* Responsive */
@media (max-width: 992px){
  .form-row .form-field{ grid-column: span 6; } /* 2 por fila */
}
@media (max-width: 600px){
  .form-row .form-field{ grid-column: span 12; } /* 1 por fila */
  .quote-band{ padding: 44px 0; }
  .quote-band h2{ font-size: 2rem; }
}

/* ===== Estados de envío y mensajes (pedido) ===== */
/* Spinner SOLO en botones de envío */
.btn-submit.is-loading{
  position: relative;
  pointer-events: none;
  opacity: .85;
}
.btn-submit.is-loading::after{
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-left: 8px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-left-color: transparent;
  animation: spin .8s linear infinite;
  vertical-align: -2px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Botones no-submit bloqueados (sin spinner) */
.is-disabled{
  pointer-events: none !important;
  opacity: .6 !important;
  filter: grayscale(10%);
}

/* Mensajes */
.form-msg{ margin-top:10px; font-weight:600; display:none; }
.form-msg.success{ color:#0a7c2f; }
.form-msg.error{ color:#b42318; }


/* Asegura que, al anclar, los botones no queden debajo del header sticky */
#quote-toggles { scroll-margin-top: 120px; } /* ajusta 120px si tu header es más/menos alto */
/* margen de anclaje para no quedar debajo del header */
#quote-toggles { scroll-margin-top: 140px; } /* ajusta 140 si tu header es más/menos alto */



/* Hero de la página de Quote con imagen + degradado de marca */
.hero-quote{
  position: relative;
  color:#fff;
  text-align:center;
  padding: 120px 20px;           /* igual que tu hero */
  min-height: 46vh;              /* presencia sin ser gigante */
  background:
    linear-gradient(135deg, rgba(255,102,0,.55), rgba(123,44,191,.55)),
    url('assets/images/quote-hero.jpg') center 35% / cover no-repeat;
}
.hero-quote .hero-content h1{
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 12px;
  text-shadow: 0 2px 8px rgba(0,0,0,.25);
}
.hero-quote .hero-content p{
  font-size: 1.2rem;
  max-width: 760px;
  margin: 0 auto;
  opacity: .95;
}

/* Si el header sticky tapa al hacer scroll anclado, deja margen */
.hero-quote { scroll-margin-top: 120px; }

/* Responsive pequeño */
@media (max-width: 768px){
  .hero-quote{ min-height: 38vh; padding: 90px 16px; }
  .hero-quote .hero-content h1{ font-size: 2.3rem; }
  .hero-quote .hero-content p{ font-size: 1.05rem; }
}


/* ===== Services Page ===== */

/* Hero de servicios con degradado de marca sobre imagen */
.hero.hero-services{
  padding: 100px 0;
  min-height: 46vh;
  background:
    linear-gradient(135deg, rgba(255,102,0,.55), rgba(123,44,191,.55)),
    url('assets/images/hero-bg.jpg') center/cover no-repeat;
}

/* Barra de tabs (usa tus botones .btn-*) */
.tabs-bar{
  display:flex; gap:10px; flex-wrap:wrap; justify-content:center;
  margin:24px 0 6px;
}
.tab-btn{
  appearance:none; /* quitar estilo nativo del <button> */
  display:inline-block;
  border:none;
  border-radius:999px;
  padding:12px 18px;
  font-weight:700;
  cursor:pointer;
}
.tab-btn.is-active.btn-primary{ border-radius:999px; }
/* evita overlay del secondary cuando está activo */
.tab-btn.is-active.btn-secondary::before{ opacity:0 !important; }
.tab-btn:focus-visible{
  outline: 3px solid rgba(26,47,178,.25);
  outline-offset: 2px;
}

/* Paneles */
.tabs-panels{ margin-top:22px; }
.tab-panel{ display:none; }
.tab-panel.is-active{ display:block; }

/* Layout del contenido del servicio */
.service-wrap{
  display:grid; grid-template-columns: 520px 1fr;
  gap:28px; align-items:center;
  background:#fff; border-radius:16px; padding:20px;
  box-shadow:0 10px 24px rgba(0,0,0,.06);
}
.service-media img{
  width:100%; height:340px; object-fit:cover; border-radius:12px;
}
.service-copy h3{ font-size:1.8rem; margin-bottom:8px; }
.service-copy p{ color:#555; margin-bottom:10px; }
.service-list{ margin:10px 0 14px 18px; }
.service-list li{ margin:6px 0; }
.service-cta{ display:flex; gap:12px; flex-wrap:wrap; }

/* FAQ ligera */
.faq{
  margin:16px auto 0;
  max-width:980px;
  background:#fafbff;
  border:1px solid #eaeaef;
  border-radius:12px;
  padding:12px 16px;
}
.faq summary{ font-weight:700; cursor:pointer; }
.faq p{ margin-top:8px; color:#444; }

/* Responsive */
@media (max-width: 1024px){
  .service-wrap{ grid-template-columns: 1fr; }
  .service-media img{ height:300px; }
}
@media (max-width: 768px){
  .hero.hero-services{ min-height: 38vh; padding: 80px 0; }
  .tab-btn{ padding:10px 14px; }
}

.tab-panel,
#services-tabs {
  scroll-margin-top: 140px; /* ajusta si tu header cambia de alto */
}

#services-tabs, .tab-panel { scroll-margin-top: 140px; }


/* ===== About page ===== */
.hero.hero-about{
  padding: 100px 0;
  min-height: 46vh;
  color:#fff;
  background:
    linear-gradient(135deg, rgba(255,102,0,.55), rgba(123,44,191,.55)),
    url('assets/images/about-hero.jpg') center/cover no-repeat;
}

/* Story layout */
.about-grid{
  display:grid;
  grid-template-columns: 520px 1fr;
  gap:28px; align-items:center;
  background:#fff; border:1px solid #eaeaef; border-radius:16px; padding:20px;
  box-shadow:0 10px 24px rgba(0,0,0,.06);
}
.about-photo img{ width:100%; height:360px; object-fit:cover; border-radius:12px; }
.about-text h2{ font-size:1.9rem; margin-bottom:8px; }

/* Certs */
.about-certs{
  display:grid; gap:14px;
  grid-template-columns: repeat(auto-fit, minmax(240px,1fr));
  margin-top:12px;
}
.cert-card{
  background:#fff; border:1px solid #eaeaef; border-radius:14px; padding:16px;
  box-shadow:0 10px 24px rgba(0,0,0,.04);
}
.cert-card h4{ margin-bottom:6px; }

/* Features / highlights */
.features-grid{
  display:grid; gap:16px;
  grid-template-columns: repeat(auto-fit, minmax(260px,1fr));
  margin-top:12px;
}
.feature-card{
  background:#fff; border:1px solid #eaeaef; border-radius:14px; padding:16px;
  box-shadow:0 10px 24px rgba(0,0,0,.04); text-align:left;
}
.feature-img{ width:100%; height:180px; object-fit:cover; border-radius:10px; margin-bottom:10px; }

/* Badges */
.badge-row{ display:flex; gap:10px; flex-wrap:wrap; }
.badge{
  background:#f7fafc; border:1px solid #eaeaef; padding:8px 12px; border-radius:999px;
  font-weight:600; font-size:.95rem;
}

/* Testimonials */
.testimonials-grid{
  display:grid; gap:16px;
  grid-template-columns: repeat(auto-fit, minmax(260px,1fr));
  margin-top:10px;
}
.testimonial{
  background:#fff; border:1px solid #eaeaef; border-radius:14px; padding:18px;
  box-shadow:0 10px 24px rgba(0,0,0,.04);
}
.testimonial footer{ margin-top:8px; font-weight:700; color:#333; }

/* Responsive */
@media (max-width:1024px){
  .about-grid{ grid-template-columns: 1fr; }
  .about-photo img{ height:300px; }
}
@media (max-width:768px){
  .hero.hero-about{ min-height: 38vh; padding: 80px 0; }
}


/* ===== Contact page ===== */
.hero.hero-contact{ padding:100px 0; min-height:42vh; color:#fff; }
.contact-info{
  display:grid; gap:16px;
  grid-template-columns: repeat(auto-fit, minmax(240px,1fr));
}
.info-card{ background:#fff; border:1px solid #eaeaef; border-radius:14px; padding:18px;
  box-shadow:0 10px 24px rgba(0,0,0,.04); }
.info-card h3{ margin-bottom:6px; }

.contact-grid{ display:grid; gap:22px; align-items:start; grid-template-columns: 1.1fr .9fr; }
.map-wrap{ background:#fff; border:1px solid #eaeaef; border-radius:16px; padding:10px;
  box-shadow:0 10px 24px rgba(0,0,0,.06); overflow:hidden; }
.map-wrap iframe{ width:100%; height:420px; border:0; border-radius:12px; }

.hours{ list-style:none; padding:0; margin:6px 0 0; }
.hours li{ display:flex; justify-content:space-between; gap:12px; padding:4px 0; border-bottom:1px dashed #eee; }
.hours li:last-child{ border-bottom:0; }

@media (max-width:1024px){ .contact-grid{ grid-template-columns:1fr; } .map-wrap iframe{ height:360px; } }
@media (max-width:768px){ .hero.hero-contact{ min-height:36vh; padding:80px 0; } }


/* ===== Contact page polishes ===== */
.hero.hero-contact{
  padding: 110px 0;
  min-height: 44vh;
  color:#fff;
}

/* Cards */
.contact-info{
  display:grid; gap:18px;
  grid-template-columns: repeat(auto-fit, minmax(260px,1fr));
}
.info-card{
  background:#fff;
  border:1px solid #eaeaef;
  border-radius:16px;
  padding:18px;
  box-shadow: 0 14px 28px rgba(0,0,0,.06);
  position: relative;
}
.info-card::before{
  content:"";
  position:absolute; left:0; right:0; top:0; height:4px;
  border-radius:16px 16px 0 0;
  background: linear-gradient(90deg,#ff6600,#7b2cbf);
}
.info-top{ display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.info-icon{ font-size:1.35rem; line-height:1; }
.info-actions{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.btn-mini{
  display:inline-block; padding:8px 12px; border-radius:8px;
  border:1px solid #e5e7eb; text-decoration:none; font-weight:600; font-size:.95rem;
  color:#7b2cbf; background:#fff; transition:.2s ease;
}
.btn-mini:hover{ background:#f5f7fa; }

/* Form + Map grid */
.contact-grid{ display:grid; gap:24px; align-items:start; grid-template-columns: 1.1fr .9fr; }
.map-wrap{
  background:#fff; border:1px solid #eaeaef; border-radius:16px; padding:10px;
  box-shadow:0 10px 24px rgba(0,0,0,.06); overflow:hidden;
}
.map-wrap iframe{ width:100%; height:420px; border:0; border-radius:12px; }

/* Floating Call Button */
.fab-call{
  position: fixed; right: 20px; bottom: 20px;
  z-index: 11000;
  background: linear-gradient(135deg,#ff6600,#7b2cbf);
  color:#fff; text-decoration:none; font-weight:800;
  padding:12px 16px; border-radius:999px; box-shadow:0 12px 28px rgba(0,0,0,.18);
  display:flex; align-items:center; gap:10px;
}
.fab-ico{ font-size:1.1rem; }

/* Hours list */
.hours{ list-style:none; padding:0; margin:6px 0 0; }
.hours li{ display:flex; justify-content:space-between; gap:12px; padding:6px 0; border-bottom:1px dashed #eee; }
.hours li:last-child{ border-bottom:0; }

@media (max-width: 1024px){
  .contact-grid{ grid-template-columns: 1fr; }
  .map-wrap iframe{ height:360px; }
}
@media (max-width: 768px){
  .hero.hero-contact{ min-height: 38vh; padding: 88px 0; }
}


/* ===== Contact page (mejoras) ===== */
.hero.hero-contact{
  padding:110px 0;
  min-height:44vh;
  color:#fff;
}

/* Grid de info */
.contact-info{
  display:grid; gap:18px;
  grid-template-columns: repeat(auto-fit, minmax(260px,1fr));
}
.info-card{
  background:#fff;
  border:1px solid #eaeaef;
  border-radius:16px;
  padding:18px;
  box-shadow:0 14px 28px rgba(0,0,0,.06);
  position:relative;
}
.info-card::before{
  content:"";
  position:absolute; left:0; right:0; top:0; height:4px;
  border-radius:16px 16px 0 0;
  background:linear-gradient(90deg,#ff6600,#7b2cbf);
}
.info-top{ display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.info-icon{ font-size:1.35rem; line-height:1; }
.info-actions{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }

/* Mini botones con icono */
.btn-mini{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px; border-radius:8px;
  border:1px solid #e5e7eb; text-decoration:none; font-weight:600; font-size:.95rem;
  color:#7b2cbf; background:#fff; transition:.2s ease;
}
.btn-mini:hover{ background:#f5f7fa; }
.btn-mini .ico{ width:18px; height:18px; display:block; fill:currentColor; }

/* Social links con icono */
.social-link{
  display:inline-flex; align-items:center; gap:10px;
  text-decoration:none; font-weight:600;
}
.social-link .ico{ width:18px; height:18px; fill:currentColor; }
.social-link:hover{ text-decoration:underline; }

/* Form + Map grid */
.contact-grid{ display:grid; gap:24px; align-items:start; grid-template-columns: 1.1fr .9fr; }
.map-wrap{
  background:#fff; border:1px solid #eaeaef; border-radius:16px; padding:10px;
  box-shadow:0 10px 24px rgba(0,0,0,.06); overflow:hidden;
}
.map-wrap iframe{ width:100%; height:420px; border:0; border-radius:12px; }

/* Horarios */
.hours{ list-style:none; padding:0; margin:6px 0 0; }
.hours li{ display:flex; justify-content:space-between; gap:12px; padding:6px 0; border-bottom:1px dashed #eee; }
.hours li:last-child{ border-bottom:0; }

/* FAB de llamada (icono blanco) */
.fab-call{
  position:fixed; right:20px; bottom:20px; z-index:11000;
  background:linear-gradient(135deg,#ff6600,#7b2cbf);
  color:#fff; text-decoration:none; font-weight:800;
  padding:12px 16px; border-radius:999px; box-shadow:0 12px 28px rgba(0,0,0,.18);
  display:flex; align-items:center; gap:10px;
}
.fab-call .fab-ico{ width:18px; height:18px; flex:0 0 18px; }

/* Mostrar botón “Text” solo en móvil */
.only-mobile{ display:inline-flex; }
@media (hover: hover) and (pointer: fine){ .only-mobile{ display:none !important; } }

@media (max-width:1024px){
  .contact-grid{ grid-template-columns:1fr; }
  .map-wrap iframe{ height:360px; }
}
@media (max-width:768px){
  .hero.hero-contact{ min-height:38vh; padding:88px 0; }
}


/* ===== FAQ page ===== */
.hero.hero-faq{
  padding: 110px 0;
  min-height: 40vh;
  color:#fff;
}

.faq-acc{
  max-width: 980px;
  margin: 22px auto 0;
}
.faq-group{
  font-size: 1.15rem;
  margin: 28px 0 10px;
  color:#111;
}

/* details/summary accesibles y bonitos */
.faq-item{
  background:#fff;
  border:1px solid #ececf3;
  border-radius:14px;
  margin:10px 0;
  box-shadow:0 10px 24px rgba(0,0,0,.05);
  overflow:hidden;
}
.faq-item summary{
  list-style:none;
  cursor:pointer;
  padding:16px 18px;
  font-weight:700;
  display:flex; align-items:center; gap:12px;
}
.faq-item summary::-webkit-details-marker{ display:none; }

/* caret */
.faq-item summary::before{
  content:"";
  width:10px; height:10px; border-right:2px solid #7b2cbf; border-bottom:2px solid #7b2cbf;
  transform: rotate(-45deg);
  transition: transform .25s ease;
}
.faq-item[open] summary::before{ transform: rotate(45deg); }

/* border-top color bar */
.faq-item::after{
  content:"";
  display:block; height:3px; background:linear-gradient(90deg,#ff6600,#7b2cbf);
}

/* contenido */
.faq-content{
  padding:0 18px 18px;
  color:#444;
}
.faq-content p + p{ margin-top:8px; }

/* anclajes: que no queden debajo del header sticky */
#faq .faq-item{ scroll-margin-top: 120px; }

@media (max-width:768px){
  .hero.hero-faq{ min-height: 36vh; padding: 90px 0; }
}


/* ===== Warranty page ===== */
.hero.hero-warranty{
  padding: 110px 0;
  min-height: 40vh;
  color:#fff;
}

/* Table */
.warranty-table-wrap{
  margin-top: 14px;
  background:#fff; border:1px solid #ececf3; border-radius:16px;
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
  overflow: hidden;
}
.warranty-table{
  width:100%; border-collapse: collapse; font-size: .98rem;
}
.warranty-table thead th{
  text-align:left; padding:14px 16px; background:#fafbff; border-bottom:1px solid #ececf3;
}
.warranty-table tbody td{
  padding:14px 16px; border-top:1px solid #f1f2f6; vertical-align: top;
}
.warranty-table tbody tr:nth-child(odd) td{ background:#fff; }
.warranty-table tbody tr:nth-child(even) td{ background:#fcfdff; }

/* Covered / Not covered cards */
.warranty-inout{
  display:grid; gap:18px; margin-top:18px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.w-card{
  background:#fff; border:1px solid #eaeaef; border-radius:16px; padding:18px;
  box-shadow:0 10px 24px rgba(0,0,0,.06);
}
.w-card.good h3{ color:#0a7c2f; }
.w-card.bad  h3{ color:#b42318; }
.w-card ul{ margin-left:18px; }

/* Terms details */
.w-terms{ max-width: 980px; margin-top: 10px; }
.w-term{
  background:#fff; border:1px solid #ececf3; border-radius:14px; margin:10px 0;
  box-shadow:0 10px 24px rgba(0,0,0,.05); overflow:hidden;
}
.w-term summary{
  list-style:none; cursor:pointer; padding:16px 18px; font-weight:700;
  display:flex; align-items:center; gap:12px;
}
.w-term summary::-webkit-details-marker{ display:none; }
.w-term summary::before{
  content:""; width:10px; height:10px; border-right:2px solid #7b2cbf; border-bottom:2px solid #7b2cbf;
  transform: rotate(-45deg); transition: transform .25s ease;
}
.w-term[open] summary::before{ transform: rotate(45deg); }
.w-term-content{ padding: 0 18px 16px; color:#444; }

/* Tips list */
.w-tips ul{ margin-left: 18px; }

/* Anchor offset (sticky header) */
#coverage, #claim, .w-term { scroll-margin-top: 120px; }

@media (max-width:768px){
  .hero.hero-warranty{ min-height:36vh; padding: 90px 0; }
}


/* ===== Support page ===== */
.hero.hero-support{
  padding:110px 0;
  min-height:40vh;
  color:#fff;
}

/* Quick links tiles */
.support-tiles{
  display:grid; gap:18px;
  grid-template-columns: repeat(auto-fit, minmax(220px,1fr));
}
.s-tile{
  background:#fff; border:1px solid #eaeaef; border-radius:16px; padding:18px;
  text-decoration:none; color:#111;
  box-shadow:0 10px 24px rgba(0,0,0,.06);
  display:flex; flex-direction:column; gap:8px;
  transition: transform .18s ease, box-shadow .18s ease;
}
.s-tile:hover{
  transform: translateY(-2px);
  box-shadow:0 14px 30px rgba(0,0,0,.08);
}
.s-emoji{ font-size:1.6rem; }

/* SLA cards */
.sla-grid{
  display:grid; gap:18px;
  grid-template-columns: repeat(auto-fit, minmax(260px,1fr));
  margin-top:10px;
}
.sla-card{
  background:#fff; border:1px solid #eaeaef; border-radius:16px; padding:18px;
  box-shadow:0 10px 24px rgba(0,0,0,.06);
}
.sla-head{ display:flex; align-items:center; gap:10px; margin-bottom:6px; }
.sla-dot{
  width:10px; height:10px; border-radius:50%;
  display:inline-block;
}
.sla-dot.ok{ background:#16a34a; }    /* green */
.sla-dot.warn{ background:#f59e0b; }  /* amber */
.sla-dot.info{ background:#3b82f6; }  /* blue */

/* Downloads */
.downloads{ margin-top:18px; }
.downloads h3{ margin-bottom:8px; }
.dl-list{ list-style:none; padding:0; margin:0; }
.dl-list li{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:10px 12px; border:1px solid #ededf4; border-radius:12px;
  background:#fff; box-shadow:0 6px 14px rgba(0,0,0,.04); margin-bottom:10px;
}
.dl-title{ font-weight:600; }
.dl-note{ margin-top:8px; color:#555; }

/* Anchor offset */
#selfhelp, #ticket { scroll-margin-top: 120px; }

@media (max-width:768px){
  .hero.hero-support{ min-height:36vh; padding:90px 0; }
}


/* Legal pages (Privacy, Terms, etc.) */
.hero.hero-legal {
  padding: 100px 0;
  color: #fff;
  text-align: center;
}

.legal-text {
  max-width: 800px;
  margin: 0 auto;
  line-height: 1.7;
  font-size: 1rem;
  color: #333;
}

.legal-text h2 {
  margin-top: 28px;
  margin-bottom: 10px;
  font-size: 1.4rem;
  font-weight: 600;
  color: #222;
}


/* ==== SITEMAP ==== */
.sitemap-list,
.sitemap-list ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sitemap-list li {
  margin: 8px 0;
}

.sitemap-list a {
  text-decoration: none;
  color: #333;
  font-weight: 500;
  transition: color 0.3s ease;
}

.sitemap-list a:hover {
  color: #ff6600;
}

/* Sección del sitemap */
section .container ul {
  margin-bottom: 24px;
}

section .container h2 {
  font-size: 1.4rem;
  margin: 20px 0 12px;
  color: #7b2cbf;
  border-bottom: 2px solid #eee;
  padding-bottom: 6px;
}

/* Diseño responsive */
@media (min-width: 768px) {
  .sitemap-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}


/* =========================
   Projects page
   ========================= */

/* HERO */
.hero--projects{
  min-height:56vh;
  display:grid;
  place-items:center;
  text-align:center;
  color:#fff;
  background:
    linear-gradient(135deg, rgba(23,23,23,.55), rgba(92,29,207,.55)),
    url("../assets/images/hero-projects.jpg") center/cover no-repeat;
}
.hero--projects .hero-content{max-width:920px}
.hero--projects h1{font-size:clamp(2rem,5vw,3.25rem)}
.hero--projects p{opacity:.95}

/* FILTROS */
.filter-bar{
  display:flex; gap:.5rem; flex-wrap:wrap;
  align-items:center; justify-content:center;
  margin-top:1.25rem;
}
.filter-btn{
  border:1px solid rgba(0,0,0,.12);
  background:#fff;
  padding:.55rem .9rem;
  border-radius:999px;
  font-weight:600; font-size:.95rem;
  transition:transform .15s ease, box-shadow .2s ease, background .2s;
  cursor:pointer;
}
.filter-btn:hover{transform:translateY(-1px); box-shadow:0 6px 18px rgba(0,0,0,.08)}
.filter-btn.is-active{background:#ff6a00; color:#fff; border-color:transparent}

/* GRID */
.projects-grid{
  --cols:3;
  display:grid;
  grid-template-columns:repeat(var(--cols),1fr);
  gap:18px;
}
@media (max-width:1024px){.projects-grid{--cols:2}}
@media (max-width:640px){.projects-grid{--cols:1}}

/* CARD */
.project-card{
  position:relative; isolation:isolate;
  border-radius:14px; overflow:hidden; background:#fff;
  box-shadow:0 10px 28px rgba(0,0,0,.06);
  transition:transform .25s ease, box-shadow .25s ease;
}
.project-card img{
  width:100%; height:270px; object-fit:cover; display:block;
  transition:transform .35s ease;
}
.project-card:hover{transform:translateY(-4px); box-shadow:0 14px 38px rgba(0,0,0,.10)}
.project-card:hover img{transform:scale(1.05)}
.project-meta{
  position:absolute; left:0; right:0; bottom:0;
  background:linear-gradient(180deg, transparent, rgba(0,0,0,.72));
  color:#fff; padding:18px 16px 14px;
}
.project-title{font-weight:700; font-size:1.05rem}
.project-tags{font-size:.85rem; opacity:.9}

/* Oculto para filtro */
.is-hidden{display:none !important}

/* LIGHTBOX */
.lightbox{
  position:fixed; inset:0; display:none;
  background:rgba(0,0,0,.85);
  z-index:1000; padding:24px;
  align-items:center; justify-content:center;
}
.lightbox.is-open{display:flex}
.lightbox__img{
  max-width:min(1200px,92vw);
  max-height:86vh;
  border-radius:10px;
  box-shadow:0 20px 60px rgba(0,0,0,.5);
}
.lightbox__caption{color:#fff; margin-top:12px; text-align:center; font-weight:600}
.lightbox__close, .lightbox__nav{
  position:absolute; color:#fff;
  background:rgba(255,255,255,.14);
  border:none; width:42px; height:42px; border-radius:999px;
  display:grid; place-items:center; cursor:pointer;
  backdrop-filter:blur(3px);
}
.lightbox__close{top:16px; right:16px; font-size:22px}
.lightbox__nav.prev{left:16px}
.lightbox__nav.next{right:16px}

/* Accesibilidad/motion */
@media (prefers-reduced-motion: reduce){
  .filter-btn, .project-card, .project-card img{transition:none}
}


/* CTA suave para Projects */
.cta-soft{
  margin: 48px 0 0;        /* separa del grid */
  padding: 56px 0;         /* aire vertical */
  background: linear-gradient(135deg,#fafafa,#f3f5f9);
  border-top: 1px solid rgba(0,0,0,.05);
}

.cta-soft .cta-content{
  text-align:left;         /* o center si prefieres */
  max-width: 860px;
}

.cta-soft .btn-primary{
  margin-top: 16px;
}

/* Oculta el caption del lightbox */
.lightbox__caption {
  display: none !important;
}


/* === CONTACT CARDS: que NO se estiren todas === */

/* Si el contenedor usa CSS Grid */
.contact-info { align-items: start !important; }

/* Si usa Flexbox en algún breakpoint */
.contact-info { align-items: flex-start !important; }

/* Asegura que las cards tengan altura AUTO (no "100%") */
.contact-info .info-card {
  height: auto !important;
  align-self: start !important;  /* evita que estire en grid/flex */
}

/* ====== SOLO para la card de Email (compacta y limpia) ====== */
.info-card .email-rows{ display:flex; flex-direction:column; gap:12px; }

.info-card .email-row{
  border:1px solid #e5e7eb; border-radius:12px; background:#fff;
  padding:12px; /* compacto */
}

.info-card .email-head{
  display:flex; align-items:center; gap:8px;
  margin-bottom:8px;
}

.info-card .email-body{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  flex-wrap:wrap; /* wrap en móvil */
}

.info-card .email-address{
  font-weight:600; text-decoration: underline;
  flex:1 1 auto; min-width: 220px;
  overflow-wrap:anywhere; /* emails largos no rompen */
}

.info-card .email-action{ flex:0 0 auto; }

.info-card .badge{
  font-size:.75rem; padding:4px 8px; border-radius:999px;
  background:#e5e7eb; color:#111827; line-height:1; white-space:nowrap;
}
.info-card .badge.primary{ background:#dbeafe; color:#1e40af; }

.info-card .email-note{ margin-top:10px; color:#4b5563; }

/* En pantallas chicas: botón debajo del email */
@media (max-width: 480px){
  .info-card .email-body{ flex-direction:column; align-items:flex-start; gap:8px; }
}

/* --- Ajustes de título y separación --- */
#projects-tabs h2 { 
  margin-bottom: 8px;         /* antes era mayor */
}
#projects-tabs { 
  padding-top: 24px;
  padding-bottom: 8px;        /* menos aire debajo del menú */
}
.projects-gallery { 
  padding-top: 12px;          /* reduce hueco encima de la galería */
}

/* --- Menú en UNA sola línea, con scroll horizontal en móviles --- */
.tabs-bar{
  display: flex;
  gap: .5rem;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;          /* clave: no permite salto de línea */
  overflow-x: auto;           /* si no cabe, scroll lateral */
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  padding-bottom: .25rem;
  margin-top: .5rem;
}
.tab-btn{
  white-space: nowrap;        /* evita que se partan los textos */
  padding: .45rem .8rem;      /* un pelín más compacto */
  font-size: .92rem;
  scroll-snap-align: start;
}

/* (Opcional) estiliza la barra de scroll fina en desktop */
.tabs-bar::-webkit-scrollbar{ height: 8px; }
.tabs-bar::-webkit-scrollbar-thumb{ background: rgba(0,0,0,.15); border-radius: 999px; }
.tabs-bar{ scrollbar-color: rgba(0,0,0,.15) transparent; scrollbar-width: thin; }

/* Mantén el look activo */
.tab-btn.is-active{
  background: var(--btn-primary-bg, #ff6a00);
  color: #fff; border-color: transparent;
}


/* === Servicios: corregir "huérfana" al final del grid === */
.flip-grid {
  display: grid;
  gap: 24px;
}

/* Desktop: 3 columnas */
@media (min-width: 1024px) {
  .flip-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  /* Si el último item queda solo (total = 3n+1), céntralo en la columna 2 */
  .flip-grid > .flip-card:nth-last-child(1):nth-child(3n + 1) {
    grid-column: 2;
  }
}

/* Tablet: 2 columnas */
@media (min-width: 640px) and (max-width: 1023.98px) {
  .flip-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* Si el último queda solo (total impar), que abarque las 2 columnas */
  .flip-grid > .flip-card:nth-last-child(1):nth-child(odd) {
    grid-column: 1 / -1;
  }
}

/* Móvil: 1 columna (ya se ve bien por defecto) */
@media (max-width: 639.98px) {
  .flip-grid {
    grid-template-columns: 1fr;
  }
}