/* ═══════════════════════════════════════════════════════════════
   REDESIGN.CSS — Capa editorial (mockup "Home RALOZ v2" / "Movil RALOZ")
   ---------------------------------------------------------------
   Se carga DE ÚLTIMA, después de base/layout/components/pages, así
   que gana por orden de cascada sin reescribir las reglas previas.
   Solo cambia lo VISUAL (geometría, color, bordes). No toca ningún
   id/clase de los que depende el JS ni la estructura del HTML.

   Idea del rediseño: misma paleta de marca, pero look editorial —
   esquinas rectas, bordes gruesos de color, bloques sólidos y plano
   (sin sombras suaves ni gradientes de relleno).
═══════════════════════════════════════════════════════════════ */

/* ── 1. Geometría: aplanar radios a esquinas rectas ─────────────
   La mayoría de tarjetas/inputs/modales usan estos tokens, así que
   con esto se cuadra casi todo el sitio de una. Lo redondo a propósito
   (avatares, dots, botón de WhatsApp, badge del carrito) usa 50% o
   999px explícitos y NO se ve afectado. */
:root {
  --radius:    0px;
  --radius-sm: 0px;
  --radius-lg: 0px;
}

/* ── 2. Tipografía de display: acentos itálicos y remate amarillo
   ya vienen bien de base; solo afinamos el subrayado amarillo. */
.section-title .accent,
.hero-wrap h1 .accent,
.hero-title .accent {
  background-image: linear-gradient(transparent 62%, var(--yellow) 62%);
}

