/* ============================================
   HERBEPLAST — TABLET / iPad
   tablet.css (Archivo 3 de 3)
   Este archivo contiene ÚNICAMENTE quiebres de tablet.
   - Base/desktop vive en styles.css
   - Mobile vive en mobile.css

   Qué corregí vs tu versión:
   1) Eliminé @media anidados (CSS plano NO soporta @media dentro de @media).
      -> Esto es un error grave: el navegador puede ignorar reglas o aplicarlas de forma inconsistente.
   2) Reorganicé los quiebres para que sean claros:
      A) 768–1023  : Tablet (portrait típico)
      B) 1024–1199 : Tablet large / small desktop (incluye iPad Pro portrait)
      C) 1024–1199 landscape: Ajustes finos opcionales cuando hay mucho ancho pero poco alto.
   3) Aislamiento de CERTIFICACIONES:
      -> Todo lo de certificaciones va bajo #certificaciones para evitar “sangrados”.

   Nota:
   - NO agrego estilos “generales” fuera de @media (como pediste).
   ============================================ */


/* ============================================
   A) TABLET (768px - 1023px)
   - iPad portrait típico / tablets medianas
   - Ajusta tipografía, hero/video, carrusel y layout de valor.
   - Certificaciones: 3 columnas x 2 filas (6 items)
   ============================================ */
@media (min-width: 768px) and (max-width: 1023px) {
    :root {
        --container-padding: 1.5rem;
        /* Altura disponible en tablet descontando header (72px) */
        --vh-available-tablet: calc(100dvh - 72px);
    }

    /* Tipografía */
    h1 { font-size: 40px; }
    h2 { font-size: 32px; }
    h3 { font-size: 24px; }
    .section-title { font-size: 36px; }

    /* ===== HERO (≈70% del alto disponible) ===== */
    section#hero.hero {
        height: calc(var(--vh-available-tablet) * 0.7);
        min-height: 0;       /* anula mínimos previos */
        max-height: none;
        padding-bottom: 0;   /* evita sumar altura extra */
    }

    .hero { min-height: 0; }

    .hero-overlay {
        background: linear-gradient(
                to bottom,
                rgba(0, 130, 194, 0.25) 0%,
                rgba(0, 130, 194, 0.45) 50%,
                rgba(0, 130, 194, 0.75) 80%,
                rgba(0, 130, 194, 0.9) 100%
        );
    }

    .hero-title { font-size: 44px; }
    .hero-subtitle { font-size: 18px; }
    .hero-scroll-indicator { bottom: var(--space-5); }

    .hero-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* ===== VIDEO (≈30% del alto disponible) ===== */
    .video-section {
        height: calc(var(--vh-available-tablet) * 0.3);
        min-height: 0;
        background: var(--color-black);
        overflow: hidden;
    }

    /* Con altura fija basada en viewport, NO usar aspect-ratio aquí */
    .video-container {
        width: 100%;
        height: 100%;
        aspect-ratio: auto;
    }

    .institutional-video {
        width: 100%;
        height: 100%;
        object-fit: cover; /* llenar sin franjas */
        background: var(--color-black);
    }

    /* ===== CARRUSEL (tablet) ===== */
    .carousel-wrapper { padding: 0 56px; } /* espacio para flechas */
    .carousel-card { flex: 0 0 calc(48% - var(--space-2)); }
    .carousel-control {
        display: flex;
        width: 44px;
        height: 44px;
    }

    /* ===== VALOR (2 columnas) ===== */
    .valor-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--space-8);
        align-items: center;
    }

    /* ===== CERTIFICACIONES (Tablet vertical) =====
       - 6 items => 3 columnas x 2 filas
       - Sin scroll (hereda desktop “sin scroll” y lo reafirmamos)
       - Ajuste de tamaños para que se vea “tablet”, no “mobile agrandado”
    */



    #certificaciones .certifications-scroll-wrapper {
        overflow: visible;
        padding-bottom: 0;
    }

    #certificaciones .certifications-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--space-5);
    }

    #certificaciones .certification-item {
        padding: var(--space-4) var(--space-3);
    }

    #certificaciones .cert-icon { height: 190px; }

    #certificaciones .cert-icon img {
        max-width: 120px;
        max-height: 190px;
    }

    #certificaciones .cert-title {
        font-size: 14px;
        min-height: 36px;
    }

    #certificaciones .cert-description {
        font-size: 12px;
        min-height: 32px;
    }

    #certificaciones .scroll-indicator { display: none; }

    /* ===== CLIENTES (si activas ese bloque) ===== */
    .clients-logos { grid-template-columns: repeat(3, 1fr); }

    /* ===== FOOTER ===== */
    .footer-grid { grid-template-columns: repeat(2, 1fr); }

    /* ===== WHATSAPP ===== */
    .whatsapp-float {
        width: 60px;
        height: 60px;
        bottom: var(--space-5);
        right: var(--space-5);
    }

    /* Nota: Si NO quieres animaciones en tablet, mueve esto a styles.css y controla allí.
       Lo dejo igual para no romper tu diseño existente. */
    .page-header-title {
        font-size: 26px;
        font-weight: 800;
        color: #fff;
        margin-bottom: 8px;
        line-height: 1.1;
        letter-spacing: -0.5px;
        text-shadow: 0 2px 20px rgba(0,0,0,.15);
        animation: title-glow 3s ease-in-out infinite;
    }

    .page-header-subtitle {
        font-size: 12px;
        font-weight: 500;
        color: rgba(255,255,255,.9);
        letter-spacing: 1px;
        text-transform: uppercase;
    }

    /* Tablet: siempre color (no hay hover confiable) */
    #certificaciones .cert-icon img {
        filter: none !important;
    }

}


