/* ============================================================
   Telas de México + Cobertura · Arletex Design System v3.3
   --------------------------------------------------------------
   Bloque editorial SEO + split de cobertura nacional.

   Declaración:
     registro : @news (Periódico) — prosa densa informativa
     apertura : eyebrow + h2 + intro con drop-cap Fraunces
     marco    : Double-rule (hairlines ink arriba/abajo del intro)
     hover    : side-shift en links · lift-orange en la imagen
     fondo    : white (con más separación superior)
   ============================================================ */

.arl-tm {
    --tm-ink:     var(--ax-ink, #1F2530);
    --tm-paper:   var(--ax-paper, #FAF6EE);
    --tm-cream:   var(--ax-cream, #F2EDE4);
    --tm-white:   var(--ax-white, #FFFFFF);
    --tm-orange:  var(--ax-orange, #F15A29);
    --tm-muted:   var(--ax-muted, #6E6A60);
    --tm-rule:    2px;

    position: relative;
    background: var(--tm-white);
    color: var(--tm-ink);
    padding: clamp(64px, 8vw, 96px) 0;
    font-family: 'Lato', system-ui, sans-serif;
    overflow: hidden;
    isolation: isolate;
}
.arl-tm > .container {
    max-width: 1380px;
    padding-left:  clamp(20px, 4vw, 56px);
    padding-right: clamp(20px, 4vw, 56px);
}

/* ---------- Separador de sección (divisor superior) --------- */
.arl-tm__sep {
    display: flex;
    align-items: center;
    gap: clamp(12px, 1.6vw, 18px);
    margin-bottom: clamp(36px, 5vw, 60px);
}
.arl-tm__sep::before,
.arl-tm__sep::after {
    content: "";
    flex: 1;
    height: 2px;
    background: var(--tm-ink);
}
.arl-tm__sep-mark {
    flex-shrink: 0;
    width: 12px;
    height: 12px;
    background: var(--tm-orange);
    transform: rotate(45deg);
    border: 2px solid var(--tm-ink);
}

/* ---------- Intro editorial (prosa) ------------------------- */
.arl-tm__intro {
    max-width: 78ch;
    margin-bottom: clamp(40px, 6vw, 72px);
    padding: clamp(16px, 2.4vw, 26px) 0;
    border-top: var(--tm-rule) solid var(--tm-ink);
    border-bottom: 1px solid rgba(31, 37, 48, .2);   /* double-rule */
}
.arl-tm__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 clamp(10px, 1.4vw, 16px);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--tm-muted);
}
.arl-tm__eyebrow::before {
    content: "";
    width: 24px;
    height: 2px;
    background: var(--tm-orange);
}
.arl-tm__title {
    font-family: 'Anton', 'Arial Narrow', sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    font-size: clamp(34px, 6vw, 72px) !important;
    line-height: .9;
    letter-spacing: -.02em;
    color: var(--tm-ink);
    margin: 0 0 clamp(14px, 2vw, 22px);
}
.arl-tm__title em {
    font-family: 'Fraunces', Georgia, serif;
    font-style: italic;
    text-transform: lowercase;
    letter-spacing: -.025em;
    color: var(--tm-orange);
}
.arl-tm__lead {
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.7;
    color: var(--tm-ink);
    margin: 0;
}
.arl-tm__lead::first-letter {
    float: left;
    font-family: 'Fraunces', Georgia, serif;
    font-style: italic;
    font-size: clamp(3.4em, 6vw, 4.6em);
    line-height: .72;
    color: var(--tm-orange);
    padding: .06em .12em 0 0;
}

/* links de prosa — side-shift underline orange */
.arl-tm__lead a,
.arl-tm__copy a {
    color: var(--tm-ink);
    text-decoration: none;
    background-image: linear-gradient(transparent 60%, rgba(241, 90, 41, .3) 60%);
    transition: color .2s ease, background-image .2s ease;
}
.arl-tm__lead a:hover, .arl-tm__lead a:focus-visible,
.arl-tm__copy a:hover, .arl-tm__copy a:focus-visible {
    color: var(--tm-orange);
    background-image: linear-gradient(transparent 60%, rgba(241, 90, 41, 0) 60%);
    outline: none;
}
.arl-tm__lead a strong, .arl-tm__copy a strong { font-weight: 800; }

/* ============================================================
   Split de cobertura · imagen + texto + zonas
   ============================================================ */
.arl-tm__split {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    gap: clamp(24px, 4vw, 56px);
    align-items: center;
}
.arl-tm__media {
    position: relative;
    display: block;
    border: var(--tm-rule) solid var(--tm-ink);
    box-shadow: 8px 8px 0 0 var(--tm-ink);
    overflow: hidden;
    line-height: 0;
    background: var(--tm-cream);
    transition: transform .25s ease, box-shadow .25s ease;
}
.arl-tm__media img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform .7s cubic-bezier(.22,.61,.36,1);
}
.arl-tm__media:hover { transform: translate(-4px, -4px); box-shadow: 12px 12px 0 0 var(--tm-orange); }
.arl-tm__media:hover img { transform: scale(1.03); }

.arl-tm__subtitle {
    font-family: 'Anton', 'Arial Narrow', sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    font-size: clamp(22px, 2.6vw, 34px) !important;
    line-height: .98;
    letter-spacing: -.01em;
    color: var(--tm-ink);
    margin: 0 0 clamp(12px, 1.6vw, 18px);
}
.arl-tm__copy {
    font-size: clamp(14px, 1vw, 15.5px);
    line-height: 1.65;
    color: var(--tm-ink);
    margin: 0 0 clamp(14px, 2vw, 20px);
}
.arl-tm__zonas-label {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--tm-muted);
    margin: 0 0 12px;
}
.arl-tm__zonas {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px clamp(16px, 2.5vw, 32px);
}
.arl-tm__zonas ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.arl-tm__zonas li {
    position: relative;
    padding: 7px 0 7px 26px;
    border-bottom: 1px solid rgba(31, 37, 48, .12);
    font-size: clamp(13px, .95vw, 14.5px);
    line-height: 1.3;
}
.arl-tm__zonas li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 9px;
    height: 9px;
    transform: translateY(-50%) rotate(45deg);
    background: var(--tm-orange);
}
.arl-tm__zonas a {
    color: var(--tm-ink);
    text-decoration: none;
    transition: color .2s ease;
}
.arl-tm__zonas a:hover, .arl-tm__zonas a:focus-visible { color: var(--tm-orange); outline: none; }
.arl-tm__zonas strong { font-weight: 700; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 859px) {
    .arl-tm__split { grid-template-columns: 1fr; }
}
@media (max-width: 575px) {
    .arl-tm { padding: 56px 0; }
    .arl-tm__zonas { grid-template-columns: 1fr; }
    .arl-tm__media { box-shadow: 6px 6px 0 0 var(--tm-ink); }
}
@media (prefers-reduced-motion: reduce) {
    .arl-tm__media, .arl-tm__media img,
    .arl-tm__lead a, .arl-tm__copy a, .arl-tm__zonas a { transition: none !important; }
    .arl-tm__media:hover { transform: none !important; }
    .arl-tm__media:hover img { transform: none !important; }
}