/**
 * content.css
 * Capa editorial para contenido renderizado dentro de com_content.
 * Mantiene el contenido aislado de core.css y proporciona patrones simples.
 */

.content-body {
    width: 100%;
    max-width: 78ch;
}

.content-body> :first-child {
    margin-top: 0;
}

.content-body> :last-child {
    margin-bottom: 0;
}

.content-body :where(p, ul, ol, table, blockquote, pre, hr) {
    margin-block: var(--spacing-md);
}

.content-body :where(ul, ol) {
    padding-left: var(--spacing-lg);
}

.content-body li+li {
    margin-top: var(--spacing-xs);
}

.content-body :where(h2, h3, h4, h5) {
    margin-top: var(--spacing-xl);
    margin-bottom: var(--spacing-md);
    color: var(--color-primary);
    line-height: var(--line-height-tight);
}

.content-body h2 {
    font-size: var(--font-size-2xl);
}

.content-body h3 {
    font-size: var(--font-size-xl);
}

.content-body h4,
.content-body h5 {
    font-size: var(--font-size-lg);
}

.content-body a:hover,
.content-body a:focus-visible {
    color: var(--color-primary-dark);
}

.content-body table {
    width: 100%;
    border-collapse: collapse;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-bg);
}

.content-body th,
.content-body td {
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--color-border);
    vertical-align: top;
}

.content-body th {
    background: var(--color-bg-alt);
    font-weight: var(--font-weight-bold);
}

.content-body blockquote {
    padding: var(--spacing-md) var(--spacing-lg);
    border-left: 4px solid var(--color-primary);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    background: var(--color-bg-alt);
    color: var(--color-text-light);
}

.content-body code {
    padding: 0.2em 0.45em;
    border-radius: var(--radius-sm);
    background: var(--color-bg-alt);
    font-family: var(--font-family-mono);
    font-size: 0.9em;
}

.content-body pre {
    padding: var(--spacing-md);
    border-radius: var(--radius-lg);
    overflow-x: auto;
    background: var(--color-black);
    color: var(--color-white);
}

.content-body pre code {
    padding: 0;
    background: transparent;
}

.content-body img {
    border-radius: var(--radius-lg);
}

/* Los tiles y controles de Leaflet son <img> pero no deben heredar el radio de artículo */
.content-body .leaflet-container img {
    border-radius: 0;
}

.content-cta {
    margin-block: var(--spacing-lg);
    padding: clamp(1rem, 0.75rem + 1.25vw, 1.5rem);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-bg);
    display: grid;
    gap: var(--spacing-md);
    align-items: start;
}

.content-cta> :last-child {
    margin-bottom: 0;
}

/* Entradilla: párrafo introductorio destacado (más grande y atenuado). */
.content-lead {
    font-size: var(--font-size-xl);
    line-height: var(--line-height-normal);
    color: var(--color-text-light);
}

/* Aviso / nota destacada: caja con barra lateral de acento. */
.content-callout {
    margin-block: var(--spacing-lg);
    padding: var(--spacing-md) var(--spacing-lg);
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-accent);
    border-radius: var(--radius-md);
    background: var(--color-surface-tint);
}

.content-callout> :last-child {
    margin-bottom: 0;
}

/* ========================================
   Utilidades de anchura (breakout)
   Permiten que un bloque editorial supere el límite de lectura (78ch)
   y aproveche el ancho de pantalla. Reutilizables en cualquier artículo.
   ======================================== */

/* Ancho ampliado: hasta el ancho del contenedor (1280px) */
.content-wide {
    width: 100%;
    max-width: 1280px;
    margin-inline: auto;
}

/* Ancho completo de viewport (full-bleed), rompe el .container */
.content-full {
    width: 100vw;
    max-width: 100vw;
    margin-inline: calc(50% - 50vw);
}

.content-carousel {
    margin-block: var(--spacing-lg);
}

.content-carousel--full {
    width: 100vw;
    max-width: 100vw;
    margin-inline: calc(50% - 50vw);
}

.content-carousel__viewport {
    position: relative;
    border-radius: var(--radius-xl);
    overflow: hidden;
    border: 1px solid var(--color-border);
    background: var(--color-bg-alt);
}

.content-carousel__slide {
    display: none;
    margin: 0;
}

.content-carousel__slide.is-active {
    display: block;
}

.content-carousel__image {
    display: block;
    width: 100%;
    /* Proporción del banner (3360x976 ≈ 3.44:1). Fija la altura del carrusel
       estándar recortando con cover; el hero la ignora (usa height:100%). */
    aspect-ratio: 3360 / 976;
    object-fit: cover;
}

/* Variante hero de portada: imagen ancha con alto acotado + leyenda superpuesta */
/* Héroe: la CAJA (viewport) fija la proporción. En tablet+ se iguala a la
   proporción real de los banners (2496x725 ≈ 3.44:1) para que la imagen se
   vea ENTERA (sin recorte lateral con object-fit: cover). En móvil esa misma
   proporción deja una franja demasiado fina (title/lead/botones apretados),
   así que se usa una proporción más alta y se acepta el recorte lateral
   (mismo object-fit: cover de abajo). A sangre y sin esquinas para sellar
   con la cabecera. */
