/* ================================================================
   PLUMA THEME — RESPONSIVE GLOBAL
   Breakpoints: 1280 · 1024 · 768 · 480 · 360
   Cargado siempre (último en la cascada) para sobrescribir
   reglas específicas de módulos cuando sea necesario.
   ================================================================ */

/* ----------------------------------------------------------------
   VARIABLES GLOBALES DE LAYOUT
   ---------------------------------------------------------------- */
:root {
    --pluma-max-ancho: 1400px;
    --pluma-gap: clamp(16px, 3vw, 40px);
    --pluma-padding: clamp(12px, 4vw, 40px);
}

/* ----------------------------------------------------------------
   MEJORAS GENERALES DE ACCESIBILIDAD TÁCTIL
   Todos los elementos interactivos: mínimo 44×44px (WCAG 2.5.5)
   ---------------------------------------------------------------- */
a,
button,
[role="button"],
input[type="submit"],
input[type="button"],
input[type="checkbox"],
input[type="radio"],
select {
    -webkit-tap-highlight-color: transparent;
}

@media (max-width: 768px) {

    /* Aumentar área táctil en móvil */
    nav a,
    .pluma-footer-menu a,
    .pluma-footer-social-link,
    .pluma-compartir__btn,
    .ps-tags a {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
}

/* ----------------------------------------------------------------
   EVITAR OVERFLOW HORIZONTAL (causa CLS y UX rota en móvil)
   ---------------------------------------------------------------- */
html,
body {
    overflow-x: hidden;
    max-width: 100%;
}

img,
video,
iframe,
embed,
object {
    max-width: 100%;
}

/* ----------------------------------------------------------------
   SKIP-LINK DE ACCESIBILIDAD
   ---------------------------------------------------------------- */
.pluma-saltar {
    position: absolute;
    top: -100%;
    left: 16px;
    z-index: 99999;
    background: #1D3557;
    color: #fff;
    padding: 10px 20px;
    border-radius: 0 0 8px 8px;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    transition: top .2s;
}

.pluma-saltar:focus {
    top: 0;
}

/* ----------------------------------------------------------------
   ≤ 1280px  —  AJUSTES ESCRITORIO AMPLIO
   ---------------------------------------------------------------- */
@media (max-width: 1280px) {

    .pluma-cabecera__contenido,
    .pluma-footer-contenido,
    .pluma-footer-fondo,
    .ps-author,
    .ps-nav-posts,
    .ps-comments,
    .pluma-relacionadas {
        max-width: 100%;
        padding-left: clamp(20px, 3vw, 40px);
        padding-right: clamp(20px, 3vw, 40px);
    }

    .pluma-cabecera nav ul li a {
        padding: 8px 11px;
        font-size: 12px;
    }
}

/* ----------------------------------------------------------------
   ≤ 1024px  —  TABLET LANDSCAPE / PORTÁTIL PEQUEÑO
   ---------------------------------------------------------------- */
@media (max-width: 1024px) {

    /* Layout principal */
    .pluma-wrapper,
    .pluma-bucle-contenido {
        padding: 0 20px;
    }

    /* Grid con sidebar → columna única */
    .pluma-layout-con-sidebar {
        grid-template-columns: 1fr !important;
    }

    .pluma-sidebar {
        order: 2;
        width: 100% !important;
        flex-basis: auto !important;
    }

    /* Footer: 2 columnas en tablet */
    .pluma-footer-contenido {
        grid-template-columns: 1fr 1fr !important;
        gap: 32px;
    }

    /* Single post */
    .ps-wrapper--sidebar {
        grid-template-columns: 1fr !important;
    }

    .ps-content {
        padding: 40px 24px;
    }

    /* Hero landing split */
    .lp-slider {
        flex-direction: column !important;
    }

    .lp-seccion.lp-section-one,
    .lp-seccion.lp-section-two {
        width: 100% !important;
        min-height: 50vh !important;
    }

    /* Cluster grids */
    .pluma-cluster__grid--4cols,
    .pluma-cluster__grid--5cols,
    .pluma-cluster__grid--6cols {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    .pluma-cluster-cats__grid--4cols,
    .pluma-cluster-cats__grid--5cols,
    .pluma-cluster-cats__grid--6cols {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* ----------------------------------------------------------------
   ≤ 768px  —  TABLET PORTRAIT / MÓVIL GRANDE
   ---------------------------------------------------------------- */
@media (max-width: 768px) {

    /* Tipografía fluida */
    body {
        font-size: 16px;
        line-height: 1.65;
    }

    p {
        font-size: 16px;
    }

    h1 {
        font-size: clamp(26px, 6vw, 38px);
    }

    h2 {
        font-size: clamp(22px, 5vw, 32px);
    }

    h3 {
        font-size: clamp(18px, 4vw, 26px);
    }

    h4 {
        font-size: clamp(16px, 3.5vw, 22px);
    }

    /* Header */
    .pluma-cabecera__contenido {
        padding: 0 16px;
    }

    .pluma-busqueda-cabecera,
    .pluma-cabecera-cta {
        display: none !important;
    }

    /* Footer: 1 columna */
    .pluma-footer-contenido {
        grid-template-columns: 1fr !important;
        gap: 28px;
        padding: 36px 16px 24px !important;
    }

    .pluma-footer-fondo {
        flex-direction: column;
        text-align: center;
        padding: 16px;
        gap: 6px;
    }

    /* Single post */
    .ps-content {
        padding: 28px 16px;
        font-size: 16px;
    }

    .ps-content h2 {
        font-size: 22px;
    }

    .ps-content h3 {
        font-size: 18px;
    }

    .ps-content blockquote {
        padding: 20px 16px 20px 50px;
        font-size: 16px;
    }

    .ps-article__header {
        padding: 28px 16px 0;
    }

    .ps-author {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 24px 16px;
        gap: 18px;
    }

    .ps-nav-posts {
        flex-direction: column;
        padding: 0 16px;
    }

    .ps-nav-posts__next {
        text-align: left;
    }

    .ps-comments {
        padding: 24px 16px;
    }

    .ps-tags {
        padding: 24px 16px 0;
    }

    /* Landing */
    .lp-container-c {
        padding: 0 16px !important;
    }

    .lp-destinations-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .lp-categories-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .lp-container-client {
        grid-template-columns: 1fr !important;
    }

    .lp-stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .lp-section-services {
        grid-template-columns: 1fr !important;
    }

    .lp-footer-content {
        grid-template-columns: 1fr 1fr !important;
        gap: 28px;
    }

    /* Cluster */
    .pluma-cluster__grid--3cols,
    .pluma-cluster__grid--4cols,
    .pluma-cluster__grid--5cols,
    .pluma-cluster__grid--6cols {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .pluma-cluster-cats__grid--3cols,
    .pluma-cluster-cats__grid--4cols,
    .pluma-cluster-cats__grid--5cols,
    .pluma-cluster-cats__grid--6cols {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Compartir */
    .pluma-compartir {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        padding: 18px 16px;
    }

    /* Botón orbital */
    .pluma-menu-orbital.abierto .pluma-orbital-panel {
        width: 100vw !important;
    }
}

/* ----------------------------------------------------------------
   ≤ 480px  —  MÓVIL ESTÁNDAR (iPhone SE, Galaxy A)
   ---------------------------------------------------------------- */
@media (max-width: 480px) {

    /* Tipografía mínima legible */
    body {
        font-size: 15px;
    }

    p {
        font-size: 15px;
    }

    /* Header más compacto */
    .pluma-cabecera__contenido {
        height: 58px !important;
        padding: 0 12px !important;
    }

    .pluma-logo__nombre {
        font-size: 15px !important;
    }

    .pluma-logo__tagline {
        display: none !important;
    }

    /* Imagen hero del single — más alta en móvil */
    .ps-hero {
        min-height: 45vh !important;
    }

    .ps-hero__overlay {
        padding: 24px 12px 32px !important;
    }

    .ps-hero__titulo {
        font-size: clamp(20px, 6vw, 30px) !important;
    }

    /* Landing ajustes de pantalla pequeña */
    .lp-destinations-grid,
    .lp-categories-grid,
    .lp-stats-grid {
        grid-template-columns: 1fr !important;
    }

    .lp-footer-content {
        grid-template-columns: 1fr !important;
    }

    .lp-section-one .lp-center {
        padding: 32px 16px !important;
    }

    .lp-btn-e {
        display: block;
        text-align: center;
        width: 100%;
        box-sizing: border-box;
    }

    /* Admin panel */
    .pluma-admin-header {
        flex-direction: column;
        padding: 20px 16px;
        gap: 16px;
    }

    .pluma-admin-campo {
        grid-template-columns: 1fr !important;
    }

    .pluma-admin-tabs {
        gap: 4px;
    }

    .pluma-admin-tab {
        font-size: 12px;
        padding: 8px 12px;
    }

    .pluma-admin-tab span {
        display: none;
    }

    /* Footer */
    .pluma-footer-contenido {
        padding: 28px 12px 16px !important;
    }

    /* Autor en single */
    .ps-author__avatar img {
        width: 80px !important;
        height: 80px !important;
    }

    .ps-author__info h3 {
        font-size: 18px;
    }

    /* Comentarios */
    .ps-comments {
        padding: 20px 12px;
    }

    .ps-comments .comment {
        padding: 18px 14px;
    }

    /* Cluster — 1 sola columna */
    .pluma-cluster__grid--2cols,
    .pluma-cluster__grid--3cols,
    .pluma-cluster-cats__grid--2cols,
    .pluma-cluster-cats__grid--3cols {
        grid-template-columns: 1fr !important;
    }

    .pluma-cluster__titulo,
    .pluma-cluster-cats__titulo {
        font-size: 20px !important;
    }

    /* Barra de compartir: solo iconos */
    .pluma-compartir__btn span {
        display: none !important;
    }

    .pluma-compartir__btn {
        padding: 10px 14px !important;
    }

    .pluma-compartir__botones {
        gap: 8px;
    }
}

/* ----------------------------------------------------------------
   ≤ 360px  —  MÓVIL MUY PEQUEÑO (Galaxy A05, iPhone SE 1ª gen)
   ---------------------------------------------------------------- */
@media (max-width: 360px) {

    .pluma-cabecera__contenido {
        padding: 0 10px !important;
    }

    .pluma-logo__nombre {
        font-size: 13px !important;
    }

    h1 {
        font-size: 22px !important;
    }

    h2 {
        font-size: 19px !important;
    }

    h3 {
        font-size: 17px !important;
    }

    .lp-seccion .lp-center {
        padding: 24px 12px !important;
    }

    .pluma-footer-contenido {
        padding: 20px 10px !important;
    }

    .pluma-orbital-footer {
        padding: 16px 16px 24px !important;
    }
}

/* ----------------------------------------------------------------
   IMPRIMIR — Eliminar elementos innecesarios al imprimir
   ---------------------------------------------------------------- */
@media print {

    .pluma-cabecera,
    .pluma-footer-principal,
    .pluma-ir-arriba,
    .pluma-boton-menu,
    .pluma-menu-orbital,
    #pluma-cookies,
    .pluma-compartir,
    .ps-nav-posts,
    nav {
        display: none !important;
    }

    body {
        font-size: 12pt;
        color: #000;
        background: #fff;
    }

    a {
        color: #000;
        text-decoration: underline;
    }

    a[href]::after {
        content: " (" attr(href) ")";
        font-size: 10pt;
    }

    .ps-content {
        max-width: 100% !important;
        padding: 0 !important;
    }

    img {
        page-break-inside: avoid;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}

/* ----------------------------------------------------------------
   REDUCED MOTION — Respeto por usuarios con sensibilidad al movimiento
   ---------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ----------------------------------------------------------------
   MEJORAS DE LAYOUT FLUIDO CON CSS CLAMP
   Para elementos que no tienen su propio archivo de estilos
   ---------------------------------------------------------------- */
.pluma-bucle-contenido,
.pluma-contenido-single,
.pluma-contenido-pagina {
    padding-left: var(--pluma-padding);
    padding-right: var(--pluma-padding);
}

/* Grids del archive/blog fluidos */
.pluma-grid-entradas {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
    gap: var(--pluma-gap);
}

/* Imagen de post siempre con aspect ratio para evitar CLS */
.pluma-tarjeta-entrada__imagen,
.pluma-tarjeta-bucle .pluma-tarjeta-imagen {
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.pluma-tarjeta-entrada__imagen img,
.pluma-tarjeta-bucle .pluma-tarjeta-imagen img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Paginación táctil-friendly */
.pluma-paginacion {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    padding: 24px var(--pluma-padding);
}

.pluma-paginacion a,
.pluma-paginacion .page-numbers {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 14px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 14px;
}