/* 
Theme Name: Dielink Child Theme
Template Name: Dielink Child Theme
Description: Este es un tema hecho a la medida para Dielink.
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */

body,
html {
  overflow-x: hidden;
}
.top-line-border {
  border-top: 4px solid #bf4624 !important;
  border-radius: 41px !important;
  border: 5px solid transparent !important;
}

/* ============================================
   SISTEMA DE LÍNEAS EXTENDIDAS
   Clases utilitarias para líneas que se extienden
   hasta los bordes de la pantalla desde cualquier contenedor
   ============================================ */

/* CONFIGURACIÓN BASE */
:root {
  --line-thickness: 3px;
  --line-color: #132230;
}

/* Contenedor base - aplicar a elementos que necesiten líneas extendidas */
.line-container {
  position: relative;
  overflow: visible;
}

/* ============================================
   LÍNEAS HORIZONTALES (Derecha e Izquierda)
   ============================================ */

/* Línea hacia la DERECHA - desde el centro del contenedor */
.line-right {
  position: relative;
}
.line-right::after {
  content: "";
  position: absolute;
  top: 50%;
  right: auto;
  width: 100vw;
  height: var(--line-thickness);
  background-color: var(--line-color);
  transform: translateY(-50%);
  z-index: 1;
  bottom: auto;
  left: calc(100% + 24px);
}

/* Línea hacia la IZQUIERDA - desde el centro del contenedor */
.line-left {
  position: relative;
}

.line-left::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -24px;
  width: 100vw;
  height: var(--line-thickness);
  background-color: var(--line-color);
  transform: translateY(-50%) translateX(-100%);
  z-index: 1;
  right: auto;
}

/* ============================================
   LÍNEAS VERTICALES INFERIORES
   ============================================ */

/* Línea INFERIOR hacia la DERECHA - desde esquina inferior izquierda */
.line-bottom-right {
  position: relative;
}

.line-bottom-right::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100vw;
  height: var(--line-thickness);
  background-color: var(--line-color);
  transform: translateX(0);
  z-index: 1;
}

/* Línea INFERIOR hacia la IZQUIERDA - desde esquina inferior derecha */
.line-bottom-left {
  position: relative;
}

.line-bottom-left::before {
  content: "" !important;
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100vw;
  height: var(--line-thickness);
  background-color: var(--line-color);
  transform: translateX(0);
  z-index: 1;
  top: auto;
  left: auto;
}

/* ============================================
   LÍNEAS VERTICALES SUPERIORES
   ============================================ */

/* Línea SUPERIOR hacia la DERECHA - desde esquina superior izquierda */
.line-top-right {
  position: relative;
}

.line-top-right::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: var(--line-thickness);
  background-color: var(--line-color);
  transform: translateX(0);
  z-index: 1;
  bottom: auto;
  right: auto;
}

/* Línea SUPERIOR hacia la IZQUIERDA - desde esquina superior derecha */
.line-top-left {
  position: relative;
}

.line-top-left::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 100vw;
  height: var(--line-thickness);
  background-color: var(--line-color);
  transform: translateX(0);
  z-index: 1;
  bottom: auto;
  left: auto;
}

/* ============================================
   VARIACIONES DE GROSOR
   ============================================ */

.line-thin {
  --line-thickness: 1px;
}
.line-medium {
  --line-thickness: 3px;
}
.line-thick {
  --line-thickness: 5px;
}
.line-extra-thick {
  --line-thickness: 8px;
}

/* ============================================
   VARIACIONES DE COLOR
   ============================================ */

.line-gray {
  --line-color: #666666;
}
.line-light-gray {
  --line-color: #cccccc;
}
.line-red {
  --line-color: #bf4624;
}
.line-blue {
  --line-color: #0066cc;
}
.line-green {
  --line-color: #00cc66;
}
.line-white {
  --line-color: #ffffff;
}

/* ============================================
   LÍNEAS CON DEGRADADOS
   ============================================ */

.line-gradient-right::after {
  background: linear-gradient(to right, var(--line-color), transparent);
}

.line-gradient-left::before {
  background: linear-gradient(to left, var(--line-color), transparent);
}

.line-gradient-fade::after,
.line-gradient-fade::before {
  background: linear-gradient(
    to right,
    transparent,
    var(--line-color),
    transparent
  );
}

/* ============================================
   LÍNEAS ANIMADAS
   ============================================ */

.line-animated::after,
.line-animated::before {
  animation: lineSlide 2s ease-in-out infinite alternate;
}

@keyframes lineSlide {
  0% {
    opacity: 0.3;
  }
  100% {
    opacity: 1;
  }
}

/* ============================================
   RESPONSIVO - Ajustes para pantallas pequeñas
   ============================================ */