/* ============================================
   B) TABLET-LARGE / SMALL DESKTOP (1024px - 1199px)
   - Incluye iPad Pro en portrait (1024px)
   - Mantiene tu lógica: HERO 70% + VIDEO 30%
   ============================================ */
@media (min-width: 1024px) and (max-width: 1199px) {
    :root { --vh-available-tlarge: calc(100dvh - 72px); }

    /* HERO ≈70% */
    section#hero.hero {
        height: calc(var(--vh-available-tlarge) * 0.7);
        min-height: 0;
        max-height: none;
        padding-bottom: 0;
    }

    .hero { min-height: 0; }

    .hero-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* VIDEO ≈30% */
    .video-section {
        height: calc(var(--vh-available-tlarge) * 0.3);
        min-height: 0;
        background: var(--color-black);
        overflow: hidden;
    }

    .video-container {
        width: 100%;
        height: 100%;
        aspect-ratio: auto;
    }

    .institutional-video {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* Page headers (tal cual los tenías) */
    .page-header-title {
        font-size: 36px;
        font-weight: 800;
        color: #fff;
        margin-bottom: 8px;
        line-height: 1.1;
        letter-spacing: -0.5px;
        text-shadow: 0 2px 20px rgba(0,0,0,.15);
        animation: title-glow 3s ease-in-out infinite;
    }

    .page-header-subtitle {
        font-size: 14px;
        font-weight: 500;
        color: rgba(255,255,255,.9);
        letter-spacing: 1px;
        text-transform: uppercase;
    }
}


/* ============================================
   C) AJUSTES OPCIONALES — 1024px-1199px en LANDSCAPE
   - NO anidado (corrección del error grave)
   - Dos ajustes:
     1) Más video / menos hero (como ya lo tenías)
     2) Certificaciones: mantener 6 en una fila pero compactar gap/padding
   ============================================ */
@media (min-width: 1024px) and (max-width: 1199px) and (orientation: landscape) {
    /* (Opcional) Más espacio al video en landscape */
    section#hero.hero { height: calc(var(--vh-available-tlarge) * 0.6); }
    .video-section { height: calc(var(--vh-available-tlarge) * 0.4); }

    /* CERTIFICACIONES — Tablet horizontal “apretado” */
    #certificaciones .certifications-grid {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: var(--space-4);
    }

    #certificaciones .certification-item {
        padding: var(--space-4) var(--space-3);
    }

    #certificaciones .cert-icon { height: 200px; }

    #certificaciones .cert-icon img {
        max-width: 120px;
        max-height: 200px;
    }

    #certificaciones .cert-title {
        font-size: 14px;
        min-height: 36px;
    }

    #certificaciones .cert-description {
        font-size: 12px;
        min-height: 32px;
    }
}