/* ALET V7.27 — limpieza final de líneas de sección */
:root{--alet-red:#d82027;}

/* 1) PERSONAL: debe existir UNA sola línea roja debajo del título */
#personal h2::before,
#personal h2::after,
#personal .yellow-stroke,
#personal .yellow-stroke::before,
#personal .yellow-stroke::after{
  content:none !important;
  display:none !important;
  background:none !important;
  border:0 !important;
  animation:none !important;
}
#personal h2{
  position:relative !important;
  padding-bottom:22px !important;
}
#personal h2 > .personal-title-redline.section-title-line-v727{
  position:absolute !important;
  left:50% !important;
  bottom:0 !important;
  margin:0 0 0 -56px !important;
}

/* 2) CONTACTO: no debe existir línea roja dentro del panel azul */
#contacto .contact-v6-info h3::before,
#contacto .contact-v6-info h3::after,
#contacto .contact-info-line{
  content:none !important;
  display:none !important;
  background:none !important;
  border:0 !important;
  animation:none !important;
}

/* 3) Línea principal de CADA sección: misma forma y rojo */
.section-title-line-v727{
  display:block !important;
  width:112px !important;
  height:3px !important;
  min-height:3px !important;
  border:0 !important;
  border-radius:999px !important;
  background:var(--alet-red) !important;
  background-color:var(--alet-red) !important;
  box-shadow:none !important;
  transform-origin:center center !important;
  opacity:1 !important;
  transform:scaleX(1) !important;
  animation:none !important;
}
.section-title-line-v727::before,
.section-title-line-v727::after{
  content:none !important;
  display:none !important;
}

/* Quiénes somos va alineada a la izquierda; las demás centradas */
#nosotros .section-title-line-v727{
  width:72px !important;
  margin:16px 0 20px !important;
  transform-origin:left center !important;
}
#servicios .section-title-line-v727,
#acreditaciones .section-title-line-v727,
#clientes .section-title-line-v727{
  margin:14px auto 18px !important;
}
#contacto .contact-main-line.section-title-line-v727{
  margin:14px 0 18px !important;
  transform-origin:left center !important;
}

/* Estado inicial SOLO cuando JS está activo */
html.v727-line-ready .section-title-line-v727:not(.v727-line-done){
  opacity:0 !important;
  transform:scaleX(0) !important;
}
html.v727-line-ready .section-title-line-v727.v727-line-play{
  animation:v727LineGrow .9s cubic-bezier(.18,.78,.22,1) 1 forwards !important;
}
html.v727-line-ready .section-title-line-v727.v727-line-done{
  opacity:1 !important;
  transform:scaleX(1) !important;
}
@keyframes v727LineGrow{
  0%{opacity:.15;transform:scaleX(0)}
  75%{opacity:1;transform:scaleX(1.05)}
  100%{opacity:1;transform:scaleX(1)}
}

@media (prefers-reduced-motion: reduce){
  html.v727-line-ready .section-title-line-v727{
    animation:none !important;
    opacity:1 !important;
    transform:scaleX(1) !important;
  }
}


/* ==========================================================
   ALET V7.28 — ANIMACIÓN LLAMATIVA EN LÍNEAS PRINCIPALES
   Efecto: la línea nace desde la izquierda, se alarga,
   recibe un destello y queda fija. Se ejecuta UNA sola vez.
   ========================================================== */

