/* ==========================================================================
   iCase — HERO + HOME v2.0  ·  "Bloque"
   Archivo: static/css/icase-home.css
   Requiere: icase-tokens.css

   Sin degradados, sin glows, sin sombras. Los bloques se cortan a filo y se
   separan con filetes de 1px. El color es campo sólido; la foto es foto.
   ========================================================================== */

/* Contextos oscuros: los títulos heredan color en vez de forzar tinta */
:is(.ic-section--ink, .ic-section--blue, .ic-story, .ic-news)
  :is(.ic-display, .ic-h1, .ic-h2, .ic-h3, .ic-h4) { color: inherit; }
:is(.ic-section--ink, .ic-story) .ic-lead { color: var(--ic-on-ink-soft); }
:is(.ic-section--blue, .ic-news) .ic-lead { color: var(--ic-on-blue-soft); }

/* ==========================================================================
   HERO — vive entero en icase-hero.css

   Acá estaban los estilos del hero viejo (el carrusel de panel oscuro con
   .ic-hero__track / __slide / __panel / __tick). Ese marcado ya no existe,
   pero las reglas seguían acá y compartían nombre con las del hero nuevo:
   .ic-hero, __title, __text, __cta, __shot.

   Como este archivo se carga DESPUÉS de icase-hero.css, ganaba él. Y traía
   color: rgba(255,255,255,.86) en .ic-hero__text — el párrafo del hero salía
   blanco sobre la tarjeta blanca, invisible salvo que lo seleccionaras.

   No agregar nada .ic-hero* acá. Va todo en icase-hero.css.
   ========================================================================== */

/* ==========================================================================
   TRUST — una fila, separada por filetes verticales. Sin tarjetas.
   ========================================================================== */
.ic-trust { border-bottom: 1px solid var(--ic-line); }
.ic-trust__row {
  display: grid; grid-auto-flow: column; grid-auto-columns: 66%;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
}
.ic-trust__row::-webkit-scrollbar { display: none; }
@media (min-width: 768px) {
  .ic-trust__row { grid-auto-flow: row; grid-template-columns: repeat(4, 1fr); overflow: visible; }
}
.ic-trust__item {
  scroll-snap-align: start;
  display: flex; align-items: flex-start; gap: var(--ic-s3);
  padding: var(--ic-s5) var(--ic-s5);
  border-right: 1px solid var(--ic-line);
}
.ic-trust__item:last-child { border-right: 0; }
.ic-trust__item svg { width: 20px; height: 20px; color: var(--ic-blue); margin-top: 2px; }
.ic-trust__item strong {
  display: block; font-size: var(--ic-fs-body); font-weight: var(--ic-fw-bold);
  letter-spacing: -0.02em; line-height: 1.25;
}
.ic-trust__item span { display: block; font-size: var(--ic-fs-sm); color: var(--ic-ink-3); line-height: 1.35; }

/* ==========================================================================
   CATEGORÍAS — rejilla de filetes. Las celdas se tocan.
   ========================================================================== */
.ic-cats {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 1px; background: var(--ic-line);
  border: 1px solid var(--ic-line);
}
@media (min-width: 640px)  { .ic-cats { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .ic-cats { grid-template-columns: repeat(6, 1fr); } }

.ic-cat {
  background: #fff; padding: var(--ic-s4) var(--ic-s4) var(--ic-s5);
  display: flex; flex-direction: column; gap: var(--ic-s3);
  transition: background var(--ic-t-fast) var(--ic-ease);
}
.ic-cat:hover { background: var(--ic-blue-wash); }
.ic-cat__media {
  display: block;
  aspect-ratio: 1 / 1; border-radius: var(--ic-r-case);
  overflow: hidden;
  /* Fondo blanco y filete, no gris: las fotos de producto vienen recortadas
     sobre blanco y sobre gris quedaba un cuadrado blanco flotando adentro del
     mosaico. Con el filete la tarjeta sigue leyéndose contra la página. */
  background: var(--ic-paper);
  border: 1px solid var(--ic-line);
}
.ic-cat__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--ic-t-slow) var(--ic-ease-out); }
.ic-cat:hover .ic-cat__media img { transform: scale(1.05); }
.ic-cat__name {
  font-size: var(--ic-fs-body); font-weight: var(--ic-fw-bold);
  letter-spacing: -0.02em; line-height: 1.2; color: var(--ic-ink);
}

/* ==========================================================================
   PROMOS — foto arriba a filo, bloque de color abajo
   ========================================================================== */
.ic-promos { display: grid; gap: var(--ic-s5); }
@media (min-width: 768px) { .ic-promos { grid-template-columns: 1fr 1fr; } }

