/* ============================================================
   CityCell — Rediseño 2026
   Se carga DESPUÉS de style.min.css para poder sobrescribirla.
   Todo lo nuevo usa el prefijo .cc- para no chocar con el tema viejo.

   ESCALADO: el diseño es fluido. Los tamaños usan clamp(mínimo, fluido,
   máximo) para que en un monitor de 32" el contenido CREZCA en lugar de
   quedarse chico con franjas vacías a los lados.
   ============================================================ */

:root {
    --cc-green: #5FC42C;
    --cc-green-dark: #4CA320;
    --cc-amber: #F5A623;
    --cc-red: #E23B3B;
    --cc-black: #0B0C0E;
    --cc-black-soft: #16181C;
    --cc-ink: #111317;
    --cc-muted: #6B7280;
    --cc-line: #E5E7EB;
    --cc-bg-soft: #F4F5F7;
    --cc-radius: 16px;
    --cc-radius-lg: 26px;
    --cc-shadow: 0 2px 10px rgba(16, 18, 22, .06);
    --cc-shadow-lg: 0 14px 40px rgba(16, 18, 22, .12);
    --cc-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

    /* Ancho útil: crece hasta 2000px para llenar pantallas grandes. */
    --cc-max: 2400px;
    --cc-gap: clamp(12px, .9vw, 20px);
}

.cc-scope, .cc-scope * { box-sizing: border-box; }
.cc-scope { font-family: var(--cc-font); }
.cc-wrap { width: min(94%, var(--cc-max)); margin-inline: auto; }

