/* =====================
   Diseño minimalista plano
   ===================== */
 :root {
    --primary: #103839;      /* color dominante */
    --secondary: #c19e62;    /* detalles elegantes */
    --bg: #f5f7f6;           /* fondo general */
    --bg-alt: #ffffff;       /* superficies */
    --bg-soft: #eef1f0;      /* fondos suaves */
    --text: #1d2b2c;         /* texto principal */
    --text-soft: #566465;    /* texto secundario */
    --text-invert: #f9f9f8;  /* sobre primario */
    --border: #d6dddd;       /* líneas suaves */
    --radius-sm: 4px;
    --radius: 8px;
    --radius-pill: 999px;
    --transition: .25s ease;
 }

 * { box-sizing: border-box; margin:0; padding:0; }
 html { scroll-behavior: smooth; }
 body { font-family: 'Lato', system-ui, -apple-system, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: var(--bg); color: var(--text); line-height:1.55; -webkit-font-smoothing: antialiased; }
 img { max-width:100%; display:block; }

 .skip-link { position:absolute; left:-999px; top:0; background:var(--secondary); color:#222; padding:.6rem 1rem; z-index:100; border-radius:var(--radius-sm); }
 .skip-link:focus { left:.6rem; top:.6rem; }

 /* Header */
 .site-header { background: var(--primary); text-align:center; padding:2.1rem 1rem 1.9rem; color:var(--text-invert); }
 .profile-container { display:flex; flex-direction:column; align-items:center; gap:.6rem; }
 .profile-img { width:140px; height:140px; border-radius:50%; object-fit:cover; border:3px solid var(--secondary); }
 .logo { font-size:clamp(2rem,4vw,2.5rem); font-weight:600; letter-spacing:.5px; color:white; }
 .subtitle { font-size:1rem; font-weight:400; opacity:.85; }
 .taglines { margin-top:.5rem; display:grid; gap:.25rem; }
 .tagline { font-style:italic; font-size:.95rem; opacity:.9; }

/* Header actions & fade */
.header-actions { margin-top:1rem; }
.header-cta-jump { display:inline-block; background:var(--secondary); color:var(--primary); text-decoration:none; font-weight:600; padding:.55rem 1.1rem; border-radius:var(--radius-pill); font-size:.8rem; letter-spacing:.4px; transition:var(--transition); }
.header-cta-jump:hover, .header-cta-jump:focus-visible { background:var(--primary); color:var(--text-invert); outline:none; border:1px solid var(--secondary); }
.header-fade { height:64px; margin:0; background:linear-gradient(to bottom, var(--primary) 0%, var(--primary) 30%, var(--bg) 100%); }

 /* Layout */
 .main { padding:0 0 2.2rem; }
 .container { max-width:1120px; margin:0 auto; padding:2rem 1.1rem; }
 .section-title { text-align:center; margin:0 0 1.8rem; font-size:clamp(1.5rem,3vw,2rem); font-weight:600; color:var(--primary); letter-spacing:.5px; }

 /* Services */
 .services { display:grid; gap:1.6rem; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
 .service-card { background:var(--bg-alt); border:1px solid var(--border); border-radius:var(--radius); padding:1.1rem 1.05rem 1.3rem; display:flex; flex-direction:column; gap:.65rem; transition:var(--transition); }
 .service-card:hover, .service-card:focus-within { border-color:var(--secondary); box-shadow:0 2px 6px rgba(0,0,0,0.06); transform:translateY(-3px); }
 .service-header { padding:0; }
 .service-title { font-size:1.05rem; display:flex; align-items:center; gap:.5rem; color:var(--primary); font-weight:600; letter-spacing:.4px; }
 .service-content { display:flex; flex-direction:column; gap:.4rem; }
 .service-description { background:var(--bg-soft); border-left:3px solid var(--secondary); padding:.85rem .85rem .9rem; border-radius:var(--radius-sm); font-style:italic; font-size:.9rem; line-height:1.45; color:var(--text-soft); }
 .benefits { list-style:none; display:flex; flex-wrap:wrap; gap:.45rem; margin:.2rem 0 0; }
 .benefit-tag { background:var(--bg); border:1px solid var(--border); color:var(--primary); font-size:.68rem; padding:.33rem .6rem; border-radius:var(--radius-pill); display:inline-flex; align-items:center; gap:.35rem; font-weight:600; letter-spacing:.3px; transition:var(--transition); }
 .benefit-tag i { color:var(--secondary); font-size:.75rem; }
 .benefit-tag:hover, .benefit-tag:focus-visible { background:var(--primary); color:var(--text-invert); outline:none; border-color:var(--primary); }
 .benefit-tag:hover i { color:var(--text-invert); }

/* Service actions */
.service-actions { margin-top:.6rem; display:flex; justify-content:flex-start; gap:.5rem; flex-wrap:wrap; }
.service-whatsapp { display:inline-flex; align-items:center; gap:.45rem; background:var(--primary); color:var(--text-invert); text-decoration:none; font-size:.72rem; padding:.45rem .85rem; border-radius:var(--radius-pill); font-weight:600; letter-spacing:.3px; border:1px solid var(--primary); transition:var(--transition); }
.service-whatsapp i { font-size:.8rem; color:var(--secondary); }
.service-whatsapp:hover, .service-whatsapp:focus-visible { background:var(--secondary); color:var(--primary); outline:none; border-color:var(--secondary); }
.service-whatsapp:hover i, .service-whatsapp:focus-visible i { color:var(--primary); }

/* Botón de información externa */
.service-info { display:inline-flex; align-items:center; gap:.4rem; background:var(--bg-soft); color:var(--primary); text-decoration:none; font-size:.72rem; padding:.45rem .8rem; border-radius:var(--radius-pill); font-weight:600; letter-spacing:.2px; border:1px solid var(--border); transition:var(--transition); }
.service-info i { font-size:.75rem; color:var(--secondary); }
.service-info:hover, .service-info:focus-visible { background:var(--primary); color:var(--text-invert); border-color:var(--primary); outline:none; }
.service-info:hover i, .service-info:focus-visible i { color:var(--text-invert); }

/* Botón de video informativo */
.service-video { display:inline-flex; align-items:center; gap:.4rem; background:var(--bg-alt); color:var(--primary); text-decoration:none; font-size:.72rem; padding:.45rem .85rem; border-radius:var(--radius-pill); font-weight:600; letter-spacing:.2px; border:1px solid var(--secondary); transition:var(--transition); }
.service-video i { font-size:.8rem; color: var(--secondary); }
.service-video:hover, .service-video:focus-visible { background: var(--secondary); color: var(--primary); outline:none; }
.service-video:hover i, .service-video:focus-visible i { color: var(--primary); }
/* Contact */
 .contact-info { background:var(--bg-alt); border:1px solid var(--border); border-radius:var(--radius); padding:1.4rem 1rem; max-width:600px; margin:1.6rem auto; text-align:center; }
 .contact-info h3 { font-size:1.25rem; margin:0 0 .9rem; font-weight:600; color:var(--primary); }
 .contact-methods { display:flex; flex-wrap:wrap; justify-content:center; gap:.6rem; }
 .contact-method { display:inline-flex; align-items:center; gap:.5rem; background:var(--bg-soft); border:1px solid var(--border); color:var(--primary); padding:.55rem 1rem; text-decoration:none; font-weight:600; border-radius:var(--radius-pill); font-size:.83rem; letter-spacing:.25px; transition:var(--transition); }
 .contact-method:hover, .contact-method:focus-visible { background:var(--primary); color:var(--text-invert); outline:none; border-color:var(--primary); }
 .contact-icon { font-size:1.1rem; color:var(--secondary); transition:var(--transition); }
 .contact-method:hover .contact-icon { color:var(--text-invert); }

 /* CTA Section */
 .specialties { background:var(--primary); color:var(--text-invert); text-align:center; padding:2.4rem 1rem; }
 .specialty-container { max-width:840px; margin:0 auto; }
 .cta-section { background:var(--bg-alt); border:1px solid var(--border); border-radius:var(--radius); padding:1.9rem 1.3rem; color:var(--primary); }
 .cta-section h2 { font-size:clamp(1.4rem,3vw,1.9rem); margin:0 0 .9rem; font-weight:600; }
 .cta-section p { margin:0 0 1.2rem; line-height:1.55; font-size:.95rem; color:var(--text-soft); }
 .cta-button { display:inline-block; background:var(--primary); color:var(--text-invert); padding:.75rem 1.7rem; border-radius:var(--radius-pill); text-decoration:none; font-weight:600; font-size:.9rem; letter-spacing:.4px; border:1px solid var(--primary); transition:var(--transition); }
 .cta-button:hover, .cta-button:focus-visible { background:var(--secondary); color:var(--primary); outline:none; }

 /* Footer */
 .site-footer { background:#0f2b2d; color:var(--text-invert); text-align:center; padding:1.9rem 1rem 2.1rem; font-size:.85rem; margin-top:2.4rem; }
 .site-footer p + p { margin-top:.6rem; opacity:.75; }

 /* Utilities / Accessibility */
 :focus-visible { outline:2px solid var(--secondary); outline-offset:3px; border-radius:4px; }
 .visually-hidden { position:absolute; width:1px; height:1px; clip:rect(0 0 0 0); clip-path:inset(50%); overflow:hidden; white-space:nowrap; }

 /* Responsive */
 @media (max-width: 760px) {
   .services { gap:1rem; }
   .profile-img { width:118px; height:118px; }
   .contact-info { margin:2rem 1rem; padding:1.6rem 1rem; }
    .contact-info { max-width: 92%; }
   .cta-section { padding:1.6rem 1rem; }
 }

 @media (prefers-reduced-motion: reduce) { * { transition:none !important; scroll-behavior:auto !important; } }

 /* === Full bleed + pantalla completa para cards === */
.services-section {
  padding: 0;
}

.container--full-bleed {
  max-width: 100%;
  padding: 0;
}

.services--full {
  /* Quitar espacios y hacer layout tipo paneles llenando el ancho */
  gap: 0;
  grid-template-columns: repeat(auto-fit,minmax(300px,1fr));
  width: 100%;
}

.services--full .service-card {
  border-radius: 0;
  margin: 0;
  border: 1px solid var(--border);
  /* Asegura alturas consistentes por fila */
  display: flex;
}

.services--full .service-card:hover,
.services--full .service-card:focus-within {
  transform: none;
  box-shadow: inset 0 0 0 9999px rgba(16,56,57,0.04);
  border-color: var(--secondary);
}

.services--full .service-header {
  padding: .85rem 1rem .6rem;
}

.services--full .service-content {
  padding-top: .2rem;
}

/* Ajuste del título al eliminar aire lateral */
.services--full .section-title {
  padding: 1.4rem 1rem 1.1rem;
  margin: 0;
  background: var(--primary);
  color: var(--text-invert);
  border-bottom: 2px solid var(--secondary);
  font-weight: 600;
  letter-spacing: .6px;
}

/* En móviles: 2 columnas si hay espacio, luego 1 */
@media (max-width: 880px) {
  .services--full {
    grid-template-columns: repeat(auto-fit,minmax(240px,1fr));
  }
}

/* Espaciado interno reducido sólo en esta variante */
.services--full .service-card {
  padding: .95rem .9rem 1.05rem;
}

.services--full .service-description {
  font-size: .85rem;
  padding: .7rem .7rem .75rem;
}

/* === CTA con contraste mejorado === */
.cta-section {
  background: linear-gradient(135deg,#072022 0%,#103839 55%,#155358 90%);
  color: var(--text-invert);
  border: 1px solid #114044;
  box-shadow: 0 4px 18px -4px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.04) inset;
  position: relative;
  overflow: hidden;
}

.cta-section:before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 78% 22%, rgba(255,255,255,0.22), transparent 60%),
    radial-gradient(circle at 18% 82%, rgba(255,255,255,0.15), transparent 65%);
  mix-blend-mode: overlay;
  pointer-events: none;
}

.cta-section h2 {
  color: #ffffff;
  text-shadow: 0 2px 6px rgba(0,0,0,0.35);
}

.cta-section p {
  color: #cfe6e7;
}

.cta-button {
  background: var(--secondary);
  color: #082325;
  border: 2px solid var(--secondary);
  font-size: .95rem;
  letter-spacing: .5px;
  box-shadow: 0 3px 10px -2px rgba(0,0,0,0.4);
  transition: background .25s ease, color .25s ease, transform .25s ease;
}

.cta-button:hover,
.cta-button:focus-visible {
  background: #fff;
  color: var(--primary);
  transform: translateY(-3px);
  box-shadow: 0 6px 18px -4px rgba(0,0,0,0.55);
}

/* En pantallas medianas añadimos un pequeño respiro arriba y abajo */
@media (min-width: 1000px) {
  .services--full {
    min-height: calc(100vh - 260px); /* aproximación sin JS */
  }
}

/* Ajustes finos móviles para legibilidad */
@media (max-width: 540px) {
  .services--full .service-card {
    padding: .85rem .75rem .95rem;
  }
  .services--full .service-title {
    font-size: .95rem;
  }
  .services--full .benefit-tag {
    font-size: .6rem;
    padding: .3rem .55rem;
  }
}

/* === Overrides: quitar gradientes y eliminar espacio entre CTA y footer === */
.main { padding-bottom: 0; }
.specialties { padding: 2rem 1rem 1.2rem; background: var(--primary); }
.site-footer { margin-top: 0; }

/* CTA plano sin gradientes */
.cta-section { 
  background: var(--primary); 
  color: var(--text-invert); 
  border: 1px solid #0d2c30; 
  box-shadow: none; 
  padding: 1.8rem 1.2rem; 
}
.cta-section:before { display: none; }
.cta-section h2 { color: var(--text-invert); text-shadow: none; }
.cta-section p { color: #e2ecec; }

/* Botón con inversión de colores al hover */
.cta-button { 
  background: var(--secondary); 
  color: var(--primary); 
  border: 1px solid var(--secondary); 
  box-shadow: none; 
  transition: background .25s ease, color .25s ease, border-color .25s ease; 
}
.cta-button:hover,
.cta-button:focus-visible { 
  background: var(--primary); 
  color: var(--text-invert); 
  border-color: var(--primary); 
  transform: translateY(-2px); 
}

/* Ajustes de servicio en layout full: bordes internos sutiles */
.services--full .service-card { border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.services--full .service-card:nth-child(4n) { border-right: 1px solid var(--border); }

/* Asegurar contraste en tags dentro de fondo primario (por si se reutilizan) */
.specialties .benefit-tag { background: var(--bg-soft); color: var(--primary); }