.content-carousel--hero .content-carousel__viewport {
    aspect-ratio: 4 / 3;
    border: 0;
    border-radius: 0;
}

.content-carousel--hero .content-carousel__slide {
    position: absolute;
    inset: 0;
    margin: 0;
    /* Crossfade suave entre imágenes: los slides se apilan y se funden por
       opacidad (no por display, que no es animable). El JS solo conmuta is-active. */
    display: block;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.6s ease, visibility 0.6s ease;
}

.content-carousel--hero .content-carousel__slide.is-active {
    opacity: 1;
    visibility: visible;
}

.content-carousel--hero .content-carousel__link,
.content-carousel--hero .content-carousel__image {
    width: 100%;
    height: 100%;
}

.content-carousel--hero .content-carousel__image {
    object-fit: cover;
}

.content-carousel__link {
    display: block;
    color: inherit;
    text-decoration: none;
}

.content-carousel__link:focus-visible {
    outline: 3px solid var(--color-accent);
    outline-offset: -3px;
}

.content-carousel__caption {
    position: absolute;
    inset: auto 0 0 0;
    padding: clamp(1rem, 0.5rem + 3vw, 2.5rem);
    background: linear-gradient(transparent, rgba(5, 24, 34, 0.78));
    color: var(--color-white);
}

/* Jerarquía invertida: el eyebrow es el elemento dominante (mayor, negrita,
   con sombra + contorno para destacar sobre la imagen); el título es menor y
   el lead el más pequeño. */
.content-carousel__eyebrow {
    margin: 0 0 var(--spacing-xs);
    /* Mismo tamaño que el título (reducido); se distingue por mayúsculas,
       negrita y color de acento, no por tamaño. */
    font-size: clamp(1rem, 0.9rem + 0.7vw, 1.35rem);
    line-height: var(--line-height-tight);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    font-weight: var(--font-weight-bold);
    color: var(--color-accent);
    text-wrap: balance;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55), 0 0 2px rgba(0, 0, 0, 0.85);
    -webkit-text-stroke: 0.5px rgba(0, 0, 0, 0.45);
}

.content-carousel__title {
    margin: 0;
    font-size: clamp(1rem, 0.9rem + 0.7vw, 1.35rem);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
    text-wrap: balance;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

.content-carousel__lead {
    margin: var(--spacing-xs) 0 0;
    max-width: 48ch;
    font-size: var(--font-size-sm);
    line-height: var(--line-height-normal);
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.content-carousel__btn {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.6);
    color: var(--color-primary-dark);
    font-size: 0;
    line-height: 1;
    cursor: pointer;
    transform: translateY(-50%);
}

.content-carousel__btn::before {
    content: "";
    width: 0.75rem;
    height: 0.75rem;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
}

.content-carousel__btn--prev {
    left: var(--spacing-md);
}

.content-carousel__btn--prev::before {
    transform: rotate(-135deg);
    margin-inline-start: 0.25rem;
    /* compensación óptica del chevron */
}

.content-carousel__btn--next {
    right: var(--spacing-md);
}

.content-carousel__btn--next::before {
    transform: rotate(45deg);
    margin-inline-end: 0.25rem;
    /* compensación óptica del chevron */
}

.content-carousel__btn:hover,
.content-carousel__btn:focus-visible {
    background: var(--color-white);
    border-color: var(--color-primary);
}

.content-carousel__dots {
    display: flex;
    justify-content: center;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-md);
}

.content-carousel__dot {
    width: 0.7rem;
    height: 0.7rem;
    padding: 0; /* sin esto hereda el padding global de <button> y deja de ser circular */
    border: 0;
    border-radius: var(--radius-full);
    background: color-mix(in srgb, var(--color-primary) 25%, var(--color-border));
    cursor: pointer;
}

.content-carousel__dot.is-active {
    background: var(--color-primary);
}

/* Hero: dots minimalistas DENTRO del carrusel, superpuestos abajo al centro */
.content-carousel--hero {
    position: relative;
}

.content-carousel--hero .content-carousel__dots {
    position: absolute;
    left: 50%;
    bottom: var(--spacing-md);
    z-index: 3;
    margin: 0;
    gap: 0.4rem;
    transform: translateX(-50%);
}

.content-carousel--hero .content-carousel__dot {
    width: 0.4rem;
    height: 0.4rem;
    background: rgba(255, 255, 255, 0.55);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    transition: background var(--transition-base), transform var(--transition-base);
}

.content-carousel--hero .content-carousel__dot.is-active {
    background: var(--color-white);
    transform: scale(1.3);
}

/* Rejilla de descargas: tarjeta-enlace con icono + nombre (5 por fila en desktop) */
.downloads-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    margin-block: var(--spacing-lg);
}

.downloads-grid>a {
    flex: 1 1 calc(50% - var(--spacing-md));
    min-width: 9rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-bg);
    color: var(--color-text);
    text-align: center;
    text-decoration: none;
    transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}

