/* ==========================================================================
   Z-BOMBILLA SHIPPING - PRECIOS.CSS
   Versión: cards neutras + CRECE destacado + tabla por columnas coloreadas
   Colores planes:
   - Impulso: azul
   - Crece: verde
   - Avanza: naranja
   - Élite: morado
   ========================================================================== */


/* ==========================================================================
   01) Variables (colores, tipografía, escalas)
   ========================================================================== */
:root{
    /* Marca */
    --zb-orange: #f26f03;
    --zb-orange-dark: #d85f02;

    /* Colores por plan (todos al accent del tema) */
    /* Colores por plan (originales) */
    --c-impulso: #3b82f6;  /* azul */
    --c-crece:   #22c55e;  /* verde */
    --c-avanza:  #f26f03;  /* naranja */
    --c-elite:   #8b5cf6;  /* morado */

    /* Textos / bordes */
    --zb-text: #111827;
    --zb-muted: #6b7280;
    --zb-border: rgba(17, 24, 39, .10);

    /* Escala tipográfica */
    --fz-base: 15px;
    --fz-title: clamp(1.55rem, 2.2vw, 2.05rem);
    --fz-section: 1.30rem; /* un pelín más fino */
    --fz-small: .92rem;

    /* Pesos */
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fw-xbold: 800;
}

/* ==========================================================================
   02) Layout general del bloque de precios
   ========================================================================== */
.pricing-wrap{
    font-size: var(--fz-base);
    color: var(--zb-text);
    padding-bottom: 2.5rem;
}

.pricing-header{
    margin-bottom: 1.5rem;
}

.pricing-title{
    font-size: var(--fz-title);
    font-weight: var(--fw-bold);
    margin-bottom: .35rem;
    letter-spacing: -0.02em;
}


/* ==========================================================================
   03) Toggle Mensual/Anual
   ========================================================================== */
.toggle-container{
    margin-top: .85rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .65rem;
    padding: .5rem .85rem;
    border: 1px solid var(--zb-border);
    border-radius: 999px;
    background: #fff;
}

.toggle-label{
    color: var(--zb-text);
    font-weight: var(--fw-semibold);
    font-size: .92rem;
}

.toggle-discount{
    color: var(--zb-orange);
    font-weight: var(--fw-bold);
}

/* Switch */
.switch{ position: relative; display: inline-block; width: 50px; height: 26px; }
.switch input{ opacity: 0; width: 0; height: 0; }

.slider{
    position: absolute; cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: #e5e7eb;
    transition: .2s;
    border-radius: 999px;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
}

.slider:before{
    position: absolute; content: "";
    height: 20px; width: 20px;
    left: 3px; bottom: 3px;
    background-color: white;
    transition: .2s;
    border-radius: 999px;
    box-shadow: 0 4px 10px rgba(0,0,0,.12);
}

input:checked + .slider{ background-color: var(--zb-orange); }
input:checked + .slider:before{ transform: translateX(24px); }


/* ==========================================================================
   04) Cards (base neutra) + asignación de color por plan
   - Las cards deben verse "normales": sin fondos coloreados.
   - Solo el icono (y detalles de CRECE) usa el color del plan.
   ========================================================================== */
.plan-grid{ margin-top: 1.15rem; }

.plan-card{
    background: #fff;
    border: 1px solid var(--zb-border);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 12px 30px rgba(0,0,0,.05);
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;

    /* neutraliza cualquier "tinte" si existiese */
    --plan-color: var(--zb-text);
}

.plan-card:hover{
    transform: translateY(-3px);
    box-shadow: 0 16px 40px rgba(0,0,0,.08);
}

/* Variables por plan (solo para icono y estilos específicos) */
.plan-card.plan-impulso{ --plan-color: var(--c-impulso); }
.plan-card.plan-crece  { --plan-color: var(--c-crece); }
.plan-card.plan-avanza { --plan-color: var(--c-avanza); }
.plan-card.plan-elite  { --plan-color: var(--c-elite); }


/* ==========================================================================
   05) Header del pack (alineado y a misma altura)
   - Nombre arriba (grande)
   - Icono centrado
   - Frase en 1 sola línea
   ========================================================================== */
.plan-header{
    position: relative;
    text-align: center;
    background: #fff;
    border-bottom: 1px solid var(--zb-border);

    /* fuerza misma altura de cabecera en los 4 */
    min-height: 162px;

    padding: 1rem 1rem .95rem;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: .55rem;
}