.section-title-line-v727{
  position:relative !important;
  overflow:visible !important;
  opacity:1 !important;
  transform:none !important;
  background:
    linear-gradient(90deg,
      #d82027 0%,
      #ff3a46 48%,
      #d82027 100%) left center / 100% 100% no-repeat !important;
  box-shadow:none !important;
}

/* Estado inicial únicamente cuando JS está habilitado */
html.v728-lines-ready .section-title-line-v727:not(.v728-line-done){
  background-size:0% 100% !important;
  opacity:1 !important;
  transform:none !important;
  filter:none !important;
}

/* El destello sólo aparece durante el dibujo */
.section-title-line-v727::after{
  content:"" !important;
  display:none !important;
  position:absolute !important;
  top:50% !important;
  left:0;
  width:8px !important;
  height:8px !important;
  border-radius:50% !important;
  background:#fff !important;
  pointer-events:none !important;
  transform:translate(-50%,-50%) !important;
  box-shadow:
    0 0 7px rgba(255,255,255,.95),
    0 0 13px rgba(255,43,57,.95),
    0 0 22px rgba(216,32,39,.72) !important;
  opacity:0;
}

html.v728-lines-ready .section-title-line-v727.v728-line-play{
  animation:v728LineReveal 1.05s cubic-bezier(.20,.78,.22,1) 1 forwards !important;
}

html.v728-lines-ready .section-title-line-v727.v728-line-play::after{
  display:block !important;
  animation:v728SparkTravel 1.05s cubic-bezier(.18,.74,.20,1) 1 forwards !important;
}

/* Pequeño resplandor al finalizar, sin quedarse animando */
html.v728-lines-ready .section-title-line-v727.v728-line-done{
  background-size:100% 100% !important;
  opacity:1 !important;
  transform:none !important;
  animation:v728LineSettle .38s ease-out 1 both !important;
}

@keyframes v728LineReveal{
  0%{
    background-size:0% 100%;
    filter:drop-shadow(0 0 0 rgba(216,32,39,0));
  }
  58%{
    background-size:76% 100%;
    filter:drop-shadow(0 0 5px rgba(216,32,39,.40));
  }
  82%{
    background-size:104% 100%;
    filter:drop-shadow(0 0 9px rgba(216,32,39,.58));
  }
  100%{
    background-size:100% 100%;
    filter:drop-shadow(0 0 0 rgba(216,32,39,0));
  }
}

@keyframes v728SparkTravel{
  0%{
    left:0%;
    opacity:0;
    transform:translate(-50%,-50%) scale(.45);
  }
  12%{
    opacity:1;
    transform:translate(-50%,-50%) scale(1);
  }
  78%{
    opacity:1;
    transform:translate(-50%,-50%) scale(1.1);
  }
  100%{
    left:100%;
    opacity:0;
    transform:translate(-50%,-50%) scale(.55);
  }
}

@keyframes v728LineSettle{
  0%{
    filter:drop-shadow(0 0 8px rgba(216,32,39,.48));
  }
  100%{
    filter:drop-shadow(0 0 0 rgba(216,32,39,0));
  }
}

/* Las secciones solicitadas usan exactamente el mismo efecto */
#servicios .section-title-line-v727,
#personal .section-title-line-v727,
#acreditaciones .section-title-line-v727,
#clientes .section-title-line-v727,
#contacto .section-title-line-v727{
  background-color:#d82027 !important;
}

/* También se conserva la coherencia con Quiénes somos */
#nosotros .section-title-line-v727{
  background-color:#d82027 !important;
}

/* Accesibilidad */
@media (prefers-reduced-motion: reduce){
  html.v728-lines-ready .section-title-line-v727,
  html.v728-lines-ready .section-title-line-v727.v728-line-play,
  html.v728-lines-ready .section-title-line-v727.v728-line-done{
    animation:none !important;
    background-size:100% 100% !important;
    filter:none !important;
  }
  .section-title-line-v727::after{
    display:none !important;
    animation:none !important;
  }
}


/* ==========================================================
   ALET V7.29 — LÍNEAS ROJAS: APARICIÓN PROGRESIVA
   Inicio: invisibles.
   Al entrar cada sección en pantalla: crecen suavemente
   de izquierda a derecha hasta quedar completas.
   Sin destellos, sin pulsos, sin rebotes.
   Se ejecuta UNA SOLA VEZ por línea.
   ========================================================== */

.section-title-line-v727{
  position:relative !important;
  overflow:hidden !important;
  opacity:1 !important;
  transform:none !important;
  filter:none !important;
  box-shadow:none !important;
  background:#d82027 !important;
  transform-origin:left center !important;
}

/* Eliminar completamente el destello de V7.28 */
.section-title-line-v727::after{
  content:none !important;
  display:none !important;
  animation:none !important;
}