/* ── 3. Announcement bar — chip cuadrado estilo "Nuevo" ─────────── */
.ann-cta {
  border-radius: 0;
  background: var(--yellow);
  font-weight: 800;
}
.ann-cta:hover { background: #ffe080; }

/* ── 4. Navbar — sólida, borde inferior grueso, logo circular ──── */
#main-nav,
.nav {
  background: var(--white);
  border-bottom: 3px solid var(--ink);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
/* Logo: círculo azul con R amarilla (como el mockup) */
.logo-mark {
  border-radius: 50%;
  background: var(--blue);
  color: var(--yellow);
}
#main-nav ul li a { border-radius: 0; }
#main-nav ul li a:hover  { background: var(--blue-soft); }
#main-nav ul li a.active { background: var(--blue-soft); color: var(--blue); }

/* Buscador y CTA del nav: cuadrados y planos */
.nav-search-bar {
  border-radius: 0;
  border: 2px solid var(--line);
  background: var(--paper);
}
.nav-search-bar:hover { border-color: var(--blue); background: var(--paper); }
.nav-tienda-btn,
.nav-cta-btn {
  border-radius: 0;
  box-shadow: none;
  font-weight: 800;
}
.nav-tienda-btn:hover,
.nav-cta-btn:hover { transform: none; background: var(--red); color: var(--white); }

/* Carrito del nav: círculo azul relleno (como el mockup) */
.nav-carrito-btn,
#navCarritoBtn {
  border-radius: 50%;
  background: var(--blue);
  border: none;
  color: var(--white);
}
.nav-carrito-btn:hover,
#navCarritoBtn:hover { background: var(--blue-dark); }

/* Toggle móvil cuadrado con borde marcado */
.nav-toggle { border-radius: 0; border: 2px solid var(--ink); }

/* ── 5. Hero — encuadre editorial, filo amarillo en la foto ────── */
.hero-eyebrow {
  background: transparent;
  padding: 0;
  color: var(--blue);
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  font-size: 12.5px;
}
/* El "dot" pasa a ser una barrita roja, como en el mockup */
.hero-eyebrow .dot {
  width: 30px;
  height: 3px;
  border-radius: 0;
  background: var(--red);
}

.hero-right-card {
  border-radius: 0;
  border: 2px solid var(--ink);
  box-shadow: none;
  background: var(--white);
}
.hero-photo-wrap {
  border-radius: 0;
  border-left: 8px solid var(--yellow);
}
/* Etiqueta superior: chip cuadrado; caja de calidad: cuadrada */
.photo-tag    { border-radius: 0; }
.photo-quality{ border-radius: 0; }

.quick-school {
  border-radius: 0;
  border: 2px solid var(--line);
}
.quick-school:hover { box-shadow: none; border-color: var(--ink); }
.qs-flag { border-radius: 0; }

/* Trust row: separador sólido en vez de punteado */
.trust-row { border-top: 2px solid var(--line); }

/* ── 6. Barra de stats — 4 BLOQUES DE COLOR SÓLIDO ─────────────
   Igual que el mockup: azul · rojo · amarillo · negro. */
.inicio-stats-bar { background: transparent; }
.inicio-stat {
  flex: 1 1 25%;
  min-width: 150px;
  border-right: none;
  padding: 22px 26px;
}
.inicio-stat:nth-child(1) { background: var(--blue); }
.inicio-stat:nth-child(2) { background: var(--red); }
.inicio-stat:nth-child(3) { background: var(--yellow); }
.inicio-stat:nth-child(4) { background: var(--ink); }
/* Números y etiquetas legibles en cada fondo */
.inicio-stat:nth-child(2) strong { color: var(--white); }          /* rojo */
.inicio-stat:nth-child(3) strong { color: var(--ink); }            /* amarillo */
.inicio-stat:nth-child(3) span   { color: #5a4a00; opacity: 1; }   /* amarillo */

/* ── 7. Botones — cuadrados y planos (editorial) ───────────────── */
.btn { border-radius: 0; }
.btn:hover { transform: none; }
.btn-primary {
  box-shadow: none;
  font-weight: 800;
}
.btn-primary:hover { background: var(--red); color: var(--white); box-shadow: none; }
.btn-dark  { font-weight: 800; }
.btn-blue  { box-shadow: none; font-weight: 800; }
.btn-ghost { border-width: 3px; font-weight: 800; }
.btn-ghost:hover { background: var(--yellow); color: var(--ink); border-color: var(--ink); }

/* ── 8. Tarjetas de colegio (portada) — borde de color por colegio
   + filo superior grueso, esquinas rectas. Mantiene el layout de
   foto con overlay y el onclick del JS intacto. */
.colegio-card {
  border-radius: 0;
  box-shadow: none;
  border: 2px solid var(--ink);
  border-top-width: 6px;
}
.colegio-card:hover { box-shadow: none; transform: translateY(-3px); }
.colegio-card[data-colegio="1"] { border-color: var(--blue); }
.colegio-card[data-colegio="2"] { border-color: var(--red); }
.colegio-card[data-colegio="3"] { border-color: var(--yellow); }
.colegio-shield { border-radius: 0; }
.colegio-cta    { border-radius: 0; font-weight: 800; }
.colegios-extra { border-radius: 0; border-width: 2px; }

/* ── 9. Ofertas / suscripción / destacados — cuadrar ───────────── */
.promo-card      { border-radius: 0; box-shadow: none; }
.promo-cta       { border-radius: 0; font-weight: 800; }
.suscripcion-card{ border-radius: 0; border-width: 2px; }
.susc-form input[type="tel"] { border-radius: 0; }
.destacado-card  { border-radius: 0; }
.destacado-card:hover { box-shadow: none; }

/* ── 10. Tienda (JS) — cards de colegio y de producto cuadradas
   con bordes marcados; chips/filtros rectangulares. */
.tienda-colegio-card {
  border-radius: 0;
  border-width: 2px;
  box-shadow: none;
}
.tienda-colegio-card:hover { box-shadow: none; transform: translateY(-2px); border-color: var(--blue); }
.tienda-colegio-card .tc-icon-wrap,
.tienda-colegio-card .tc-escudo { border-radius: 0; }

.tienda-producto-card {
  border-radius: 0;
  border-width: 2px;
  box-shadow: none;
}
.tienda-producto-card:hover { box-shadow: none; transform: translateY(-4px); }

.chip,
.tienda-filtro,
.filter-chips .chip {
  border-radius: 0;
  border-width: 2px;
  font-weight: 700;
}
.school-tabs { border-radius: 0; }
.school-tab  { border-radius: 0; }

/* Precio con remate amarillo (como el mockup) */
.tpc-precio {
  background-image: linear-gradient(transparent 62%, var(--yellow) 62%);
  padding: 0 3px;
}
/* Botón agregar: cuadrado, plano */
.btn-agregar-carrito {
  border-radius: 0;
  box-shadow: none;
  color: var(--white);
  background: var(--blue);
}
.btn-agregar-carrito:hover {
  background: var(--blue-dark);
  box-shadow: none;
  transform: translateY(-2px);
}
.btn-agregar-carrito.btn-fab { background: var(--red); box-shadow: none; }
.btn-agregar-carrito.btn-fab:hover { background: #b81622; box-shadow: none; }

/* Tags de stock/tipo: rectangulares */
.tpc-tipo-tag,
.tpc-fab-badge,
.tpc-stock-ok,
.tpc-stock-poco,
.tpc-badge-poco,
.tpc-badge-fab { border-radius: 0; }

/* ── 11. Modales / carrito / checkout — cuadrar remates ─────────── */
.carrito-item        { border-radius: 0; }
.ci-img              { border-radius: 0; }
#carritoCheckout     { border-radius: 0; font-weight: 800; }
.carrito-panel-header button { border-radius: 0; }
.talla-pill          { border-radius: 0; border-width: 2px; }
.btn-talla-add       { border-radius: 0; box-shadow: none; font-weight: 800; }
.btn-talla-add:hover:not(:disabled) { box-shadow: none; }
.talla-bs-close      { border-radius: 0; }
.checkout-campo input,
.checkout-campo select,
.checkout-campo textarea { border-radius: 0; }
#checkoutPagarBtn    { border-radius: 0; font-weight: 800; }
#checkoutCerrar,
#colorCerrar         { border-radius: 0; }
.ck-abono-btn        { border-radius: 0; border-width: 2px; }

/* ── 12. Relojes — cuadrar la card y el banner ─────────────────── */
.relojes-side-banner { border-radius: 0; }
.reloj-card          { border-radius: 0; }
.reloj-card:hover    { box-shadow: 0 10px 30px rgba(0,0,0,0.45); }
.btn-reloj-comprar   { border-radius: 0; font-weight: 800; }

/* ── 13. Contacto — cuadrar tarjetas e inputs ──────────────────── */
.contacto-channel     { border-radius: 0; border-width: 2px; }
.contacto-channel-icon{ border-radius: 0; }
.contacto-form-wrap   { border-radius: 0; border-width: 2px; }
#contactoForm input,
#contactoForm textarea { border-radius: 0 !important; }

/* ── 14. Footer — filo rojo superior (firma del rediseño) ──────── */
footer { border-top: 6px solid var(--red); }
.footer-mini-cta { border-radius: 0; font-weight: 800; }
/* Títulos de columna en amarillo (como el mockup) */
footer .footer-grid h4 { color: var(--yellow); }

/* ═══════════════════════════════════════════════════════════════
   REPRODUCCIÓN FIEL DEL MOCKUP (layout, no solo estilo)
═══════════════════════════════════════════════════════════════ */

/* ── A. HERO dividido con panel de foto (Home RALOZ v2) ─────────
   Izquierda: copy + fila de pago. Derecha: panel azul con franja
   amarilla, foto a sangre, badge rojo y barra oscura con escudo. */
.hero-wrap { align-items: stretch; }

.hero-pay {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.hero-pay img { height: 26px; width: auto; }
.hero-pay-chip { font-weight: 700; padding: 7px 12px; font-size: 13px; }
.hero-pay-chip.b { background: var(--blue-soft); color: var(--blue); }
.hero-pay-chip.y { background: #fdf3cf; color: #8a6c00; }

.hero-panel {
  position: relative;
  display: flex;
  background: var(--blue);
  min-height: 520px;
}
.hero-panel-strip {
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 12px; background: var(--yellow); z-index: 2;
}
.hero-panel-photo {
  position: relative; flex: 1;
  margin-left: 12px; overflow: hidden;
}
.hero-panel-photo > img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 16%;
}
.hero-panel-badge {
  position: absolute; top: 16px; right: 16px;
  background: var(--red); color: #fff;
  font-size: 11px; font-weight: 800; letter-spacing: 1px;
  text-transform: uppercase; padding: 8px 13px;
}
.hero-panel-caption {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: var(--ink); color: #fff;
  padding: 16px 20px;
  display: flex; align-items: center; gap: 14px;
}
.hpc-shield {
  width: 44px; height: 44px; background: #fff;
  display: flex; align-items: center; justify-content: center;
  padding: 5px; flex-shrink: 0;
}
.hpc-shield img { max-height: 100%; width: auto; }
.hpc-eyebrow {
  font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--yellow); font-weight: 800; margin-bottom: 4px;
}
.hpc-text { font-family: 'Fraunces', serif; font-size: 16px; line-height: 1.25; }
@media (max-width: 900px) { .hero-panel { min-height: 380px; } }
@media (max-width: 600px) { .hero-panel { min-height: 300px; } }

/* ── B. TARJETAS DE COLEGIO estilo v2 (tarjeta blanca) ──────────
   Reemplaza el layout foto-overlay por: franja de color arriba,
   foto, escudo + badge, y cuerpo blanco con datos + botón. */
.colegio-card.cc-v2 {
  aspect-ratio: auto;
  background: var(--white);
  overflow: visible;
  display: flex; flex-direction: column;
  border: 2px solid var(--ink);
  border-top: none;              /* la franja hace de borde superior */
}
.colegio-card.cc-v2:hover { transform: translateY(-4px); box-shadow: none; }
.cc-strip { display: block; height: 6px; width: 100%; background: var(--ink); }

.colegio-card.cc-v2[data-colegio="1"]           { border-color: var(--blue); }
.colegio-card.cc-v2[data-colegio="1"] .cc-strip { background: var(--blue); }
.colegio-card.cc-v2[data-colegio="2"]           { border-color: var(--red); }
.colegio-card.cc-v2[data-colegio="2"] .cc-strip { background: var(--red); }
.colegio-card.cc-v2[data-colegio="3"]           { border-color: var(--yellow); }
.colegio-card.cc-v2[data-colegio="3"] .cc-strip { background: var(--yellow); }

.cc-photo {
  position: relative; height: 260px; overflow: hidden;
  background: var(--blue-soft);
}
.cc-photo > img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 12%;
  transition: transform .5s var(--ease-out);
}
.colegio-card.cc-v2:hover .cc-photo > img { transform: scale(1.04); }
.cc-photo-empty {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 6px;
  background: #fdf0f1; color: #b9a6ad; font-size: 12px;
}
.cc-photo-empty i { font-size: 30px; opacity: .7; }

.cc-shield {
  position: absolute; top: 12px; left: 12px;
  width: 48px; height: 48px; background: #fff;
  display: flex; align-items: center; justify-content: center;
  padding: 6px;
}
.cc-shield img { max-height: 100%; width: auto; }
.cc-badge {
  position: absolute; top: 12px; right: 12px;
  color: #fff; font-size: 10px; font-weight: 800;
  letter-spacing: .8px; text-transform: uppercase; padding: 5px 9px;
}
.cc-badge.stock { background: var(--green); }
.cc-badge.fab   { background: var(--red); }

.cc-body { padding: 18px; display: flex; flex-direction: column; }
.cc-name {
  font-family: 'Fraunces', serif; font-size: 24px; font-weight: 600;
  margin: 0 0 3px; line-height: 1.1; color: var(--ink);
}
.cc-sub { font-size: 13px; color: var(--muted); margin: 0 0 12px; }
.cc-stats {
  display: flex; gap: 16px; font-size: 13px; color: var(--ink-2);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: 11px 0; margin-bottom: 14px;
}
.cc-stats strong { color: var(--blue); }
.colegio-card.cc-v2[data-colegio="2"] .cc-stats strong { color: var(--red); }
.colegio-card.cc-v2[data-colegio="3"] .cc-stats strong { color: #8a6c00; }
.cc-btn {
  display: block; text-align: center;
  font-weight: 800; font-size: 14px; padding: 13px;
  background: var(--blue); color: #fff;
}
.colegio-card.cc-v2[data-colegio="2"] .cc-btn { background: var(--red); color: #fff; }
.colegio-card.cc-v2[data-colegio="3"] .cc-btn { background: var(--yellow); color: var(--ink); }

/* ── C. Encabezados numerados 01/02/03 con línea (mockup) ──────── */
.v2-head {
  display: flex; align-items: baseline; gap: 18px;
  flex-wrap: wrap; margin-bottom: 26px;
}
.v2-num { font-family: 'Fraunces', serif; font-size: 15px; color: var(--red); font-weight: 700; }
.v2-h2 {
  font-family: 'Fraunces', serif; font-size: clamp(28px, 4vw, 44px);
  letter-spacing: -1.2px; font-weight: 600; color: var(--ink); margin: 0;
}
.v2-rule { flex: 1; height: 3px; background: var(--ink); min-width: 40px; }
.v2-head-meta { font-size: 14px; color: var(--muted); }

/* ── D. "Anuncios de hoy" — tarjetas de oferta estilo mockup ───── */
.promo-card {
  background: var(--white); color: var(--ink);
  border: 2px solid var(--blue);
  box-shadow: none;
}
.promo-titulo { color: var(--ink); }
.promo-texto  { color: var(--muted); opacity: 1; }
.promo-cta {
  align-self: stretch; text-align: center;
  background: var(--blue); color: #fff; border-radius: 0;
  padding: 12px; font-weight: 800;
}
.promo-cta:hover { transform: none; background: var(--red); }

/* ── E. Los más comprados (ranking con filo de color) ──────────── */
.top-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  gap: 18px;
}
.top-item {
  display: flex; align-items: center; gap: 14px;
  padding: 16px; border-left: 6px solid var(--ink);
  background: #f2f1ee;
}
.top-item.y { background: #fdf7e0; border-left-color: var(--yellow); }
.top-item.b { background: #e8edf8; border-left-color: var(--blue); }
.top-item.r { background: #fdf0f1; border-left-color: var(--red); }
.top-item.k { background: #f2f1ee; border-left-color: var(--ink); }
.top-rank {
  font-family: 'Fraunces', serif; font-size: 38px; line-height: 1;
  width: 30px; flex-shrink: 0; color: var(--ink);
}
.top-item.y .top-rank { color: var(--yellow); }
.top-item.b .top-rank { color: var(--blue); }
.top-item.r .top-rank { color: var(--red); }
.top-item > img {
  width: 78px; height: 78px; object-fit: contain;
  background: #fff; flex-shrink: 0;
}
.top-info { min-width: 0; }
.top-info h4 { font-size: 14.5px; font-weight: 700; margin: 0 0 3px; line-height: 1.25; }
.top-info p  { font-size: 12px; color: var(--muted); margin: 0 0 5px; }
.top-precio  { font-family: 'Fraunces', serif; font-size: 18px; color: var(--ink); }
.top-item.y .top-precio { color: #8a6c00; }
.top-item.b .top-precio { color: var(--blue); }
.top-item.r .top-precio { color: var(--red); }

/* ── F. Split "Compra tranquila" + "Para instituciones" ────────── */
.v2-split {
  display: grid; grid-template-columns: 1fr 1fr;
  max-width: 1440px; margin: 40px auto 0;
}
.v2-split-left  { padding: 54px 40px 54px 28px; background: var(--paper); }
.v2-split-right { padding: 54px 28px 54px 40px; background: var(--blue); color: #fff; }
.v2-eyebrow {
  font-size: 12.5px; letter-spacing: 1.4px; text-transform: uppercase;
  font-weight: 800; margin-bottom: 16px;
}
.v2-eyebrow.blue   { color: var(--blue); }
.v2-eyebrow.yellow { color: var(--yellow); }
.v2-split-title {
  font-family: 'Fraunces', serif; font-size: clamp(26px, 3vw, 34px);
  letter-spacing: -1px; font-weight: 600; margin: 0 0 20px; line-height: 1.12;
}
.v2-split-title.white { color: #fff; }
.v2-checklist { display: flex; flex-direction: column; gap: 14px; font-size: 14.5px; color: var(--ink-2); }
.v2-checklist > div { display: flex; gap: 12px; }
.v2-checklist span { color: var(--red); font-weight: 800; flex-shrink: 0; }
.v2-pay-row { display: flex; align-items: center; gap: 14px; margin-top: 26px; flex-wrap: wrap; }
.v2-pay-row img { height: 28px; width: auto; }
.v2-pill-dark {
  background: var(--ink); color: var(--yellow);
  font-size: 12.5px; font-weight: 800; padding: 8px 13px;
}
.v2-split-lead { font-size: 15.5px; line-height: 1.6; color: rgba(255,255,255,.82); margin: 0 0 26px; max-width: 440px; }
.v2-split-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.v2-btn-yellow {
  background: var(--yellow); color: var(--ink);
  font-weight: 800; font-size: 15px; padding: 16px 26px;
}
.v2-btn-yellow:hover { background: var(--red); color: #fff; }
.v2-btn-outline {
  border: 2px solid rgba(255,255,255,.45); color: #fff;
  font-weight: 700; font-size: 15px; padding: 15px 24px;
}
.v2-btn-outline:hover { border-color: var(--yellow); color: #fff; }

/* ── G. Banda de testimonio (roja) + mosaicos ──────────────────── */
.v2-testi {
  background: var(--red); color: #fff;
  padding: 44px 28px;
  display: grid; grid-template-columns: 1.3fr 1fr; gap: 36px; align-items: center;
  max-width: 1440px; margin: 0 auto;
}
.v2-stars { font-size: 30px; color: var(--yellow); line-height: 1; margin-bottom: 14px; }
.v2-testi-quote p {
  font-family: 'Fraunces', serif; font-size: clamp(20px, 2.4vw, 26px);
  line-height: 1.35; margin: 0 0 20px; max-width: 640px;
}
.v2-testi-author { display: flex; align-items: center; gap: 12px; }
.v2-testi-avatar {
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--yellow); color: var(--ink); font-weight: 800;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.v2-testi-author strong { display: block; font-size: 13.5px; }
.v2-testi-author span   { font-size: 13px; color: rgba(255,255,255,.8); }
.v2-testi-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.v2-tile { background: rgba(0,0,0,.18); padding: 18px; }
.v2-tile strong { font-family: 'Fraunces', serif; font-size: 24px; color: var(--yellow); display: block; }
.v2-tile span   { font-size: 12.5px; color: rgba(255,255,255,.8); margin-top: 4px; display: block; }

/* ── H. Tira amarilla de relojes ───────────────────────────────── */
.v2-relojes-teaser {
  background: var(--yellow); padding: 22px 28px;
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  max-width: 1440px; margin: 0 auto;
}
.v2-rt-eyebrow { font-size: 12.5px; letter-spacing: 1.4px; text-transform: uppercase; color: #5a4a00; font-weight: 800; }
.v2-rt-rule { flex: 1; height: 2px; background: rgba(21,23,28,.2); min-width: 30px; }
.v2-rt-title { font-family: 'Fraunces', serif; font-size: 21px; color: var(--ink); }
.v2-rt-btn { background: var(--ink); color: var(--yellow); font-weight: 800; font-size: 13.5px; padding: 12px 20px; }
.v2-rt-btn:hover { background: var(--blue); color: #fff; }

/* ── Responsivo de las secciones v2 ────────────────────────────── */
@media (max-width: 860px) {
  .v2-split { grid-template-columns: 1fr; }
  .v2-testi { grid-template-columns: 1fr; gap: 24px; }
  .v2-split-left  { padding: 40px 20px; }
  .v2-split-right { padding: 40px 20px; }
}

/* ═══════════════════════════════════════════════════════════════
   COHESIÓN + SABOR COLOMBIANO (Colegios · Relojes · Contacto)
═══════════════════════════════════════════════════════════════ */

/* ── I. Firma tricolor (amarillo·azul·rojo = bandera) arriba del sitio
   Da el toque "colombiano" de forma sutil en todas las vistas. */
.announcement-bar {
  border-top: 4px solid transparent;
  border-image: linear-gradient(90deg,
    var(--yellow) 0 33.33%, var(--blue) 33.33% 66.66%, var(--red) 66.66% 100%) 1;
}

/* ── J. Vista COLEGIOS (tienda) ─────────────────────────────────
   Cards de colegio del selector con borde marcado + acento azul. */
.tienda-colegio-card { background: var(--white); }
.tienda-colegio-card .tc-nombre { font-family: 'Fraunces', serif; font-weight: 600; font-size: 16px; }
#tiendaPaso1 > h3 { letter-spacing: -.4px; }
/* Título del colegio en Paso 2, más presencia */
.tienda-colegio-titulo { font-size: 26px; }
/* Botón "volver" con más carácter */
#tiendaVolverColegios { font-weight: 700; }

/* ── K. RELOJES en estilo editorial claro y cálido ─────────────
   Antes eran tarjetas oscuras; se integran al sistema de marca. */
#view-tienda, #tienda-relojes { background: var(--paper); }
.relojes-side-banner {
  background: var(--ink);
  border-left: 10px solid var(--yellow);
}
.relojes-side-banner i { color: var(--yellow) !important; }

.reloj-card {
  background: var(--white);
  border: 2px solid var(--ink);
}
.reloj-card:hover {
  transform: translateY(-4px);
  border-color: var(--blue);
  box-shadow: 0 14px 30px rgba(7,50,121,0.14);
}
.reloj-card-destacado { border-color: var(--yellow); }

.reloj-img-box {
  background: linear-gradient(145deg, #fdf7e0, #f3ead0);
  border-bottom: 2px solid var(--ink);
  color: var(--blue);
}
.reloj-img-box::before { display: none; }          /* quita patrón oscuro */
.reloj-img-box::after {
  border-color: rgba(7,50,121,0.18);
  box-shadow: 0 0 0 12px rgba(7,50,121,0.05), 0 0 0 24px rgba(7,50,121,0.03);
}
.reloj-card:hover .reloj-img-box i { color: var(--blue); }

.reloj-nombre { color: var(--ink); font-family: 'Fraunces', serif; font-weight: 600; }
.reloj-desc { color: var(--muted); }
.reloj-colores-hint { color: var(--muted); }
.reloj-precio-desde { color: var(--muted); }
.reloj-precio {
  color: var(--ink);
  background: linear-gradient(transparent 60%, var(--yellow) 60%);
  padding: 0 3px;
}
.reloj-badge-dest {
  background: var(--yellow); color: var(--ink);
  border: none; border-radius: 0;
}
.btn-reloj-comprar { background: var(--blue); color: #fff; }
.btn-reloj-comprar:hover { background: var(--blue-dark); transform: translateY(-2px); }

/* ── L. Vista CONTACTO — eyebrow numerado + calidez ────────────── */
.contacto-info h3 { font-family: 'Fraunces', serif; }
.contacto-channel-icon.map { background: rgba(249,201,12,0.18); color: #8a6c00; }

/* ═══════════════════════════════════════════════════════════════
   MÓVIL — pulido para iPhone (iOS/Safari) y Android (Chrome)
═══════════════════════════════════════════════════════════════ */

/* Evita el auto-zoom del texto y el flash gris feo al tocar (ambos SO) */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { -webkit-tap-highlight-color: rgba(7,50,121,0.12); }

/* Respeta el área segura del iPhone (barra del home) en elementos fijos,
   para que el CTA inferior y los flotantes no queden tapados por el notch. */
@media (max-width: 760px) {
  .sticky-cta-mobile,
  #stickyCTA { padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
  .help-float { bottom: calc(86px + env(safe-area-inset-bottom, 0px)); }
  #backToTop,
  .back-to-top { bottom: calc(154px + env(safe-area-inset-bottom, 0px)); }
}

/* Hero móvil: foto un poco más alta y encuadre en la cara */
@media (max-width: 600px) {
  .hero-panel { min-height: 340px; }
  .hero-panel-photo > img { object-position: center 12%; }
}

/* Ajustes finos de las tarjetas en pantallas pequeñas */
@media (max-width: 560px) {
  .cc-photo { height: 220px; }
  .cc-name  { font-size: 22px; }
  .top-item > img { width: 66px; height: 66px; }
  .v2-testi-quote p { font-size: 19px; }
}

/* ── 15. Flotantes que SÍ siguen redondos se dejan intactos:
   .help-float-btn (WhatsApp), .nav-carrito-badge, dots de carrusel,
   avatares de testimonio. No se tocan. */