/* ==========================================================
   COMPONENTE: EQUIPOS SUGERIDOS
   Extiende variables.css / components-base.css
   Incluye TODOS los estilos del componente completo (portada,
   proveedores y recomendaciones), aunque el HTML esté separado
   en distintos bloques dentro del CMS — este CSS es compartido.
========================================================== */

/* ----------------------------------------------------------
   Portada / Hero
---------------------------------------------------------- */

.c-banner{
    background:linear-gradient(135deg, var(--color-blue-50) 0%, var(--background-white) 60%);
    overflow:hidden;
}

.c-banner__grid{
    display:grid;
    grid-template-columns:1.1fr .9fr;
    gap:var(--space-2xl);
    align-items:center;
}

@media (max-width:991.98px){
    .c-banner__grid{
        grid-template-columns:1fr;
    }
}

.c-banner__actions{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:var(--space-sm);
    margin-top:var(--space-md);
}

.c-banner__media{
    position:relative;
    text-align:center;
}

.c-banner__media::before{
    content:"";
    position:absolute;
    top:50%;
    left:50%;
    width:86%;
    padding-bottom:86%;
    transform:translate(-50%,-50%);
    border-radius:50%;
    background:var(--color-secondary-orange);
    opacity:.5;
    z-index:0;
}

.c-banner__image{
    position:relative;
    z-index:1;
    width:100%;
    height:auto;
    display:block;
    border-radius:var(--radius-xl);
    box-shadow:var(--shadow-lg);
}

@media (max-width:991.98px){
    .c-banner{
        text-align:center;
    }
    .c-banner .c-description{
        margin-left:auto;
        margin-right:auto;
    }
    .c-banner__actions{
        justify-content:center;
    }
    .c-banner__media{
        margin-top:var(--space-xl);
    }
}

/* ----------------------------------------------------------
   Ícono de categoría — variante cálida de .c-icon (ya definido
   en components-base.css: tamaño, radius, display flex, etc.)
---------------------------------------------------------- */

.c-icon--orange{
    background:var(--color-secondary-orange);
    color:var(--color-primary-orange-hover);
}

.c-cat-head__label{
    display:flex;
    align-items:center;
    gap:1rem;
    margin-bottom:1rem;
}

.c-cat-head__label .c-icon{
    margin-bottom:0;
    flex-shrink:0;
}

/* ----------------------------------------------------------
   Índice de sección (eyebrow tipo "01 — Impresión de tickets")
---------------------------------------------------------- */

.c-eyebrow-index{
    display:block;
    font-family:var(--font-title-family);
    font-size:var(--font-size-xs);
    font-weight:var(--font-weight-bold);
    letter-spacing:.06em;
    text-transform:uppercase;
    color:var(--color-primary-orange-hover);
    margin-bottom:.25rem;
}

/* Título de sección de categoría (más chico que el c-title del hero) */

.c-title--section{
    font-size:var(--font-size-heading);
    margin-bottom:0;
    position:relative;
    padding-bottom:.6rem;
}

.c-title--section::after{
    content:"";
    position:absolute;
    left:0;
    bottom:0;
    width:44px;
    height:4px;
    border-radius:var(--radius-pill);
    background:var(--color-primary-orange);
}

/* ----------------------------------------------------------
   Layout de encabezado de categoría
   2 columnas: (ícono + título + foto, agrupados) / (descripción + tips)

   FIX: los items de grid tienen min-width:auto por defecto, así que
   una imagen con tamaño intrínseco grande "revienta" su columna en
   vez de respetar el fr asignado. min-width:0 en los hijos directos
   del grid soluciona el desborde.

   La foto ya NO se recorta (sin aspect-ratio ni object-fit:cover):
   mantiene su proporción natural y solo se limita su ancho máximo.
---------------------------------------------------------- */

.c-cat-head{
    display:grid;
    grid-template-columns:.85fr 1.15fr;
    gap:var(--space-2xl);
    margin-bottom:var(--space-lg);
    align-items:start;
}

.c-cat-head > div{
    min-width:0;
}

.c-cat-head__media{
    max-width:320px;
    min-width:0;
}

.c-cat-head__media img{
    width:100%;
    max-width:100%;
    height:auto;
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-sm);
    display:block;
}

/* ----------------------------------------------------------
   Lista de consideraciones ("tips")
---------------------------------------------------------- */

.c-tips{
    list-style:none;
    margin:1rem 0 0;
    padding:0;
}

.c-tips li{
    position:relative;
    padding-left:1.25rem;
    margin-bottom:.55rem;
    color:var(--color-secondary-gray);
    font-size:var(--font-size-small);
    line-height:var(--line-height-normal);
}