/* Antes de entrar al viewport la línea no se ve */
html.v729-lines-ready .section-title-line-v727:not(.v729-line-done){
  transform:scaleX(0) !important;
  opacity:0 !important;
  background:#d82027 !important;
}

/* Crecimiento limpio y progresivo */
html.v729-lines-ready .section-title-line-v727.v729-line-play{
  animation:v729GrowLine 1.25s cubic-bezier(.22,.61,.36,1) 1 forwards !important;
}

/* Estado final */
html.v729-lines-ready .section-title-line-v727.v729-line-done{
  transform:scaleX(1) !important;
  opacity:1 !important;
  background:#d82027 !important;
  animation:none !important;
  filter:none !important;
}

/* Una sola línea roja principal en cada sección */
#nosotros .section-title-line-v727,
#servicios .section-title-line-v727,
#personal .section-title-line-v727,
#acreditaciones .section-title-line-v727,
#clientes .section-title-line-v727,
#contacto .section-title-line-v727{
  background:#d82027 !important;
}

@keyframes v729GrowLine{
  0%{
    transform:scaleX(0);
    opacity:0;
  }
  12%{
    opacity:1;
  }
  100%{
    transform:scaleX(1);
    opacity:1;
  }
}

@media (prefers-reduced-motion: reduce){
  html.v729-lines-ready .section-title-line-v727,
  html.v729-lines-ready .section-title-line-v727.v729-line-play,
  html.v729-lines-ready .section-title-line-v727.v729-line-done{
    transform:scaleX(1) !important;
    opacity:1 !important;
    animation:none !important;
  }
}


/* ==========================================================
   ALET V7.30 — AJUSTE PUNTUAL
   1) Texto de las tarjetas de Servicios centrado verticalmente.
   2) Líneas principales: crecimiento REAL y suave, sin flash inicial.
   ========================================================== */

/* --- SERVICIOS: solo centrar el bloque de texto, sin mover iconos --- */
#servicios .service-v5-card{
  display:flex !important;
  flex-direction:column !important;
}

#servicios .service-v5-card > .service-v5-copy{
  flex:1 1 auto !important;
  width:100% !important;
  min-height:0 !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  align-items:center !important;
  text-align:center !important;
  gap:14px !important;
  padding:0 4px 10px !important;
  margin:0 !important;
}

#servicios .service-v5-card > .service-v5-copy h3,
#servicios .service-v5-card > .service-v5-copy p{
  margin:0 !important;
  text-align:center !important;
}

/* --- LÍNEAS PRINCIPALES: ocultas desde el primer paint --- */
html.v730-lines-ready .section-title-line-v727{
  opacity:0 !important;
  transform:scaleX(0) !important;
  transform-origin:left center !important;
  animation:none !important;
  transition:
    transform 1.85s cubic-bezier(.22,.61,.36,1),
    opacity .22s ease-out !important;
  will-change:transform,opacity !important;
  background:#d82027 !important;
  background-color:#d82027 !important;
  filter:none !important;
  box-shadow:none !important;
}

html.v730-lines-ready .section-title-line-v727::before,
html.v730-lines-ready .section-title-line-v727::after{
  content:none !important;
  display:none !important;
  animation:none !important;
}

html.v730-lines-ready .section-title-line-v727.v730-line-visible{
  opacity:1 !important;
  transform:scaleX(1) !important;
}

/* Elimina estados de animaciones anteriores para que no interfieran. */
html.v730-lines-ready .section-title-line-v727.v727-line-play,
html.v730-lines-ready .section-title-line-v727.v727-line-done,
html.v730-lines-ready .section-title-line-v727.v728-line-play,
html.v730-lines-ready .section-title-line-v727.v728-line-done,
html.v730-lines-ready .section-title-line-v727.v729-line-play,
html.v730-lines-ready .section-title-line-v727.v729-line-done{
  animation:none !important;
}

@media (prefers-reduced-motion: reduce){
  html.v730-lines-ready .section-title-line-v727{
    opacity:1 !important;
    transform:scaleX(1) !important;
    transition:none !important;
  }
}