@media (max-width: 768px) {
  .line-mobile-hidden::after,
  .line-mobile-hidden::before {
    display: none;
  }

  .line-mobile-thin {
    --line-thickness: 1px;
  }
}

/* ============================================
   UTILIDADES ADICIONALES
   ============================================ */

/* Para ocultar líneas en hover */
.line-hover-hide:hover::after,
.line-hover-hide:hover::before {
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* Para mostrar líneas solo en hover */
.line-hover-show::after,
.line-hover-show::before {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.line-hover-show:hover::after,
.line-hover-show:hover::before {
  opacity: 1;
}

/* Para líneas punteadas */
.line-dashed::after,
.line-dashed::before {
  background-image: repeating-linear-gradient(
    to right,
    var(--line-color) 0px,
    var(--line-color) 10px,
    transparent 10px,
    transparent 20px
  );
  background-color: transparent;
}

.top-line-border {
  border-top: 4px solid #bf4624 !important;
  border-radius: 41px;
  border: 5px solid transparent;
}

/* texto vertical */

/* =================================================
   VARIACIONES COMPLETAS DE TEXTO VERTICAL
   ================================================= */

/* BREAKPOINTS ESTÁNDAR */
/* Mobile First (320px+) */
/* @media screen and (min-width: 320px) {
  .vertical-text-xs { writing-mode: sideways-lr; }
  .vertical-text-xs-rl { writing-mode: sideways-rl; }
  .vertical-text-xs-tb { writing-mode: vertical-lr; }
  .vertical-text-xs-tb-rl { writing-mode: vertical-rl; }
} */

/* Small Mobile (480px+) */
/* @media screen and (min-width: 480px) {
  .vertical-text-sm {
    writing-mode: sideways-lr;
  }
  .vertical-text-sm-rl {
    writing-mode: sideways-rl;
  }
  .vertical-text-sm-tb {
    writing-mode: vertical-lr;
  }
  .vertical-text-sm-tb-rl {
    writing-mode: vertical-rl;
  }
} */

/* Tablet (768px+) */
@media screen and (min-width: 768px) {
  .vertical-text-md {
    writing-mode: sideways-lr;
  }
  .vertical-text-md-rl {
    writing-mode: sideways-rl;
  }
  .vertical-text-md-tb {
    writing-mode: vertical-lr;
  }
  .vertical-text-md-tb-rl {
    writing-mode: vertical-rl;
  }
}

/* Desktop (1024px+) */
@media screen and (min-width: 1024px) {
  .vertical-text-lg {
    writing-mode: sideways-lr;
  }
  .vertical-text-lg-rl {
    writing-mode: sideways-rl;
  }
  .vertical-text-lg-tb {
    writing-mode: vertical-lr;
  }
  .vertical-text-lg-tb-rl {
    writing-mode: vertical-rl;
  }
}

/* Large Desktop (1280px+) */
@media screen and (min-width: 1280px) {
  .vertical-text-xl {
    writing-mode: sideways-lr;
  }
  .vertical-text-xl-rl {
    writing-mode: sideways-rl;
  }
  .vertical-text-xl-tb {
    writing-mode: vertical-lr;
  }
  .vertical-text-xl-tb-rl {
    writing-mode: vertical-rl;
  }
}

/* Extra Large Desktop (1536px+) */
/* @media screen and (min-width: 1536px) {
  .vertical-text-2xl {
    writing-mode: sideways-lr;
  }
  .vertical-text-2xl-rl {
    writing-mode: sideways-rl;
  }
  .vertical-text-2xl-tb {
    writing-mode: vertical-lr;
  }
  .vertical-text-2xl-tb-rl {
    writing-mode: vertical-rl;
  }
} */

/* =================================================
   VARIACIONES CON ORIENTACIÓN DE TEXTO
   ================================================= */

/* Orientación mixta (mixed) */
@media screen and (min-width: 768px) {
  .vertical-text-md-mixed {
    writing-mode: sideways-lr;
    text-orientation: mixed;
  }
  .vertical-text-md-upright {
    writing-mode: vertical-lr;
    text-orientation: upright;
  }
  .vertical-text-md-sideways {
    writing-mode: vertical-lr;
    text-orientation: sideways;
  }
}

@media screen and (min-width: 1024px) {
  .vertical-text-lg-mixed {
    writing-mode: sideways-lr;
    text-orientation: mixed;
  }
  .vertical-text-lg-upright {
    writing-mode: vertical-lr;
    text-orientation: upright;
  }
  .vertical-text-lg-sideways {
    writing-mode: vertical-lr;
    text-orientation: sideways;
  }
}

/* =================================================
   VARIACIONES CON MAX-WIDTH (Desktop First)
   ================================================= */

/* Para pantallas menores a 1536px */
@media screen and (max-width: 1535px) {
  .vertical-text-max-2xl {
    writing-mode: sideways-lr;
  }
}

/* Para pantallas menores a 1280px */
@media screen and (max-width: 1279px) {
  .vertical-text-max-xl {
    writing-mode: sideways-lr;
  }
}

/* Para pantallas menores a 1024px */
@media screen and (max-width: 1023px) {
  .vertical-text-max-lg {
    writing-mode: sideways-lr;
  }
}

/* Para pantallas menores a 768px */
@media screen and (max-width: 767px) {
  .vertical-text-max-md {
    writing-mode: sideways-lr;
  }
}

/* Para pantallas menores a 480px */
@media screen and (max-width: 479px) {
  .vertical-text-max-sm {
    writing-mode: sideways-lr;
  }
}

/* =================================================
   VARIACIONES CON RANGOS ESPECÍFICOS
   ================================================= */

/* Solo para tablets */
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .vertical-text-tablet-only {
    writing-mode: sideways-lr;
  }
}

/* Solo para móviles */
@media screen and (max-width: 767px) {
  .vertical-text-mobile-only {
    writing-mode: sideways-lr;
  }
}

/* Solo para desktop */
@media screen and (min-width: 1024px) {
  .vertical-text-desktop-only {
    writing-mode: sideways-lr;
  }
}

/* =================================================
   UTILIDADES ADICIONALES
   ================================================= */

/* Sin media queries - siempre activo */
.vertical-text-always {
  writing-mode: sideways-lr;
}
.vertical-text-always-rl {
  writing-mode: sideways-rl;
}
.vertical-text-always-tb {
  writing-mode: vertical-lr;
}
.vertical-text-always-tb-rl {
  writing-mode: vertical-rl;
}

/* Con transiciones suaves */
@media screen and (min-width: 768px) {
  .vertical-text-md-smooth {
    writing-mode: sideways-lr;
    transition: writing-mode 0.3s ease;
  }
}

@media screen and (min-width: 1024px) {
  .vertical-text-lg-smooth {
    writing-mode: sideways-lr;
    transition: writing-mode 0.3s ease;
  }
}

/* =================================================
   VARIACIONES PARA ORIENTACIÓN DE DISPOSITIVO
   ================================================= */

/* Solo en orientación landscape */
@media screen and (min-width: 768px) and (orientation: landscape) {
  .vertical-text-landscape {
    writing-mode: sideways-lr;
  }
}

/* Solo en orientación portrait */
@media screen and (min-width: 768px) and (orientation: portrait) {
  .vertical-text-portrait {
    writing-mode: sideways-lr;
  }
}

/* =================================================
   COMENTARIOS DE USO
   ================================================= */

/*
EXPLICACIÓN DE SUFIJOS:
- Sin sufijo: sideways-lr (texto rotado 90° hacia la izquierda)
- -rl: sideways-rl (texto rotado 90° hacia la derecha)  
- -tb: vertical-lr (texto vertical, líneas de izquierda a derecha)
- -tb-rl: vertical-rl (texto vertical, líneas de derecha a izquierda)

BREAKPOINTS:
- xs: 320px+ (móvil pequeño)
- sm: 480px+ (móvil)
- md: 768px+ (tablet)
- lg: 1024px+ (desktop)
- xl: 1280px+ (desktop grande)
- 2xl: 1536px+ (desktop extra grande)

EJEMPLOS DE USO:
<div class="vertical-text-md">Texto vertical en tablets+</div>
<div class="vertical-text-lg-rl">Texto vertical rotado derecha en desktop+</div>
<div class="vertical-text-tablet-only">Solo visible en tablets</div>
*/

/* CSS mínimo para el funcionamiento de los tabs */
/*.tab-content {*/
/*  overflow: hidden;*/
/*  transition: height 0.3s ease;*/
/*}*/

/* Clases para personalizar estados activos/inactivos */
/*.tab-card.tab-active {*/
/* Aquí puedes agregar tus estilos para tab activo */
/*}*/

/*.tab-card.tab-inactive {*/
/* Aquí puedes agregar tus estilos para tab inactivo */
/*}*/
.tab-title {
  cursor: pointer;
  transition: all 0.3s ease;
}

.tab-title.active {
  /* Estilos para título activo */
  /* color: #your-active-color; */
  font-weight: bold;
}

.tab-title:hover {
  /* Estilos hover */
  opacity: 0.8;
}
.tab-landmarks .landmark {
  height: 30px;
  background: green;
  width: 100%;
}

.tab-card.top-line-border:not(.tab-active) {
  border-top-color: #727272 !important;
}
.tab-card:not(.tab-active) .tab-number div {
  color: #727272 !important;
}
.tab-card:not(.tab-active) .tab-title div {
  color: #727272 !important;
}
.tab-card {
  border-top-left-radius: 40px;
  border-top-right-radius: 40px;
}
.tab-inactive .tab-content {
  height: 0 !important;
}