/* ---------- Barra superior de avisos ---------- */
.cc-topbar {
    background: var(--cc-black);
    color: #D7DAE0;
    font-size: clamp(12px, .72vw, 15px);
    border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.cc-topbar .cc-wrap {
    display: flex; align-items: center; justify-content: space-between;
    gap: clamp(16px, 2vw, 40px); min-height: clamp(38px, 2.6vw, 52px);
}
.cc-topbar-items, .cc-topbar-links {
    display: flex; align-items: center; gap: clamp(16px, 1.7vw, 38px);
}
.cc-topbar span, .cc-topbar a { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.cc-topbar a { color: #D7DAE0; text-decoration: none; }
.cc-topbar a:hover { color: #fff; }
.cc-topbar i { font-size: 1.05em; opacity: .85; }

/* ---------- Cabecera principal ---------- */
.cc-header { background: var(--cc-black); }
.cc-header .cc-wrap {
    display: flex; align-items: center; gap: clamp(20px, 3vw, 70px);
    min-height: clamp(80px, 5.4vw, 116px);
}
.cc-logo { flex: 0 0 auto; }
.cc-logo img { height: clamp(42px, 3vw, 66px); width: auto; display: block; object-fit: contain; }

.cc-search { flex: 1 1 auto; max-width: clamp(420px, 42vw, 860px); }
.cc-search form { margin: 0; }
.cc-search-box {
    display: flex; align-items: center; background: #fff; border-radius: 999px;
    padding: clamp(5px, .35vw, 8px); padding-left: clamp(18px, 1.5vw, 30px);
    height: clamp(50px, 3.4vw, 72px);
}
.cc-search-box input {
    flex: 1; border: 0; outline: none; background: transparent;
    font-size: clamp(14px, .85vw, 18px); color: var(--cc-ink); min-width: 0;
}
.cc-search-box input::placeholder { color: #9AA1AD; }
.cc-search-btn {
    flex: 0 0 auto; aspect-ratio: 1; height: 100%; border: 0; border-radius: 50%;
    background: var(--cc-green); color: #fff; font-size: clamp(15px, .95vw, 20px);
    display: grid; place-items: center; cursor: pointer; transition: background .15s;
}
.cc-search-btn:hover { background: var(--cc-green-dark); }

.cc-actions { display: flex; align-items: center; gap: clamp(18px, 2.2vw, 48px); flex: 0 0 auto; }
.cc-action {
    display: inline-flex; align-items: center; gap: 10px; color: #fff;
    text-decoration: none; font-size: clamp(13px, .8vw, 17px); white-space: nowrap;
    position: relative; background: none; border: 0; padding: 0;
}
.cc-action:hover { color: var(--cc-green); }
.cc-action > i { font-size: clamp(19px, 1.25vw, 26px); }
.cc-badge {
    position: absolute; top: -8px; left: clamp(11px, .8vw, 16px);
    min-width: 20px; height: 20px; padding: 0 5px;
    background: var(--cc-green); color: #fff; border-radius: 999px;
    font-size: 11.5px; font-weight: 700; display: grid; place-items: center; line-height: 1;
}
.cc-account { position: relative; }
.cc-account-menu {
    position: absolute; top: 130%; right: 0; min-width: 200px; background: #fff;
    border-radius: 12px; box-shadow: var(--cc-shadow-lg); padding: 8px;
    list-style: none; margin: 0; z-index: 60;
    opacity: 0; visibility: hidden; transform: translateY(-6px); transition: .16s;
}
.cc-account:hover .cc-account-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.cc-account-menu a { display: block; padding: 10px 14px; border-radius: 8px; color: var(--cc-ink); text-decoration: none; font-size: 14px; }
.cc-account-menu a:hover { background: var(--cc-bg-soft); color: var(--cc-green-dark); }

/* ---------- Navegación de categorías ---------- */
.cc-catnav { background: var(--cc-black); padding-bottom: clamp(14px, 1.1vw, 24px); }
.cc-catnav .cc-wrap { display: flex; align-items: center; gap: clamp(14px, 1.6vw, 34px); }
.cc-catnav-all {
    display: inline-flex; align-items: center; gap: 10px; background: var(--cc-green);
    color: #fff; text-decoration: none; border-radius: 999px; flex: 0 0 auto; position: relative;
    padding: clamp(10px, .72vw, 16px) clamp(18px, 1.4vw, 30px);
    font-size: clamp(13px, .8vw, 17px); font-weight: 600;
}
.cc-catnav-all:hover { background: var(--cc-green-dark); color: #fff; }
.cc-catnav-list {
    display: flex; align-items: center; gap: clamp(18px, 1.9vw, 44px);
    list-style: none; margin: 0; padding: 0; overflow-x: auto; scrollbar-width: none;
}
.cc-catnav-list::-webkit-scrollbar { display: none; }
.cc-catnav-list a { color: #E7E9ED; text-decoration: none; font-size: clamp(13px, .82vw, 17px); white-space: nowrap; }
.cc-catnav-list a:hover { color: var(--cc-green); }
.cc-catnav-list .cc-is-offer a { color: var(--cc-green); font-weight: 600; }

.cc-catnav-drop {
    position: absolute; top: 118%; left: 0; min-width: 270px; background: #fff;
    border-radius: 14px; box-shadow: var(--cc-shadow-lg); padding: 8px;
    list-style: none; margin: 0; z-index: 60; max-height: 440px; overflow-y: auto;
    opacity: 0; visibility: hidden; transform: translateY(-6px); transition: .16s;
}
.cc-catnav-all:hover .cc-catnav-drop { opacity: 1; visibility: visible; transform: translateY(0); }
.cc-catnav-drop a { display: block; padding: 10px 14px; border-radius: 8px; color: var(--cc-ink); font-size: 14px; font-weight: 500; }
.cc-catnav-drop a:hover { background: var(--cc-bg-soft); color: var(--cc-green-dark); }

/* ---------- Hero ----------
   Tres columnas reales (texto | imagen | cotizador). Nada absoluto: así el
   bloque crece parejo en pantallas grandes en vez de descuadrarse.        */
.cc-hero-section { background: #fff; padding-top: clamp(16px, 1.2vw, 28px); }
.cc-hero {
    background: var(--cc-black); border-radius: var(--cc-radius-lg);
    display: grid;
    /* Proporciones medidas sobre el layout entregado:
       texto 42.5% | imagen 28.7% | cotizador 30.1% del ancho útil del hero. */
    /* Remedido sobre el layout: texto 35% | collage 36% | cotizador 29%.
       Antes le daba de más al texto y de menos al collage. */
    grid-template-columns: minmax(0, 1.22fr) minmax(0, 1.26fr) minmax(320px, 1fr);
    align-items: start; gap: clamp(20px, 2.2vw, 56px);
    padding: clamp(32px, 3vw, 68px);
    position: relative; overflow: hidden;
}
.cc-hero::after {
    content: ""; position: absolute; left: 38%; top: 50%;
    width: clamp(420px, 44vw, 900px); aspect-ratio: 1; transform: translateY(-50%);
    border-radius: 50%; pointer-events: none;
    background: radial-gradient(circle, rgba(95,196,44,.17) 0%, rgba(95,196,44,0) 62%);
}
.cc-hero-copy { position: relative; z-index: 2; }
.cc-eyebrow {
    color: var(--cc-green); font-weight: 700; letter-spacing: .12em;
    text-transform: uppercase; margin-bottom: clamp(12px, 1vw, 22px);
    font-size: clamp(12px, .72vw, 16px);
}
.cc-eyebrow b { color: #fff; font-weight: 700; }
.cc-hero h1 {
    color: #fff; font-weight: 800; letter-spacing: -.025em; line-height: 1.05;
    margin: 0 0 clamp(14px, 1.2vw, 30px); font-size: clamp(34px, 4.2vw, 108px);
}
.cc-hero h1 .cc-hl { color: var(--cc-green); }
.cc-hero-sub {
    color: #B9BEC7; line-height: 1.55; margin: 0 0 clamp(18px, 1.6vw, 34px);
    font-size: clamp(15px, .93vw, 21px); max-width: 26em;
}
.cc-hero-points {
    display: flex; gap: clamp(18px, 1.8vw, 42px);
    margin-bottom: clamp(20px, 1.8vw, 40px); flex-wrap: wrap;
}
.cc-hero-point { display: flex; align-items: center; gap: 10px; color: #E7E9ED; line-height: 1.3; font-size: clamp(12.5px, .76vw, 16px); }
.cc-hero-point .cc-ico {
    flex: 0 0 auto; width: clamp(30px, 2vw, 44px); aspect-ratio: 1; border-radius: 50%;
    border: 1px solid rgba(255,255,255,.22); display: grid; place-items: center;
    color: var(--cc-green); font-size: clamp(12px, .78vw, 17px);
}
.cc-btns { display: flex; gap: clamp(10px, .9vw, 20px); flex-wrap: wrap; }
.cc-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    border-radius: 12px; text-decoration: none; border: 1px solid transparent;
    cursor: pointer; transition: .15s; font-weight: 600;
    padding: clamp(13px, .95vw, 21px) clamp(22px, 1.7vw, 38px);
    font-size: clamp(14px, .85vw, 18px);
}
.cc-btn-primary { background: var(--cc-green); color: #fff; }
.cc-btn-primary:hover { background: var(--cc-green-dark); color: #fff; }
.cc-btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.3); }
.cc-btn-ghost:hover { background: rgba(255,255,255,.08); color: #fff; }

/* La ilustración ocupa ~85% de la altura del hero, como en el layout. */
.cc-hero-media { position: relative; z-index: 1; align-self: stretch; display: grid; place-items: center; min-height: clamp(280px, 30vw, 780px); }
/* (Regla retirada: era de cuando el hero tenía UNA sola imagen. Aplicaba a
   todas las <img> del hero y le ganaba por especificidad a .cc-hero-mascota,
   impidiendo darle su propio tamaño.) */
.cc-hero-tag {
    /* Medido en el layout: el centro del recuadro cae al 42% del ancho del
       collage y su base queda a ~3% del borde inferior de la ilustración.
       Al estar dentro de .cc-hero-media, estos % son de la ilustración. */
    position: absolute; left: 42%; bottom: 3%; transform: translateX(-50%);
    background: var(--cc-black-soft); border: 1px solid var(--cc-green);
    border-radius: clamp(13px, 1.05vw, 26px); text-align: center; z-index: 3;
    /* Medido contra el layout: el recuadro ocupa ~10% del ancho del hero. */
    padding: clamp(12px, 1.3vw, 30px) clamp(20px, 2.2vw, 52px);
}
.cc-hero-tag small { display: block; color: #C9CED6; line-height: 1.2; font-size: clamp(11px, .82vw, 21px); }
.cc-hero-tag b { display: block; color: var(--cc-green); font-weight: 800; line-height: 1.05; font-size: clamp(28px, 2.8vw, 78px); }

/* ---------- Cotizador ---------- */
.cc-quoter {
    background: #fff; border-radius: var(--cc-radius); position: relative; z-index: 3;
    box-shadow: var(--cc-shadow-lg); padding: clamp(20px, 1.35vw, 34px);
}
.cc-quoter-head { display: flex; align-items: center; gap: 13px; margin-bottom: clamp(15px, 1.1vw, 26px); }
.cc-quoter-head .cc-ico {
    width: clamp(42px, 2.9vw, 60px); aspect-ratio: 1; border-radius: 13px; flex: 0 0 auto;
    background: var(--cc-bg-soft); display: grid; place-items: center;
    color: var(--cc-green); font-size: clamp(18px, 1.2vw, 26px);
}
.cc-quoter-head h3 { margin: 0; font-weight: 700; color: var(--cc-ink); font-size: clamp(16px, 1vw, 23px); }
.cc-quoter-head p { margin: 2px 0 0; color: var(--cc-muted); font-size: clamp(12px, .72vw, 15px); }

.cc-field { margin-bottom: clamp(11px, .8vw, 18px); }
.cc-field label { display: block; color: var(--cc-muted); margin-bottom: 6px; font-size: clamp(12px, .72vw, 15px); }
.cc-field select, .cc-field input {
    width: 100%; border: 1px solid var(--cc-line); border-radius: 10px;
    padding: 0 13px; background: #fff; outline: none; color: var(--cc-ink);
    height: clamp(42px, 2.8vw, 58px); font-size: clamp(13.5px, .82vw, 17px);
}
.cc-field select:focus, .cc-field input:focus { border-color: var(--cc-green); }
.cc-row-between {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: clamp(11px, .8vw, 18px); font-size: clamp(13px, .8vw, 17px);
}
.cc-row-between span { color: var(--cc-muted); }
.cc-row-between b { color: var(--cc-ink); font-weight: 700; }

.cc-input-money { position: relative; }
.cc-input-money .cc-money-sign { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--cc-muted); font-size: clamp(13px, .8vw, 16px); }
.cc-input-money input { padding-left: 28px; padding-right: 64px; }
.cc-pct {
    position: absolute; right: 7px; top: 50%; transform: translateY(-50%);
    background: #E8F7DF; color: var(--cc-green-dark); border-radius: 8px;
    padding: 5px 10px; font-weight: 700; font-size: clamp(11.5px, .68vw, 14px);
}
.cc-quoter-result {
    display: flex; align-items: baseline; justify-content: space-between;
    padding-top: clamp(12px, 1vw, 20px); border-top: 1px solid var(--cc-line);
}
.cc-quoter-result span { color: var(--cc-ink); font-weight: 600; font-size: clamp(13.5px, .84vw, 18px); }
.cc-quoter-result b { color: var(--cc-green); font-weight: 800; font-size: clamp(24px, 1.65vw, 40px); }
.cc-quoter-total { text-align: right; color: var(--cc-muted); margin: 4px 0 clamp(13px, 1vw, 22px); font-size: clamp(11px, .66vw, 14px); }
.cc-quoter .cc-btn { width: 100%; }
.cc-quoter-note { text-align: center; color: var(--cc-muted); margin: clamp(9px, .7vw, 15px) 0 0; font-size: clamp(11px, .66vw, 14px); }

/* ---------- Tira de confianza ---------- */
.cc-trust { padding-top: clamp(16px, 1.3vw, 30px); }
.cc-trust-inner {
    background: var(--cc-bg-soft); border-radius: var(--cc-radius);
    display: grid; grid-template-columns: repeat(4, 1fr);
    padding: clamp(18px, 1.5vw, 36px) 0;
}
.cc-trust-item {
    display: flex; align-items: center; gap: clamp(12px, 1vw, 22px);
    padding: 0 clamp(16px, 1.6vw, 40px); border-right: 1px solid #E1E3E8;
}
.cc-trust-item:last-child { border-right: 0; }
.cc-trust-item .cc-ico { color: var(--cc-green); flex: 0 0 auto; font-size: clamp(22px, 1.6vw, 38px); }
.cc-trust-item h5 { margin: 0 0 3px; font-weight: 700; color: var(--cc-ink); line-height: 1.25; font-size: clamp(13.5px, .86vw, 19px); }
.cc-trust-item p { margin: 0; color: var(--cc-muted); font-size: clamp(12px, .74vw, 16px); }

/* ---------- Mosaico de categorías ---------- */
.cc-cats { padding-top: clamp(14px, 1.1vw, 26px); }
.cc-cats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(clamp(130px, 9vw, 230px), 1fr)); gap: var(--cc-gap); }
.cc-cat-card {
    background: #fff; border: 1px solid var(--cc-line); border-radius: var(--cc-radius);
    text-align: center; text-decoration: none; transition: .16s;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: clamp(9px, .7vw, 16px); padding: clamp(16px, 1.2vw, 28px) clamp(8px, .6vw, 16px);
    min-height: clamp(126px, 9vw, 200px);
}
.cc-cat-card:hover { border-color: var(--cc-green); box-shadow: var(--cc-shadow); transform: translateY(-2px); }
.cc-cat-card img { width: clamp(58px, 4.2vw, 96px); aspect-ratio: 1; object-fit: contain; }
.cc-cat-card span { color: var(--cc-ink); font-weight: 500; line-height: 1.25; font-size: clamp(12.5px, .8vw, 17px); }
.cc-cat-offer {
    background: var(--cc-green); width: clamp(58px, 4.2vw, 96px); aspect-ratio: 1;
    border-radius: 50%; display: grid; place-items: center; color: #fff;
    font-weight: 800; font-size: clamp(24px, 1.7vw, 40px);
}
.cc-cat-card.cc-is-offer span { color: var(--cc-green-dark); font-weight: 700; }

/* ---------- Tarjetas promocionales ---------- */
.cc-promos { padding-top: clamp(14px, 1.1vw, 26px); }
.cc-promos-grid { display: grid; grid-template-columns: 1fr 1.06fr 1fr; gap: var(--cc-gap); }
.cc-promo {
    background: var(--cc-black); border-radius: var(--cc-radius); color: #fff;
    display: flex; flex-direction: column; justify-content: center;
    padding: clamp(26px, 2.1vw, 52px); min-height: clamp(240px, 17vw, 380px);
    position: relative; overflow: hidden;
}
.cc-promo h3 {
    font-weight: 800; line-height: 1.15; letter-spacing: -.015em;
    margin: 0 0 clamp(14px, 1.2vw, 28px); font-size: clamp(22px, 1.62vw, 40px);
}
.cc-promo h3 .cc-hl { color: var(--cc-green); }
.cc-promo ul { list-style: none; margin: 0 0 clamp(18px, 1.5vw, 34px); padding: 0; display: grid; gap: clamp(8px, .65vw, 15px); }
.cc-promo li { display: flex; align-items: center; gap: 11px; color: #E7E9ED; font-size: clamp(13px, .85vw, 18px); }
.cc-promo li i { color: var(--cc-green); font-size: 1.1em; }
.cc-promo .cc-btn { align-self: flex-start; }
.cc-promo-media { padding: 0; align-items: center; justify-content: center; }
.cc-promo-media { padding: 0; overflow: hidden; }
.cc-promo-media a, .cc-promo-media img { display: block; width: 100%; height: 100%; }
/* PROVISIONAL: 'contain' para no cortar el banner ancho que hay hoy.
   Cuando llegue el gráfico definitivo de esta tarjeta (vertical, tipo
   celular + tarjeta), cambiar a 'cover' para que vaya a sangre como el layout. */
.cc-promo-media img { object-fit: contain; }

/* ---------- Secciones y rejilla de productos ---------- */
.cc-section { padding-top: clamp(26px, 2.3vw, 58px); }
.cc-section-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; margin-bottom: clamp(14px, 1.1vw, 26px);
}
.cc-section-head h2 { margin: 0; font-weight: 800; color: var(--cc-ink); letter-spacing: -.015em; font-size: clamp(20px, 1.55vw, 38px); }
.cc-section-tools { display: flex; align-items: center; gap: clamp(10px, .8vw, 18px); }
.cc-section-link { color: var(--cc-green); font-weight: 600; text-decoration: none; font-size: clamp(13px, .82vw, 17px); }
.cc-section-link:hover { color: var(--cc-green-dark); }
.cc-arrow {
    width: clamp(30px, 2.1vw, 44px); aspect-ratio: 1; border-radius: 50%;
    border: 1px solid var(--cc-line); background: #fff; color: var(--cc-ink);
    display: grid; place-items: center; cursor: pointer; transition: .15s;
    font-size: clamp(12px, .75vw, 16px);
}
.cc-arrow:hover { background: var(--cc-green); border-color: var(--cc-green); color: #fff; }

.cc-prod-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--cc-gap); }
.cc-prod {
    background: #fff; border: 1px solid var(--cc-line); border-radius: var(--cc-radius);
    padding: clamp(12px, .95vw, 22px); display: flex; flex-direction: column;
    position: relative; transition: .16s;
}
.cc-prod:hover { box-shadow: var(--cc-shadow-lg); border-color: #D8DBE1; transform: translateY(-2px); }
.cc-prod-top { position: relative; margin-bottom: clamp(10px, .8vw, 18px); }
.cc-prod-img { display: block; width: 100%; height: clamp(160px, 12vw, 270px); object-fit: contain; background: #fff; }
.cc-flags { position: absolute; top: 0; left: 0; display: flex; flex-direction: column; gap: 5px; z-index: 2; align-items: flex-start; }
.cc-flag {
    font-weight: 700; padding: 4px 10px; border-radius: 7px; color: #fff;
    background: var(--cc-ink); line-height: 1.35; font-size: clamp(10.5px, .64vw, 13px);
}
.cc-flag.cc-top { background: var(--cc-amber); }
.cc-flag.cc-new { background: var(--cc-green); }
.cc-flag.cc-off { background: var(--cc-red); }
.cc-wish {
    position: absolute; top: 0; right: 0; width: clamp(28px, 2vw, 40px); aspect-ratio: 1;
    border-radius: 50%; border: 0; background: transparent; color: #9AA1AD;
    display: grid; place-items: center; cursor: pointer; z-index: 2; transition: .15s;
    font-size: clamp(14px, .95vw, 20px);
}
.cc-wish:hover { color: var(--cc-red); }

.cc-prod-brand { color: var(--cc-muted); margin: 0 0 2px; font-size: clamp(11.5px, .7vw, 15px); }
.cc-prod-name { font-weight: 600; line-height: 1.3; margin: 0 0 clamp(7px, .55vw, 12px); font-size: clamp(13px, .82vw, 18px); min-height: 2.6em; }
.cc-prod-name a { color: var(--cc-ink); text-decoration: none; }
.cc-prod-name a:hover { color: var(--cc-green-dark); }
.cc-prod-price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.cc-prod-price .cc-now { font-weight: 800; color: var(--cc-ink); font-size: clamp(17px, 1.15vw, 27px); }
.cc-prod-price .cc-was { color: #9AA1AD; text-decoration: line-through; font-size: clamp(12px, .74vw, 16px); }
.cc-prod-month { color: var(--cc-muted); margin: 3px 0 clamp(8px, .7vw, 14px); font-size: clamp(11.5px, .7vw, 15px); }
.cc-prod-month b { color: var(--cc-green-dark); font-weight: 700; }
.cc-prod-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; }
.cc-stars { display: flex; align-items: center; gap: 5px; color: var(--cc-muted); font-size: clamp(11px, .68vw, 14px); }
.cc-cart-btn {
    width: clamp(36px, 2.5vw, 52px); aspect-ratio: 1; border-radius: 11px; flex: 0 0 auto;
    border: 1px solid var(--cc-line); background: #fff; color: var(--cc-ink);
    display: grid; place-items: center; cursor: pointer; transition: .15s;
    font-size: clamp(14px, .9vw, 19px);
}
.cc-cart-btn:hover { background: var(--cc-green); border-color: var(--cc-green); color: #fff; }

/* Estrellas: productReview() trae su propio <ul>, se adapta a la tarjeta nueva */
.cc-stars .product-review { display: flex; gap: 2px; list-style: none; margin: 0; padding: 0; }
.cc-stars .product-review .review-item { color: #D5D8DE; font-size: 1em; line-height: 1; }
.cc-stars .product-review .review-item.active { color: var(--cc-amber); }
.cc-stars em { font-style: normal; color: var(--cc-muted); }

/* ---------- Marcas ---------- */
.cc-brands-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(clamp(130px, 9vw, 230px), 1fr)); gap: var(--cc-gap); }
.cc-brand {
    background: #fff; border: 1px solid var(--cc-line); border-radius: 12px;
    display: grid; place-items: center; transition: .16s;
    height: clamp(62px, 4.4vw, 100px); padding: clamp(10px, .8vw, 20px);
}
.cc-brand:hover { border-color: var(--cc-green); box-shadow: var(--cc-shadow); }
.cc-brand img { max-width: 100%; max-height: clamp(34px, 2.8vw, 64px); object-fit: contain; }
.cc-brand-all { color: var(--cc-ink); font-weight: 600; text-decoration: none; font-size: clamp(12.5px, .8vw, 17px); }
.cc-brand-all:hover { color: var(--cc-green-dark); }

.cc-bottom-space { padding-bottom: clamp(40px, 3.4vw, 84px); }

/* ---------- Adaptación a pantallas menores ---------- */
/* Entre 1200 y 1400px ya no caben tres columnas: texto e imagen se apilan a la
   izquierda y el cotizador ocupa entera la columna derecha. (La regla anterior
   ponía imagen y cotizador en la MISMA celda y se encimaban.) */
@media (max-width: 1199px) {
    .cc-hero { grid-template-columns: minmax(0, 1fr) clamp(300px, 31vw, 420px); }
    .cc-hero-copy  { grid-column: 1; grid-row: 1; }
    .cc-hero-media { grid-column: 1; grid-row: 2; min-height: clamp(200px, 18vw, 340px); }
    .cc-quoter     { grid-column: 2; grid-row: 1 / span 2; align-self: start; }
    .cc-prod-grid  { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 1199px) {
    .cc-hero { grid-template-columns: 1fr; }
    .cc-hero-media, .cc-quoter { grid-column: 1; grid-row: auto; }
    .cc-prod-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 991px) {
    .cc-header .cc-wrap { flex-wrap: wrap; padding-block: 14px; gap: 14px; }
    .cc-search { order: 3; flex-basis: 100%; max-width: none; }
    .cc-trust-inner { grid-template-columns: repeat(2, 1fr); gap: 18px 0; }
    .cc-trust-item:nth-child(2n) { border-right: 0; }
    .cc-promos-grid { grid-template-columns: 1fr; }
    .cc-cats-grid, .cc-brands-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 575px) {
    .cc-topbar-items span:nth-child(n+3), .cc-topbar-links a:first-child { display: none; }
    .cc-actions { gap: 20px; }
    .cc-action > span:not(.cc-badge) { display: none; }
    .cc-prod-grid, .cc-cats-grid, .cc-brands-grid { grid-template-columns: repeat(2, 1fr); }
    .cc-trust-inner { grid-template-columns: 1fr; }
    .cc-trust-item { border-right: 0; }
}

/* Categoría sin imagen: marcador neutro, NO el círculo verde de Ofertas. */
.cc-cat-ph {
    width: clamp(58px, 4.2vw, 96px); aspect-ratio: 1; border-radius: 50%;
    background: var(--cc-bg-soft); color: #9AA1AD; display: grid; place-items: center;
    font-size: clamp(20px, 1.5vw, 36px);
}

/* Estado TEMPORAL: hero sin ilustración (a la espera del arte definitivo).
   El recuadro "Hasta 24 meses" se centra en el hueco en vez de quedar
   colgado abajo. Al volver a activar la imagen, esta clase desaparece
   sola y el recuadro regresa a su sitio sobre el collage. */
.cc-hero-media.cc-sin-arte .cc-hero-tag {
    bottom: auto; top: 50%; transform: translate(-50%, -50%);
}

/* ============================================================
   LOGO SOBRE FONDO OSCURO
   El archivo del logo trae "CRÉDITO TOTAL" en letras NEGRAS, que
   se pierden sobre el negro de la cabecera. Se recorta esa franja
   por CSS (el archivo original NO se toca: el panel y el pie lo
   siguen usando completo) y la línea se reescribe como texto
   blanco, que además se ve más nítido.
   Si algún día llega el logo en versión clara, basta con quitar
   .cc-logo-mark y .cc-logo-sub.
   ============================================================ */
.cc-logo a { display: inline-flex; flex-direction: column; gap: .32em; text-decoration: none; }
.cc-logo-mark {
    display: block; overflow: hidden;
    height: calc(var(--cc-logo-h) * .68);   /* recorta la línea inferior */
}
.cc-logo-mark img { height: var(--cc-logo-h); width: auto; display: block; }
.cc-logo-sub {
    display: block; color: #fff; font-weight: 700; line-height: 1;
    font-size: calc(var(--cc-logo-h) * .118);
    letter-spacing: calc(var(--cc-logo-h) * .085);
    text-indent: calc(var(--cc-logo-h) * .085);   /* compensa el espaciado final */
    white-space: nowrap;
}
.cc-header .cc-logo { --cc-logo-h: clamp(46px, 3.1vw, 72px); }

/* ---------- Cabecera móvil (Rediseño 2026) ---------- */
.cc-mheader { background: var(--cc-black); }
.cc-mtop {
    display: flex; align-items: center; justify-content: center; gap: 18px;
    padding: 9px 12px; font-size: 11.5px; color: #C9CED6;
    border-bottom: 1px solid rgba(255,255,255,.07);
}
.cc-mtop span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.cc-mtop i { color: var(--cc-green); }

.cc-mbar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding: 12px 14px 4px;
}
.cc-mlogo { --cc-logo-h: 40px; display: block; text-decoration: none; }
.cc-mlogo .cc-logo-sub { font-size: 6.5px; letter-spacing: 3px; text-indent: 3px; }

.cc-mactions { display: flex; align-items: center; gap: 6px; }
.cc-micon {
    position: relative; width: 40px; height: 40px; flex: 0 0 auto;
    display: grid; place-items: center; border: 0; background: transparent;
    color: #fff; font-size: 19px; border-radius: 10px; cursor: pointer;
    text-decoration: none; transition: background .15s;
}
.cc-micon:hover, .cc-micon:active { background: rgba(255,255,255,.1); color: #fff; }
.cc-micon .cc-badge { top: 3px; left: 22px; }

.cc-msearch { padding: 8px 14px 14px; }
.cc-msearch .cc-search-box { height: 46px; padding: 4px 4px 4px 18px; }
.cc-msearch .cc-search-box input { font-size: 14px; }
.cc-msearch .cc-search-btn { font-size: 15px; }

/* ---------- Páginas internas con el ancho del rediseño ----------
   El tema viejo usa .container de Bootstrap (tope 1320px). En un monitor
   grande eso dejaba el catálogo encajonado mientras la cabecera ocupaba
   todo el ancho. .cc-page iguala ambos. */
.container.cc-page { width: min(94%, var(--cc-max)); max-width: none; }

/* Nombre del producto: máximo 3 líneas, así todas las tarjetas de la fila
   miden lo mismo y la rejilla no queda dentada. */
.cc-prod-name {
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
    overflow: hidden; min-height: 3.9em;
}
/* "o desde $X/mes" nunca se parte en dos renglones. */
.cc-prod-month { white-space: nowrap; }

/* Filtros de la barra lateral con el estilo nuevo */
.cc-page .sidebar-widget-area, .cc-page .widget-area {
    background: #fff; border: 1px solid var(--cc-line);
    border-radius: var(--cc-radius); box-shadow: none;
}
.cc-page .widget-title, .cc-page .sidebar-widget-title {
    background: transparent; color: var(--cc-ink);
    font-weight: 700; font-size: clamp(14px, .9vw, 18px);
    border-bottom: 1px solid var(--cc-line);
}

/* ---------- Altura uniforme de la foto del producto ----------
   La altura fija sobre el <img> la pisaba alguna regla del tema viejo,
   dejando las tarjetas de distinta altura. Se fija en el CONTENEDOR
   (que ninguna regla de imágenes toca) y la foto lo llena por dentro. */
.cc-prod .cc-prod-top { height: clamp(170px, 12vw, 280px); margin-bottom: clamp(10px, .8vw, 18px); }
.cc-prod .cc-prod-top > a { display: block; width: 100%; height: 100%; }
.cc-prod .cc-prod-img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* Todas las tarjetas de la fila con la misma altura y el pie abajo. */
.cc-prod-grid > .cc-prod { height: 100%; }

/* ---------- Filtros laterales del catálogo (Rediseño 2026) ---------- */
.cc-page .single-widget {
    background: #fff !important;
    border: 1px solid var(--cc-line);
    border-radius: var(--cc-radius);
    overflow: hidden;
    margin-bottom: var(--cc-gap);
    box-shadow: none;
}
.cc-page .widget-header {
    background: transparent !important;
    border-bottom: 1px solid var(--cc-line);
    padding: clamp(12px, .85vw, 18px) clamp(14px, 1vw, 22px);
}
.cc-page .widget-title {
    color: var(--cc-ink) !important;
    font-weight: 700;
    font-size: clamp(14px, .88vw, 18px);
    margin: 0;
    text-transform: none;
}
.cc-page .widget-menu { padding: clamp(8px, .6vw, 14px) clamp(14px, 1vw, 22px); }
.cc-page .widget-menu li { border-color: var(--cc-line) !important; }
.cc-page .widget-menu label,
.cc-page .widget-menu a { color: var(--cc-ink); font-size: clamp(13px, .82vw, 16px); }
.cc-page .widget-menu label:hover,
.cc-page .widget-menu a:hover { color: var(--cc-green-dark); }
.cc-page .price-widget input[type="text"],
.cc-page .price-widget input[type="number"] {
    border: 1px solid var(--cc-line); border-radius: 10px; height: 42px;
}
.cc-page .price-widget button,
.cc-page .price-widget .btn {
    background: var(--cc-green) !important; border-color: var(--cc-green) !important;
    border-radius: 10px; color: #fff !important;
}

/* ---------- Ficha de producto (Rediseño 2026) ---------- */
.cc-ficha-mes {
    font-size: clamp(14px, .9vw, 19px); color: var(--cc-muted);
    margin: 6px 0 14px; line-height: 1.4;
}
.cc-ficha-mes b { color: var(--cc-green-dark); font-weight: 800; }
.cc-ficha-mes span { display: block; font-size: .82em; color: #9AA1AD; margin-top: 2px; }

/* Botones de compra con el verde de la marca (venían en verde azulado) */
.cc-page .buy-now-btn, .cc-page .buyNow, .cc-page a.buy-now,
.cc-page .product-buy-btn .buy-btn {
    background: var(--cc-green) !important; border-color: var(--cc-green) !important;
    color: #fff !important; border-radius: 12px !important;
}
.cc-page .buy-now-btn:hover, .cc-page .buyNow:hover {
    background: var(--cc-green-dark) !important; border-color: var(--cc-green-dark) !important;
}
.cc-page .add-cart, .cc-page .addCart {
    border-radius: 12px !important; border: 1px solid var(--cc-line) !important;
    color: var(--cc-ink) !important; background: #fff !important;
}
.cc-page .add-cart:hover, .cc-page .addCart:hover {
    background: var(--cc-green) !important; border-color: var(--cc-green) !important; color: #fff !important;
}

/* La galería no debe ocupar media pantalla en monitores grandes */
.cc-page .product-details-images img,
.cc-page .single-product-image img { max-height: clamp(320px, 30vw, 620px); object-fit: contain; }

/* Pestañas de descripción con el estilo nuevo */
.cc-page .nav-tabs .nav-link, .cc-page .product-tab-btn {
    border-radius: 10px 10px 0 0; color: var(--cc-muted); font-weight: 600;
}
.cc-page .nav-tabs .nav-link.active, .cc-page .product-tab-btn.active {
    color: var(--cc-green-dark); border-color: var(--cc-line) var(--cc-line) #fff;
}

/* Galería de la ficha: las fotos venían a tamaño completo y ocupaban
   toda la pantalla en monitores grandes. (Clases reales del tema.) */
.cc-page .product-priview-slide-v2 .single-slide { height: clamp(320px, 26vw, 560px); }
.cc-page .slide-image {
    width: 100%; height: 100%; object-fit: contain; background: #fff;
}
.cc-page .product-thumb-silide-v2 .single-item { height: clamp(70px, 6vw, 120px); }
.cc-page .product-thumb-silide-v2 .single-item-image {
    width: 100%; height: 100%; object-fit: contain;
}

/* El carrusel (Owl) impone su altura por su propia hoja; hace falta ganarle
   con especificidad para que la foto no ocupe pantalla completa. */
.cc-page .product-single-left .product-priview-slide-v2 .single-slide .slide-image,
.cc-page .product-slier-big-image img.slide-image {
    max-height: clamp(300px, 24vw, 520px) !important;
    width: auto !important; max-width: 100%;
    margin: 0 auto; display: block; object-fit: contain;
}
.cc-page .product-thumb-silide-v2 .single-item-image {
    max-height: clamp(64px, 5.5vw, 110px) !important; width: auto !important; margin: 0 auto;
}

/* Altura fija en el CONTENEDOR de cada diapositiva (lo del <img> no bastaba). */
.cc-page .product-priview-slide-v2 .single-slide {
    height: clamp(300px, 24vw, 520px) !important;
    display: flex !important; align-items: center; justify-content: center;
}
.cc-page .product-priview-slide-v2 .single-slide img {
    height: 100% !important; width: 100% !important;
    object-fit: contain !important; max-height: none !important;
}

/* ============================================================
   ILUSTRACIÓN DEL HERO — dos capas (productos + duende)
   El collage es apaisado (1536x1024) y la columna es más alta que
   ancha, así que se le deja desbordar hacia el texto (el hero tiene
   overflow:hidden y ese lado es negro vacío) para que llene de verdad.
   ============================================================ */
.cc-hero-media { position: relative; display: block; }

.cc-hero-art {
    position: relative; z-index: 1;
    /* Medido contra el layout: el collage ocupa ~85% del alto del hero.
       Como el arte es apaisado y la columna es alta, hay que agrandarlo
       bastante y dejar que desborde hacia la izquierda (zona negra vacía);
       el borde derecho se frena justo antes del cotizador. */
    width: 200%; max-width: none; height: auto;
    margin-left: -93%;
    display: block;
    top: 50%; transform: translateY(-50%);
}
.cc-hero-mascota {
    position: absolute; z-index: 3;
    /* Más chico y más a la derecha: en el layout acompaña al collage,
       no lo tapa. El celular y el reloj deben verse completos. */
    /* Al costado del collage, no encima: el reloj y el celular
       deben quedar visibles completos. */
    /* El duende mide ~25% del alto del hero en el layout = ~242px en 2560.
       Va en vw y NO en %: la caja del hero no tiene altura fija, así que un
       porcentaje no resolvía y la imagen salía a tamaño natural. */
    right: 4%; bottom: 4%;
    width: auto;
    pointer-events: none;
}
/* El recuadro "24 meses" va por encima del collage pero detrás del duende. */
.cc-hero-tag { z-index: 4; }

@media (max-width: 1399px) {
    /* Aquí el collage cuelga bajo el texto: a lo ancho de su columna, sin desbordar. */
    .cc-hero-art { width: 104%; margin-left: -2%; top: 0; transform: none; }
    .cc-hero-mascota { height: clamp(130px, 12vw, 200px); right: 2%; bottom: 2%; }
}
@media (max-width: 1199px) {
    .cc-hero-art { width: 100%; margin-left: 0; margin-inline: auto; top: 0; transform: none; }
    .cc-hero-mascota { height: clamp(120px, 16vw, 190px); right: 2%; bottom: 2%; }
}
@media (max-width: 575px) {
    .cc-hero-art { width: 108%; margin-left: -4%; }
    .cc-hero-mascota { height: clamp(95px, 26vw, 150px); right: 0; bottom: 2%; }
}

/* En celular el collage se achica y el recuadro caía justo encima:
   se recorre a la izquierda, sobre la zona libre. */
@media (max-width: 575px) {
    .cc-hero-tag { left: 24%; bottom: 6%; }
    .cc-hero-tag b { font-size: 30px; }
    .cc-hero-tag small { font-size: 11px; }
}




/* ============================================================
   HERO — ILUSTRACIÓN: BLOQUE ÚNICO Y AUTORITATIVO
   ------------------------------------------------------------
   Todo lo relativo al collage, al duende y al recuadro "24 meses"
   vive AQUÍ y en ningún otro sitio. Antes había parches sueltos
   que se contradecían entre sí.

   Reglas de oro aprendidas a golpes:
   1. Todo lleva !important: el tema original recorta las imágenes
      con max-width:100% y anula los tamaños en silencio.
   2. El collage NUNCA desborda sobre la columna del texto. Solo
      invade los espacios vacíos entre columnas. Se comprobó a
      1440px (MacBook Pro 13") y a 2560px.
   3. El hero NO se apila en laptops: alargarlo se ve peor.
   ============================================================ */

/* --- Escritorio (1200px en adelante): tres columnas --- */
.cc-hero-art {
    width: 108% !important;
    margin-left: -4% !important;
    max-width: none !important;
    height: auto !important;
}
.cc-hero-mascota {
    height: 46% !important;
    right: 1% !important;
    bottom: -1% !important;
    width: auto !important;
}
.cc-hero-tag { left: 34%; bottom: 3%; }

/* --- Tablet: el cotizador baja y el collage ocupa el ancho --- */
@media (max-width: 1199px) {
    .cc-hero       { grid-template-columns: minmax(0, 1fr) clamp(300px, 31vw, 420px); }
    .cc-hero-copy  { grid-column: 1; grid-row: 1; }
    .cc-hero-media { grid-column: 1; grid-row: 2; }
    .cc-quoter     { grid-column: 2; grid-row: 1 / span 2; align-self: start; }
    .cc-hero-art     { width: 102% !important; margin-left: -1% !important; }
    .cc-hero-mascota { height: 44% !important; right: 2% !important; }
    .cc-hero-tag     { left: 30%; bottom: 3%; }
}

/* --- Una sola columna --- */
@media (max-width: 991px) {
    .cc-hero { grid-template-columns: 1fr; }
    .cc-hero-copy, .cc-hero-media, .cc-quoter { grid-column: 1; grid-row: auto; }
}

/* --- Celular --- */
@media (max-width: 575px) {
    .cc-hero-art     { width: 110% !important; margin-left: -5% !important; }
    .cc-hero-mascota { height: 42% !important; right: 0 !important; bottom: 0 !important; }
    .cc-hero-tag     { left: 27%; bottom: 4%; }
    .cc-hero-tag b     { font-size: 30px; }
    .cc-hero-tag small { font-size: 11px; }
}