.c-tips li::before{
    content:"—";
    position:absolute;
    left:0;
    color:var(--color-primary-orange);
    font-weight:var(--font-weight-bold);
}

/* ----------------------------------------------------------
   Tabs de proveedor (Cyberpuerta / Mercado Libre / Amazon...)
---------------------------------------------------------- */

.c-tabs{
    display:flex;
    gap:.5rem;
    flex-wrap:wrap;
    margin-top:1.25rem;
    margin-bottom:var(--space-sm);
}

.c-tab-btn{
    font-family:var(--font-body-family);
    font-weight:var(--font-weight-semibold);
    font-size:var(--font-size-small);
    padding:.5rem 1rem;
    border-radius:var(--radius-pill);
    border:1px solid var(--color-border);
    background:var(--color-white);
    color:var(--color-gray-light);
    cursor:pointer;
    transition:var(--transition-fast);
}

.c-tab-btn:hover{
    border-color:var(--color-border-hover);
    color:var(--color-secondary-blue);
}

.c-tab-btn.is-active{
    background:var(--color-primary-blue);
    border-color:var(--color-primary-blue);
    color:var(--color-white);
    box-shadow:var(--shadow-sm);
}

.c-tab-panel{
    display:none;
}

.c-tab-panel.is-active{
    display:block;
}

/* ----------------------------------------------------------
   Grid de productos (usa .c-card de components-base.css)
---------------------------------------------------------- */

.c-product-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
    gap:var(--space-sm);
}

.c-card--product{
    padding:1.25rem 1.4rem;
    display:flex;
    flex-direction:column;
    gap:.4rem;
    text-decoration:none;
    border-left:3px solid transparent;
}

.c-card--product:hover{
    border-left-color:var(--color-primary-orange);
}

.c-card--product .c-card__title{
    font-size:var(--font-size-body);
    margin-bottom:0;
}

.c-card--product .c-card__link{
    font-size:var(--font-size-xs);
    font-weight:var(--font-weight-semibold);
    color:var(--color-primary-orange-hover);
}

.c-card--product .c-card__link::after{
    content:" \2192";
    transition:margin var(--transition-fast);
}

.c-card--product:hover .c-card__link::after{
    margin-left:3px;
}

/* Link único (sin variedad de proveedor, ej. etiquetas Avery) */

.c-single-link{
    display:inline-flex;
    align-items:center;
    gap:.6rem;
    background:var(--color-white);
    border:1px solid var(--color-border);
    border-left:3px solid var(--color-primary-orange);
    border-radius:var(--radius-lg);
    padding:1rem 1.4rem;
    text-decoration:none;
    font-weight:var(--font-weight-semibold);
    color:var(--color-secondary-blue);
    transition:var(--transition-fast);
}

.c-single-link:hover{
    border-color:var(--color-border-hover);
    border-left-color:var(--color-primary-orange);
    box-shadow:var(--shadow-sm);
}

.c-single-link .c-card__link{
    font-size:var(--font-size-xs);
    color:var(--color-primary-orange-hover);
}

/* ----------------------------------------------------------
   Franja "Proveedores de confianza"
---------------------------------------------------------- */

.c-providers{
    background:var(--background-light-blue);
    text-align:center;
}

.c-providers .c-title{
    color:var(--color-secondary-blue);
    margin-left:auto;
    margin-right:auto;
}

.c-providers .c-description{
    color:var(--color-secondary-gray);
    margin-left:auto;
    margin-right:auto;
}

.c-providers__logos{
    display:flex;
    justify-content:center;
    gap:1rem;
    flex-wrap:wrap;
    margin-top:var(--space-lg);
}

.c-logo-pill{
    background:var(--color-white);
    border:1px solid var(--color-border);
    border-radius:var(--radius-md);
    padding:1rem 1.75rem;
    font-family:var(--font-title-family);
    font-weight:var(--font-weight-bold);
    color:var(--color-secondary-blue);
    text-decoration:none;
    display:inline-flex;
    transition:var(--transition-fast);
}

.c-logo-pill:hover{
    border-color:var(--color-border-hover);
    transform:translateY(-3px);
    box-shadow:var(--shadow-md);
}

/* ----------------------------------------------------------
   Responsive
---------------------------------------------------------- */

@media (max-width:991.98px){

    .c-cat-head{
        grid-template-columns:1fr;
        gap:var(--space-md);
    }
}

@media (max-width:767.98px){

    .c-product-grid{
        grid-template-columns:1fr;
    }

    .c-cat-head__label .c-icon{
        width:48px;
        height:48px;
    }
}