.downloads-grid>a:hover,
.downloads-grid>a:focus-visible {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--color-primary);
    color: var(--color-primary-dark);
}

.downloads-grid img {
    height: 3rem;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

/* ========================================
   Preguntas frecuentes (.content-faq)
   Acordeón nativo <details>/<summary>, sin JS. Reutilizable en cualquier
   artículo (antes vivía en home.css como .home-faq, solo en la portada).
   ======================================== */

.content-faq {
    display: grid;
    gap: var(--spacing-md);
    margin-block: var(--spacing-xl);
    /* Acotado y centrado: en la portada el contenedor llega a todo el ancho,
       y un acordeón de FAQ se lee mejor estrecho. */
    max-width: 56rem;
    margin-inline: auto;
}

.content-faq__title {
    margin: 0 0 var(--spacing-sm);
    text-align: center;
    color: var(--color-primary-dark);
    font-size: var(--font-size-2xl);
}

.content-faq__item {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    background: var(--color-bg);
    box-shadow: var(--shadow-sm);
    padding: clamp(1rem, 0.75rem + 1vw, 1.5rem);
}

.content-faq__item > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
    cursor: pointer;
    list-style: none;
    color: var(--color-primary-dark);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
}

.content-faq__item > summary::-webkit-details-marker {
    display: none;
}

/* Chevron que rota al abrir */
.content-faq__item > summary::after {
    content: "";
    flex: 0 0 auto;
    width: 0.6rem;
    height: 0.6rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform var(--transition-base);
}

.content-faq__item[open] > summary::after {
    transform: rotate(-135deg);
}

.content-faq__item > summary:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 4px;
    border-radius: var(--radius-sm);
}

.content-faq__item > p {
    margin: var(--spacing-md) 0 0;
    color: var(--color-text-light);
}

.content-body .btn,
.content-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-lg);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    background: var(--color-primary);
    color: var(--color-text-inverse);
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
}

.content-body .btn:hover,
.content-body .btn:focus-visible,
.content-body .content-button:hover,
.content-body .content-button:focus-visible,
.content-button:hover,
.content-button:focus-visible {
    background: var(--color-primary-dark);
    color: var(--color-text-inverse);
    text-decoration: none;
}

/* Iconos SVG dentro de un botón primario: forzados a blanco para contrastar
   con el fondo --color-primary (un <img> no hereda color/fill). */
.content-body .btn img,
.content-button img {
    width: 1.25em;
    height: 1.25em;
    filter: brightness(0) invert(1);
}

/* ========================================
   Rejilla de vídeos (playlists de YouTube incrustadas en artículos)
   ======================================== */

.content-video-grid {
    display: grid;
    gap: var(--spacing-lg);
    margin-block: var(--spacing-xl);
}

.content-video {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--color-bg);
}

.content-video__frame {
    position: relative;
    aspect-ratio: 16 / 9;
}

.content-video__frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.content-video__title {
    margin: var(--spacing-md) var(--spacing-md) var(--spacing-xs);
    color: var(--color-primary-dark);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
}

.content-video__desc {
    margin: 0 var(--spacing-md) var(--spacing-md);
    color: var(--color-text-light);
}

/* ========================================
   Página de contacto
   ======================================== */

.contact-info {
    list-style: none;
    padding: 0;
    margin: var(--spacing-lg) 0;
    display: grid;
    gap: var(--spacing-md);
}

.contact-info li {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
}

.contact-info__icon {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
    margin-top: 0.15em;
    opacity: 0.7;
}

.contact-map {
    margin-block: var(--spacing-xl);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    isolation: isolate;
    position: relative;
    z-index: 0;
}

.contact-map iframe {
    display: block;
    width: 100%;
    height: 360px;
    border: none;
}

.contact-map__link {
    padding: var(--spacing-xs) var(--spacing-md);
    background: var(--color-bg);
    text-align: right;
    font-size: var(--font-size-sm);
    margin: 0;
    border-top: 1px solid var(--color-border);
}

.contact-map__frame {
    height: 360px;
    position: relative;
    z-index: 0;
    isolation: isolate;
}

/* ── Responsive (mobile-first, ascendente; excepciones al final) ── */

/* En móvil la leyenda de apoyo se oculta para no tapar la imagen */
@media (max-width: 35.99rem) {
    .content-carousel__lead {
        display: none;
    }
}

/* Tablet+: la imagen del héroe recupera su proporción real (sin recorte) y
   las flechas de navegación su tamaño completo; en móvil ambas se reducen
   (ver reglas base) porque quedaban desproporcionadas en una franja fina. */
@media (min-width: 36rem) {
    .content-carousel--hero .content-carousel__viewport {
        aspect-ratio: 2496 / 725;
    }

    .content-carousel__btn {
        width: 3rem;
        height: 3rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .content-carousel--hero .content-carousel__slide {
        transition: none;
    }
}

@media (min-width: 48rem) {
    .downloads-grid>a {
        flex: 1 1 calc(20% - var(--spacing-md));
    }
}

@media (min-width: 64rem) {
    .content-body {
        font-size: var(--font-size-lg);
    }
}