/*
 * bloques/linea-tiempo/estilos.css
 * Colores y nº de columnas salen inline del template.
 */

.bl-linea-tiempo { padding: var(--bl-aire) 0; }

.bl-linea-tiempo .bl-lt-antetitulo {
    text-align: center;
    margin: 0 0 10px;
    font-size: clamp(12px, .95vw, 14px);
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.bl-linea-tiempo .bl-lt-titulo {
    text-align: center;
    font-size: clamp(26px, 2.6vw, 38px);
    line-height: 1.25;
    font-weight: 700;
    margin: 0 0 clamp(32px, 3.5vw, 56px);
    text-wrap: balance;
}

.bl-linea-tiempo .bl-lt-grid {
    display: grid;
    gap: 24px 20px;
    list-style: none;
    margin: 0;
    padding: 0;
    align-items: stretch;
}

.bl-linea-tiempo .bl-lt-fase {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* Fila del punto: la línea es un ::before recortado en los extremos. */
.bl-linea-tiempo .bl-lt-marca {
    position: relative;
    display: flex;
    justify-content: center;
    margin-bottom: 18px;
    height: 18px;
}

.bl-linea-tiempo .bl-lt-marca::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
}

.bl-linea-tiempo .bl-lt-marca.es-primero::before { left: 50%; }
.bl-linea-tiempo .bl-lt-marca.es-ultimo::before  { right: 50%; }

.bl-linea-tiempo .bl-lt-punto {
    position: relative;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    align-self: center;
    box-shadow: 0 0 0 5px var(--bl-lt-halo, #fff);
}

.bl-linea-tiempo .bl-lt-punto.es-grande {
    width: 15px;
    height: 15px;
    box-shadow: 0 0 0 4px var(--bl-lt-halo, #fff), 0 0 0 6px currentColor;
}

/* ── Tarjeta ──────────────────────────────────────────────────────────── */
.bl-linea-tiempo .bl-lt-tarjeta {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: clamp(22px, 2.2vw, 30px);
    /* Borde igual por los cuatro lados: sin el filete de color arriba. Esa
       combinacion —caja redondeada y raya de color en el borde superior— es el
       patron por defecto de media web y se reconoce al instante como plantilla.
       El recorrido ya lo cuentan la linea y los puntos, que si progresan de
       color hasta el ultimo. */
    border: 1px solid rgba(0, 0, 0, .07);
    border-radius: 0;
}

.bl-linea-tiempo .bl-lt-tarjeta.es-destacada { border-color: transparent; }

.bl-linea-tiempo .bl-lt-cabecera {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 18px;
}

.bl-linea-tiempo .bl-lt-fase-antetitulo {
    margin: 0;
    font-size: clamp(11px, .9vw, 13px);
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.bl-linea-tiempo .bl-lt-insignia {
    flex: none;
    padding: 4px 10px;
    border-radius: 999px;
    background: #1a2e2b;
    color: #fff;
    font-size: 10px;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.bl-linea-tiempo .bl-lt-fase-titulo {
    font-size: clamp(17px, 1.35vw, 21px);
    line-height: 1.3;
    font-weight: 700;
    margin: 0 0 14px;
    text-wrap: balance;
}

.bl-linea-tiempo .bl-lt-fase-texto {
    margin: 0;
    font-size: clamp(15px, 1.15vw, 16px);
    line-height: 1.6;
    opacity: .8;
}

/* El CTA se pega abajo para que, con textos de distinto largo, todos los
   botones queden a la misma altura. */
.bl-linea-tiempo .bl-lt-cta { margin: 26px 0 0; padding-top: 4px; margin-top: auto; }
/* A ancho de tarjeta, como en el diseno. */
.bl-linea-tiempo .bl-lt-cta .boton { display: flex; width: 100%; text-decoration: none; }

/*
 * Estilo "enlace": para las fases que informan de que el producto existe pero
 * cuya venta real ocurre en otro momento. Un boton solido ahi no vende mas y
 * resta peso al de la fase que si convierte.
 */
.bl-linea-tiempo .bl-lt-enlace {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1.5px solid currentColor;
    padding-bottom: 3px;
    transition: opacity .15s ease;
}
.bl-linea-tiempo .bl-lt-enlace::after { content: "→"; }
.bl-linea-tiempo .bl-lt-enlace:hover { opacity: .65; text-decoration: none; }

@media (max-width: 900px) {
    .bl-linea-tiempo .bl-lt-marca { display: none; }
    /* Apiladas en una columna, cada tarjeta es su propia fila y no hay fila de
       botones que cuadrar: el hueco reservado solo seria aire muerto. */
    .bl-linea-tiempo .bl-lt-cta2.es-hueco { display: none; }
    .bl-linea-tiempo .bl-lt-titulo { font-size: 24px; margin-bottom: 28px; }
}

/* Segundo enlace de una fase: va debajo del boton, en tono menor.
   El hueco se reserva en TODAS las tarjetas, tengan enlace o no: sin esto,
   la unica que lo lleva deja su boton 44 px mas arriba que los demas y la
   fila de botones sale descuadrada. Las tarjetas ya median lo mismo —lo
   iguala el `flex:1` de .bl-lt-tarjeta—; lo que no cuadraba eran los botones. */
.bl-linea-tiempo .bl-lt-cta2 { margin: 10px 0 0; min-height: 44px; }
.bl-linea-tiempo .bl-lt-cta2.es-hueco { pointer-events: none; }

/* Segunda accion, en contorno: tercer nivel de jerarquia por tarjeta —negro
   relleno, beige relleno, contorno—. Mas bajo y con la letra algo menor que el
   principal para que se lea como la alternativa y no como un empate. */
.bl-linea-tiempo .bl-lt-cta2 .bl-lt-boton-linea {
    display: flex; width: 100%; text-decoration: none;
    padding: 6px 18px; font-size: 16px; border-width: 1px;
    background: transparent !important;
}
.bl-linea-tiempo .bl-lt-cta2 .bl-lt-boton-linea:hover,
.bl-linea-tiempo .bl-lt-cta2 .bl-lt-boton-linea:focus {
    background: var(--color-beige, #f4f0e9) !important;
}

/* Boton secundario del bloque. `.boton` a secas es transparente con borde y,
   dentro de una tarjeta blanca junto al negro de la primera fase, se lee como
   un boton al que se le ha olvidado el estilo. Este va relleno.
   No se reutiliza `.boton-beige` del sitio, aunque hoy se vea igual: esa clase
   declara `color:#fff` sobre #f4f0e9 y solo resulta legible porque pierde contra
   el `color:#3B2D0E !important` de `.boton`. Se lee por accidente, y el dia que
   alguien quite ese !important se vuelve blanco sobre casi blanco en los 11
   sitios donde se usa. Esta clase no declara color: hereda el que ya es bueno. */
.bl-linea-tiempo .bl-lt-cta .bl-lt-boton-suave {
    background: var(--color-beige, #f4f0e9) !important;
    border-color: var(--color-beige, #f4f0e9);
}
.bl-linea-tiempo .bl-lt-cta .bl-lt-boton-suave:hover,
.bl-linea-tiempo .bl-lt-cta .bl-lt-boton-suave:focus {
    background: var(--color-secondary, #d1b6b0) !important;
    border-color: var(--color-secondary, #d1b6b0) !important;
}