.plan-name{
    font-size: 1.12rem;
    font-weight: var(--fw-xbold);
    letter-spacing: -0.01em;
    margin: 0;
    line-height: 1.15;

    /* alinea aunque un título se rompa */
    min-height: 2.35em;

    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.plan-tagline{
    font-size: .92rem;
    font-weight: var(--fw-medium);
    color: var(--zb-muted);

    /* 1 sola línea */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}


/* ==========================================================================
   06) Icono del pack (solo esto coloreado)
   ========================================================================== */
.plan-icon-bubble{
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: grid;
    place-items: center;

    /* neutral */
    background: rgba(17,24,39,.03);
    border: 1px solid rgba(17,24,39,.10);
}

.plan-icon-bubble i{
    font-size: 26px;
    color: var(--plan-color); /* <- color del plan */
}


/* ==========================================================================
   07) Badge "Recomendado" como ribbon rotada (solo en Crece)
   ========================================================================== */
.plan-badge{
    position: absolute;
    top: 14px;
    right: -42px;
    transform: rotate(35deg);
    transform-origin: center;

    font-size: .72rem;
    font-weight: var(--fw-xbold);
    letter-spacing: .06em;
    padding: .35rem 2.25rem;
    border-radius: 999px;

    background: rgba(242,111,3,.14);
    color: var(--zb-orange-dark);
    border: 1px solid rgba(242,111,3,.32);
    box-shadow: 0 10px 20px rgba(242,111,3,.14);
}

@media (max-width: 575px){
    .plan-badge{
        right: -36px;
        top: 12px;
        font-size: .7rem;
    }
}

/* ==========================================================================
   08) Box de precio (neutro) + alineación vertical
   - Mantiene misma altura para que las features arranquen igual
   ========================================================================== */
.plan-pricing{
    margin-top: .2rem;
    padding: .75rem .75rem .45rem;

    background: #fff;
    border: 1px dashed rgba(17,24,39,.18);
    border-radius: 12px;

    min-height: 92px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.price-display{
    font-size: 1.45rem;
    font-weight: var(--fw-xbold);
    color: var(--zb-text);
    line-height: 1.15;
}

.price-per{
    font-size: .95rem;
    font-weight: var(--fw-semibold);
    color: var(--zb-muted);
}

.price-billing{
    display: inline-block;
    margin-top: .2rem;
    font-weight: var(--fw-medium);
    color: var(--zb-muted);
}

.price-subtext{
    margin-top: .3rem;
    font-size: .9rem;
    color: var(--zb-muted);
    font-weight: var(--fw-medium);
}


/* ==========================================================================
   09) Lista de features (incluye + normal)
   ========================================================================== */
.plan-features{
    list-style: none;
    padding-left: 0;
    margin: 1rem 0 1.15rem;
}

.plan-features li{
    display: flex;
    gap: .55rem;
    align-items: flex-start;
    margin: .55rem 0;
    font-size: .92rem;
    font-weight: var(--fw-medium);
    line-height: 1.35;
    color: var(--zb-text);
}

.plan-features li::before{
    content: "✓";
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    margin-top: 1px;
    background: rgba(16,185,129,.12);
    color: #059669;
    font-weight: var(--fw-bold);
    font-size: .85rem;
}

/* "Incluye todo lo del pack anterior" */
.plan-features li.feature-includes{
    color: var(--zb-muted);
    font-weight: var(--fw-medium);
    cursor: help;
}

.plan-features li.feature-includes::before{
    content: "+";
    background: rgba(17,24,39,.06);
    color: rgba(17,24,39,.60);
}


/* ==========================================================================
   10) CTA (botón)
   ========================================================================== */
.btn-zb{
    background-color: var(--zb-orange);
    border-color: var(--zb-orange);
    color: #fff;
    font-weight: var(--fw-bold);
    border-radius: 12px;
    padding: .72rem 1rem;
    box-shadow: 0 10px 20px rgba(242,111,3,.18);
}

.btn-zb:hover,
.btn-zb:focus{
    background-color: var(--zb-orange-dark);
    border-color: var(--zb-orange-dark);
    color: #fff;
}


/* ==========================================================================
   11) SOLO Crece destacado (seleccionado)
   ========================================================================== */
.plan-card.plan-crece{
    border-color: rgba(242,111,3,.45);
    box-shadow: 0 18px 50px rgba(242,111,3,.16);
    transform: translateY(-2px);
}

.plan-card.plan-crece:hover{
    transform: translateY(-5px);
}

/* bubble con toque naranja suave */
.plan-card.plan-crece .plan-icon-bubble{
    background: rgba(242,111,3,.08);
    border-color: rgba(242,111,3,.25);
}

/* pricing box con punteado naranja */
.plan-card.plan-crece .plan-pricing{
    border-color: rgba(242,111,3,.35);
    background: rgba(242,111,3,.03);
}

/* ==========================================================================
   12) Nota bajo los packs
   ========================================================================== */
.pricing-note{
    color: var(--zb-muted);
    font-size: .92rem;
}


/* ==========================================================================
   13) Comparativa (títulos + hint)
   ========================================================================== */
.comparison-title{
    font-size: var(--fz-section);
    font-weight: var(--fw-xbold);
    margin-bottom: .25rem;
    letter-spacing: -0.015em;
}

.comparison-subtitle{
    color: var(--zb-muted);
    font-weight: var(--fw-medium);
    font-size: .95rem;
}

.comparison-hint{
    display: inline-block;
    text-align: left;
    font-size: .86rem;
    color: var(--zb-muted);
    background: rgba(17,24,39,.03);
    border: 1px solid rgba(17,24,39,.06);
    border-radius: 12px;
    padding: .6rem .75rem;
}


/* ==========================================================================
   14) Tabla: estilo base
   ========================================================================== */
.comparison-table{
    border: 1px solid var(--zb-border);
    border-radius: 14px;
    overflow: hidden;
    background: #fff;

    /* para que los colores de columnas se vean más limpios */
    border-collapse: separate;
    border-spacing: 0;
}

.comparison-table thead th{
    border-bottom: 1px solid var(--zb-border);
    font-weight: var(--fw-bold);
    font-size: .92rem;
    color: var(--zb-text);
    vertical-align: middle;
}

.comparison-table td,
.comparison-table th{
    padding: .85rem .85rem;
    border-color: rgba(17, 24, 39, .08);
    font-size: .93rem;
}

.feature-col{
    min-width: 260px;
    font-weight: var(--fw-semibold);
    color: var(--zb-text);
}

.plan-col{
    min-width: 140px;
    text-align: center;
}

.th-pack{
    display: inline-flex;
    gap: .45rem;
    align-items: center;
    justify-content: center;
    font-weight: var(--fw-bold);
}


/* =======================================================================
   15) Tabla: columnas con color del pack (AZUL/VERDE/NARANJA/MORADO)
   ======================================================================= */

/* Fondo por columna (cabecera + celdas) */
.plan-impulso-col, .plan-impulso-td { background: rgba(59,130,246,.06) !important; }
.plan-crece-col,   .plan-crece-td   { background: rgba(34,197,94,.06) !important; }
.plan-avanza-col,  .plan-avanza-td  { background: rgba(242,111,3,.06) !important; }
.plan-elite-col,   .plan-elite-td   { background: rgba(139,92,246,.06) !important; }

/* Icono cabecera */
.plan-impulso-col .th-pack i{ color: var(--c-impulso) !important; }
.plan-crece-col   .th-pack i{ color: var(--c-crece) !important; }
.plan-avanza-col  .th-pack i{ color: var(--c-avanza) !important; }
.plan-elite-col   .th-pack i{ color: var(--c-elite) !important; }

/* Línea superior de cada columna */
.plan-impulso-col{ border-top: 3px solid var(--c-impulso) !important; }
.plan-crece-col  { border-top: 3px solid var(--c-crece) !important; }
.plan-avanza-col { border-top: 3px solid var(--c-avanza) !important; }
.plan-elite-col  { border-top: 3px solid var(--c-elite) !important; }


/* ==========================================================================
   16) Tabla: checks y valores
   ========================================================================== */
.cmp-check{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    font-weight: var(--fw-bold);
}

.plan-impulso-td .cmp-check{ background: rgba(59,130,246,.10); color: var(--c-impulso); }
.plan-crece-td   .cmp-check{ background: rgba(34,197,94,.10); color: var(--c-crece); }
.plan-avanza-td  .cmp-check{ background: rgba(242,111,3,.10); color: var(--c-avanza); }
.plan-elite-td   .cmp-check{ background: rgba(139,92,246,.10); color: var(--c-elite); }

.cmp-dash{
    color: rgba(17,24,39,.35);
    font-weight: var(--fw-bold);
}

.cmp-value{
    font-weight: var(--fw-semibold);
    color: var(--zb-text);
}

/* Descripción en gris pequeña debajo de la funcionalidad (para el transporte, etc.) */
.feature-note{
    margin-top: .25rem;
    font-size: .82rem;
    color: var(--zb-muted);
    font-weight: var(--fw-medium);
    line-height: 1.35;
}


/* ==========================================================================
   17) Responsive tweaks
   ========================================================================== */
@media (max-width: 767px){
    .feature-col{ min-width: 220px; }
    .price-display{ font-size: 1.35rem; }
}