.ic-promo { display: flex; flex-direction: column; }
.ic-promo__shot { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--ic-mist); }
.ic-promo__shot img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--ic-t-slow) var(--ic-ease-out); }
.ic-promo:hover .ic-promo__shot img { transform: scale(1.04); }
.ic-promo__body {
  --_bg: var(--ic-blue);
  flex: 1; background: var(--_bg); color: #fff;
  padding: var(--ic-s6);
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--ic-s3);
}
.ic-promo--flame .ic-promo__body { --_bg: var(--ic-flame); }
.ic-promo--ink   .ic-promo__body { --_bg: var(--ic-ink); }
.ic-promo__title { font-size: var(--ic-fs-h2); font-weight: var(--ic-fw-black); letter-spacing: var(--ic-ls-display); line-height: 1.05; margin: 0; }
.ic-promo__text  { font-size: var(--ic-fs-body); color: rgba(255,255,255,.85); margin: 0; }
.ic-promo__go {
  display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: var(--ic-s3);
  font-family: var(--ic-mono); font-size: var(--ic-fs-xs);
  letter-spacing: var(--ic-ls-mono); text-transform: uppercase; font-weight: var(--ic-fw-medium);
  border-bottom: 2px solid rgba(255,255,255,.55);
  transition: border-color var(--ic-t-fast) var(--ic-ease);
}
.ic-promo:hover .ic-promo__go { border-color: #fff; }
.ic-promo__go svg { width: 13px; height: 13px; }

/* ==========================================================================
   STORY — bloque tinta
   ========================================================================== */
.ic-story { background: var(--ic-ink); color: var(--ic-on-ink); }
.ic-story__grid { display: grid; gap: var(--ic-s8); align-items: center; }
@media (min-width: 900px) { .ic-story__grid { grid-template-columns: 1fr 1fr; gap: var(--ic-s11); } }
/* Cuadrada, no 4:3: la foto nueva es una selfie al espejo en formato 1:1 y
   recortarla a apaisada le cortaba la cabeza o el teléfono. */
.ic-story__media { border-radius: var(--ic-r-case); overflow: hidden; aspect-ratio: 1 / 1; background: #1B2026; }
.ic-story__media img { width: 100%; height: 100%; object-fit: cover; }
.ic-story__list { list-style: none; margin: var(--ic-s6) 0 var(--ic-s7); padding: 0; display: grid; }
.ic-story__list li {
  display: grid; grid-template-columns: 22px 1fr; gap: var(--ic-s3);
  padding: var(--ic-s4) 0; border-top: 1px solid rgba(255,255,255,.12);
  color: var(--ic-on-ink-soft);
}
.ic-story__list li:last-child { border-bottom: 1px solid rgba(255,255,255,.12); }
.ic-story__list svg { width: 18px; height: 18px; color: var(--ic-blue); margin-top: 3px; }
.ic-story__list strong { color: #fff; font-weight: var(--ic-fw-bold); }

/* ==========================================================================
   RESEÑAS — reales, de Google
   La persona va primero: se ve quién habla antes de leer qué dijo.
   ========================================================================== */
/* Carrusel de reseñas. Antes era una grilla de dos: entraban dos y punto.
   Ahora son siete —todas las que tienen texto en Google— y se deslizan.
   Sin librería: scroll horizontal nativo con scroll-snap. Las flechas las
   maneja icase-core.js; si el JavaScript no carga, se deslizan igual. */
.ic-revs__carrusel { position: relative; }

.ic-revs {
  display: flex;
  gap: var(--ic-s5);
  align-items: stretch;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 2px 0 var(--ic-s5);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.ic-revs:focus-visible { outline: 2px solid var(--ic-blue); outline-offset: 3px; border-radius: var(--ic-r-ui); }
/* La barra de scroll se deja a la vista: es la pista de que hay más. */
.ic-revs::-webkit-scrollbar { height: 5px; }
.ic-revs::-webkit-scrollbar-thumb { background: var(--ic-line); border-radius: 99px; }
.ic-revs::-webkit-scrollbar-thumb:hover { background: var(--ic-ink-3); }

@media (min-width: 768px) { .ic-revs { gap: var(--ic-s6); } }

/* La nota general, debajo del título */
.ic-revs__nota {
  display: flex; align-items: center; gap: var(--ic-s2);
  margin: var(--ic-s3) 0 0;
  font-size: var(--ic-fs-sm); color: var(--ic-ink-3);
}
.ic-revs__nota strong { font-size: var(--ic-fs-body); font-weight: var(--ic-fw-black); color: var(--ic-ink); }
/* 4,7 no son cinco estrellas llenas: la última va a medias y se ve. */
.ic-revs__medio { opacity: .45; }

/* Flechas. Sólo aparecen si el carrusel desborda y hay a dónde ir. */
.ic-revs__flecha {
  position: absolute; top: 44%; transform: translateY(-50%);
  z-index: 2;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--ic-line); border-radius: 50%;
  background: rgba(255,255,255,.94);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 2px 12px rgba(16,20,24,.12);
  color: var(--ic-ink); cursor: pointer;
  transition: background-color 180ms var(--ic-ease);
}
.ic-revs__flecha:hover { background: #fff; }
.ic-revs__flecha[hidden] { display: none; }
.ic-revs__flecha--izq { left: -14px; }
.ic-revs__flecha--der { right: -14px; }
.ic-revs__chev { width: 18px; height: 18px; }
.ic-revs__flecha--izq .ic-revs__chev { transform: rotate(90deg); }
.ic-revs__flecha--der .ic-revs__chev { transform: rotate(-90deg); }

/* En pantallas táctiles se desliza con el dedo: las flechas sobran. */
@media (hover: none) { .ic-revs__flecha { display: none !important; } }

.ic-rev {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--ic-s4);
  flex: 0 0 clamp(270px, 82vw, 380px);
  scroll-snap-align: start;
  padding: var(--ic-s6);
  background: var(--ic-paper);
  border: 1px solid var(--ic-line);
  border-radius: var(--ic-r-ui);
}

/* Cabecera: foto + nombre */
.ic-rev__head { display: flex; align-items: center; gap: var(--ic-s3); width: 100%; }
.ic-rev__avatar {
  display: grid; place-items: center;
  width: 42px; height: 42px; flex: none;
  border-radius: var(--ic-r-pill); overflow: hidden;
  background: var(--ic-mist); color: var(--ic-ink-2);
  font-size: var(--ic-fs-lead); font-weight: var(--ic-fw-bold);
  line-height: 1; text-transform: uppercase;
}
.ic-rev__avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.ic-rev__who { min-width: 0; }
.ic-rev__who strong {
  display: block;
  font-size: var(--ic-fs-body); font-weight: var(--ic-fw-bold);
  letter-spacing: -0.015em; line-height: 1.25; color: var(--ic-ink);
}
.ic-rev__src {
  display: block; margin-top: 2px;
  font-family: var(--ic-mono); font-size: var(--ic-fs-xs);
  letter-spacing: .04em; color: var(--ic-ink-3);
}

.ic-rev__stars { display: inline-flex; gap: 3px; color: #F5B301; }
.ic-rev__stars svg { width: 17px; height: 17px; }

.ic-rev__text {
  margin: 0; width: 100%;
  font-size: var(--ic-fs-body); line-height: 1.65; color: var(--ic-ink);
}

/* Fotos que subió el cliente con su reseña */
.ic-rev__photos { display: flex; gap: 6px; width: 100%; flex-wrap: wrap; }
.ic-rev__photo {
  display: block; width: 84px; height: 84px; flex: none;
  border-radius: var(--ic-r-case-sm); overflow: hidden; background: var(--ic-mist);
}
.ic-rev__photo img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--ic-t-slow) var(--ic-ease-out);
}
.ic-rev__photo:hover img { transform: scale(1.06); }

/* Botón a las reseñas de Google */
.ic-revs__foot { display: flex; justify-content: center; margin-top: var(--ic-s6); }
.ic-revs__btn {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 52px; padding: 0 var(--ic-s6);
  border: 1.5px solid var(--ic-line); border-radius: var(--ic-r-ui);
  background: var(--ic-paper); color: var(--ic-ink);
  font-size: var(--ic-fs-body); font-weight: var(--ic-fw-semi);
  letter-spacing: -0.01em; text-align: center;
  transition: border-color var(--ic-t-fast) var(--ic-ease),
              box-shadow var(--ic-t-fast) var(--ic-ease);
}
.ic-revs__btn:hover {
  border-color: var(--ic-ink-3);
  box-shadow: 0 1px 2px rgba(16,20,24,.05), 0 8px 20px -12px rgba(16,20,24,.25);
}
.ic-revs__g { display: inline-flex; flex: none; }
.ic-revs__g svg { width: 18px; height: 18px; }
.ic-revs__ext { width: 14px; height: 14px; flex: none; opacity: .45; }

/* ==========================================================================
   INSTAGRAM — hoja de contactos: cuadrados a filo, 2px de aire
   ========================================================================== */
.ic-ig { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
@media (min-width: 768px) { .ic-ig { grid-template-columns: repeat(6, 1fr); } }
.ic-ig__cell { display: block; aspect-ratio: 1/1; overflow: hidden; background: var(--ic-mist); }
.ic-ig__cell img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--ic-t-slow) var(--ic-ease-out); }
.ic-ig__cell:hover img { transform: scale(1.07); }

/* ==========================================================================
   NEWSLETTER — bloque azul de cierre
   ========================================================================== */
.ic-news { background: var(--ic-blue); color: #fff; }
.ic-news__inner { max-width: 640px; }
.ic-news__form { display: flex; flex-direction: column; gap: var(--ic-s3); margin-top: var(--ic-s6); }
@media (min-width: 560px) { .ic-news__form { flex-direction: row; } }
.ic-news__input {
  flex: 1; height: 54px; padding-inline: var(--ic-s4);
  border: 1.5px solid rgba(255,255,255,.55); border-radius: var(--ic-r-ui);
  background: transparent; color: #fff; font-size: 1rem; outline: none;
  transition: border-color var(--ic-t-fast) var(--ic-ease), background var(--ic-t-fast) var(--ic-ease);
}
.ic-news__input::placeholder { color: rgba(255,255,255,.6); }
.ic-news__input:focus { border-color: #fff; background: rgba(255,255,255,.1); }
.ic-news__legal { margin-top: var(--ic-s4); font-size: var(--ic-fs-xs); color: rgba(255,255,255,.7); }

/* ==========================================================================
   CARGADORES — video UGC a la izquierda, contenido a la derecha
   Marcado: snipplets/icase/icase-charging.tpl
   Arranque del video: static/js/icase-home.js

   Antes era un bloque tinta a sangre con una foto de producto. Ahora es una
   sección clara y contenida: un video de uso real pide aire alrededor, no un
   marco oscuro que lo convierta en publicidad.

   Fondo mist —el gris alterno que ya usa el sistema— para separarlo de las
   secciones vecinas sin recurrir al negro.
   ========================================================================== */
.ic-charge__grid { display: grid; gap: var(--ic-s6); }

@media (min-width: 900px) {
  .ic-charge__grid {
    grid-template-columns: 57fr 43fr;
    gap: clamp(32px, 4vw, 72px);
    align-items: center;
  }
}

/* --- El video ------------------------------------------------------------ */
.ic-charge__video {
  order: 1;
  border-radius: var(--ic-r-case);
  overflow: hidden;
  background: var(--ic-ink);
  /* El asset es 1920x1080. Fijar la proporción evita que la página salte
     cuando el video termina de cargar. */
  aspect-ratio: 16 / 9;
}
.ic-charge__player {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  /* Sin controles, sin botón de play y sin barra: es parte del diseño, no un
     reproductor. Además evita que un clic lo pause sin querer. */
  pointer-events: none;
}
.ic-charge__player::-webkit-media-controls,
.ic-charge__player::-webkit-media-controls-start-playback-button,
.ic-charge__player::-webkit-media-controls-panel {
  display: none !important; -webkit-appearance: none;
}

/* --- El contenido -------------------------------------------------------- */
.ic-charge__panel { order: 2; }
@media (min-width: 900px) { .ic-charge__panel { max-width: 30rem; } }

.ic-charge__meta {
  display: inline-block;
  font-family: var(--ic-mono); font-size: var(--ic-fs-xs);
  letter-spacing: var(--ic-ls-mono); text-transform: uppercase;
  font-weight: var(--ic-fw-medium); color: var(--ic-blue-deep);
  margin-bottom: var(--ic-s3);
}
.ic-charge__title { margin: 0 0 var(--ic-s3); }
.ic-charge__lead  { margin: 0; color: var(--ic-ink-2); }

.ic-charge__list {
  list-style: none;
  margin: var(--ic-s6) 0 0; padding: 0;
  display: grid; gap: var(--ic-s4);
}
.ic-charge__list li,
.ic-charge__help {
  display: grid; grid-template-columns: 20px 1fr; gap: var(--ic-s3);
  margin: 0; align-items: start;
}
.ic-charge__list svg,
.ic-charge__help svg { width: 19px; height: 19px; color: var(--ic-blue); margin-top: 2px; }
.ic-charge__list span,
.ic-charge__help span { font-size: var(--ic-fs-sm); line-height: 1.5; color: var(--ic-ink-2); }
.ic-charge__list strong,
.ic-charge__help strong {
  display: block;
  font-size: var(--ic-fs-body); font-weight: var(--ic-fw-bold);
  color: var(--ic-ink); line-height: 1.3; margin-bottom: 1px;
}

/* La línea de ayuda va separada por un filete: es una invitación a escribir,
   no un tercer beneficio. */
.ic-charge__help {
  margin-top: var(--ic-s5);
  padding-top: var(--ic-s5);
  border-top: 1px solid var(--ic-line);
}

.ic-charge .ic-btn { margin-top: var(--ic-s6); }

/* --- Móvil: el video primero y a todo el ancho de la caja ---------------- */
@media (max-width: 899px) {
  .ic-charge__grid  { gap: var(--ic-s5); }
  .ic-charge__video { order: 1; }
  .ic-charge__panel { order: 2; }
  .ic-charge__list  { margin-top: var(--ic-s5); }
  .ic-charge .ic-btn { margin-top: var(--ic-s5); width: 100%; }
}