/* ===========================================================
   El canal de WhatsApp: el mismo bloque en todas las páginas.
   Se linkea desde el <head> de home, servicios, blog, checkout
   y sobre-este-espacio. Usa los tokens que ya define cada página
   (--banda-canal, --amarillo, --verde-claro, --crema).
   =========================================================== */

/* En algunas páginas este bloque va a lo ancho y en otras comparte fila con
   otra tarjeta. Por eso se adapta al ancho de SU contenedor, no al de la
   pantalla: así queda bien en los dos lugares. */
.canal{
  container-type:inline-size;
  position:relative;
  overflow:hidden;
  background:var(--banda-canal);
  color:#EAF3F0;
  border-radius:26px;
  padding:clamp(26px,3.4vw,44px) clamp(24px,3.2vw,46px);
}
.canal .canal-grid{
  display:grid;
  grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);
  gap:clamp(20px,3vw,44px);
  align-items:center;
}

/* ---------- columna de texto ---------- */

.canal .canal-txt{position:relative;z-index:1;min-width:0}

.canal .canal-eyebrow{
  margin:0 0 clamp(12px,1.6vw,18px);
  display:flex;align-items:center;gap:9px;
  font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  /* la tarjeta del canal es verde oscuro en los dos temas, así que el color
     va fijo: si toma --verde-claro, en modo oscuro ese token se vuelve
     oscuro y el rótulo desaparece contra el fondo (1,11:1) */
  color:#BCDCD6;
}
.canal .canal-punto{
  flex:none;width:8px;height:8px;border-radius:999px;
  background:#7BD8A8;
  box-shadow:0 0 0 0 rgba(123,216,168,.55);
  animation:canalLatido 2.6s ease-out infinite;
}
@keyframes canalLatido{
  0%{box-shadow:0 0 0 0 rgba(123,216,168,.5)}
  70%{box-shadow:0 0 0 7px rgba(123,216,168,0)}
  100%{box-shadow:0 0 0 0 rgba(123,216,168,0)}
}

.canal .canal-h2{
  margin:0 0 clamp(10px,1.3vw,14px);
  font-family:'Yeseva One',serif;font-weight:400;
  font-size:clamp(27px,3.7vw,42px);
  line-height:1.08;letter-spacing:-.01em;text-wrap:balance;
}
.canal .canal-h2 em{font-style:italic;color:var(--amarillo)}

.canal .canal-p{
  margin:0 0 clamp(18px,2.2vw,26px);
  max-width:46ch;
  font-size:clamp(14px,1.15vw,15.5px);line-height:1.6;
  color:color-mix(in oklab,#EAF3F0,transparent 16%);
  text-wrap:pretty;
}

/* los cuatro puntos de "qué vas a recibir" */
.canal .canal-items{
  list-style:none;margin:0 0 clamp(20px,2.6vw,30px);padding:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:11px clamp(14px,1.8vw,24px);
}
.canal .canal-item{
  display:flex;align-items:center;gap:10px;min-width:0;
  font-size:13.5px;line-height:1.35;
  color:color-mix(in oklab,#EAF3F0,transparent 6%);
}
.canal .canal-ico{
  flex:none;display:grid;place-items:center;
  width:26px;height:26px;border-radius:999px;
  background:color-mix(in oklab,var(--amarillo),transparent 78%);
  color:var(--amarillo);
  font-size:12.5px;line-height:1;
}

.canal .canal-cta-fila{
  display:flex;flex-wrap:wrap;align-items:center;
  gap:10px clamp(14px,1.8vw,22px);
}
.canal .canal-cta{
  min-height:46px;box-sizing:border-box;
  padding:12px 24px;border-radius:999px;border:none;
  background:#FFF7F2;color:#1B2724;
  font:600 14.5px Inter,sans-serif;text-decoration:none;
  display:inline-flex;align-items:center;gap:10px;
  box-shadow:0 10px 24px rgba(0,0,0,.22);
  transition:transform .22s ease,box-shadow .22s ease;
}
.canal .canal-cta:hover{transform:translateY(-2px);box-shadow:0 16px 32px rgba(0,0,0,.3)}
.canal .canal-cta:focus-visible{outline:2px solid var(--amarillo);outline-offset:3px}
.canal .canal-cta span{transition:transform .22s ease}
.canal .canal-cta:hover span{transform:translateX(3px)}

.canal .canal-nota{
  font-size:12.5px;font-style:italic;
  /* con 38% de transparencia daba 3,81:1 contra el verde del bloque y la
     norma pide 4,5:1 para este tamaño; con 22% llega a 4,6:1 y se sigue
     leyendo como texto secundario */
  color:color-mix(in oklab,#EAF3F0,transparent 22%);
}

/* ---------- el teléfono (decorativo) ---------- */

.canal .canal-fono{
  position:relative;
  align-self:center;
  min-width:0;
  /* el alto lo pone el teléfono, y el teléfono lo pone la foto: así la captura
     se ve entera y no queda cortada contra el borde de la tarjeta */
  display:flex;justify-content:center;
}

.canal .canal-pantalla{
  position:relative;
  width:min(100%,300px);
  box-sizing:border-box;
  border:8px solid #0D1512;
  border-radius:34px;
  background:#141F1B;
  overflow:hidden;
  box-shadow:0 28px 64px rgba(0,0,0,.38);
  animation:canalEntra .8s cubic-bezier(.2,.7,.3,1) both;
}
/* la captura real del canal, entera: el alto sale de su propia proporción
   (862×1600), así que no se recorta nada */
.canal .canal-pantalla img{
  display:block;width:100%;height:auto;
  aspect-ratio:862/1600;object-fit:contain;
}

.canal .canal-cab{display:flex;align-items:center;gap:9px;margin-bottom:13px;padding:0 3px}
.canal .canal-avatar{
  flex:none;display:grid;place-items:center;
  width:30px;height:30px;border-radius:999px;
  background:var(--amarillo);color:#2A2113;
  font:700 13px Inter,sans-serif;
}
.canal .canal-cab-txt{display:flex;flex-direction:column;gap:1px;min-width:0}
.canal .canal-cab-txt b{font:600 12.5px Inter,sans-serif;color:#EAF3F0}
.canal .canal-cab-txt i{font:400 10.5px Inter,sans-serif;font-style:normal;color:color-mix(in oklab,#EAF3F0,transparent 52%)}

.canal .canal-burbuja{
  position:relative;
  border-radius:14px;
  padding:11px 12px 9px;
  animation:canalSube .7s cubic-bezier(.2,.7,.3,1) both;
}
.canal .canal-burbuja b{display:block;font:600 11.5px Inter,sans-serif;line-height:1.3;margin-bottom:4px}
.canal .canal-burbuja p{margin:0;font:400 10.5px Inter,sans-serif;line-height:1.45}

.canal .canal-burbuja-a{background:var(--crema);color:#2A2520;animation-delay:.22s}
.canal .canal-burbuja-b{background:#FFFDFB;color:#2A2520;animation-delay:.52s}

.canal .canal-hora{
  display:block;margin-top:5px;text-align:right;
  font:400 9px Inter,sans-serif;color:#8B857C;
}

/* las tres cartitas arriba del mensaje */
.canal .canal-mini{display:flex;gap:6px;justify-content:center;margin-bottom:9px}
.canal .canal-mini-c{
  width:26px;height:40px;border-radius:4px;
  background:#FFFDFB;border:1px solid #E3D6C6;
  display:grid;place-items:center;
  font-size:11px;color:transparent;
}
.canal .canal-mini-on{
  background:#FFF3DF;border-color:var(--amarillo);
  color:#C79A4C;
  transform:translateY(-3px);
  box-shadow:0 5px 12px rgba(0,0,0,.12);
}

.canal .canal-reacs{display:flex;gap:6px;margin:7px 0;padding-left:2px}
.canal .canal-reac{
  display:inline-flex;align-items:center;gap:4px;
  padding:3px 8px;border-radius:999px;
  background:color-mix(in oklab,#EAF3F0,transparent 88%);
  font:500 9.5px Inter,sans-serif;
  color:color-mix(in oklab,#EAF3F0,transparent 18%);
}

/* los dos globitos que flotan afuera del teléfono */
.canal .canal-chip{
  position:absolute;z-index:2;
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 14px 9px 9px;border-radius:999px;
  background:#FFF7F2;color:#22302C;
  font:600 12px Inter,sans-serif;white-space:nowrap;
  box-shadow:0 12px 28px rgba(0,0,0,.26);
}
.canal .canal-chip i{
  flex:none;display:grid;place-items:center;
  width:22px;height:22px;border-radius:999px;
  font-style:normal;font-size:11px;
}
.canal .canal-chip-izq{
  /* más abajo del encabezado, para no taparle el nombre al canal */
  top:40%;left:-6%;
  animation:canalFlota 5.2s ease-in-out infinite;
}
.canal .canal-chip-izq i{background:#F6DCD4;color:#945949}
/* escalonados y con su propio ritmo, para que no floten todos al mismo tiempo.
   «Reflexiones» va del lado izquierdo, debajo de «Descuentos exclusivos». */
.canal .canal-chip-der i{background:#D6EDEA;color:#39615A}
.canal .canal-chip-der-a{
  top:30%;right:1%;
  animation:canalFlota 6.4s ease-in-out infinite .9s;
}
.canal .canal-chip-der-b{
  top:63%;left:1%;
  animation:canalFlota 5.8s ease-in-out infinite 1.6s;
}
.canal .canal-chip-der-c{
  top:70%;right:2%;
  animation:canalFlota 6.9s ease-in-out infinite 2.3s;
}

@keyframes canalFlota{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-8px)}
}
@keyframes canalEntra{
  from{opacity:0;transform:translateY(26px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes canalSube{
  from{opacity:0;transform:translateY(12px)}
  to{opacity:1;transform:translateY(0)}
}

/* ===========================================================
   Versión compacta, para las páginas internas: dos columnas
   (texto | botón), sin teléfono. En el inicio va la completa.
   =========================================================== */
.canal.canal-simple{padding:clamp(22px,2.6vw,34px) clamp(22px,3vw,42px)}
.canal-simple .canal-grid{
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:clamp(16px,2.6vw,38px);
}
.canal-simple .canal-h2{font-size:clamp(22px,2.5vw,31px);margin-bottom:8px}
.canal-simple .canal-p{margin-bottom:0;max-width:54ch;font-size:14.5px}
.canal-simple .canal-eyebrow{margin-bottom:10px}
.canal-simple .canal-cta-fila{
  flex-direction:column;align-items:flex-start;gap:7px;
}
/* cuando no entran las dos columnas, el botón pasa abajo */
@container (max-width:620px){
  .canal-simple .canal-grid{grid-template-columns:minmax(0,1fr)}
  .canal-simple .canal-cta-fila{align-items:flex-start}
}
/* En mobile la fila de cierre va al grano: todo centrado y sin el párrafo,
   que ahí abajo ya no aporta — el título y el botón alcanzan. */
@media (max-width:640px){
  .canal.canal-simple{text-align:center}
  .canal-simple .canal-grid{justify-items:center}
  .canal-simple .canal-eyebrow{justify-content:center}
  .canal-simple .canal-p{display:none}
  .canal-simple .canal-cta-fila{align-items:center}
  .cierre-dudas{justify-content:center;text-align:center;flex-direction:column}
  /* al pasar a columna, el flex-basis del inline (420px / 320px) deja de ser
     ancho y se vuelve ALTO: de ahí el hueco enorme entre el título y el botón.
     La base va como custom property justamente para poder anularla acá. */
  .cierre-dudas{--dudas-base:auto}
  .cierre-dudas>div{flex:0 1 auto}
  .cierre-dudas p{display:none}
  .cierre-dudas a{align-self:center}
}

/* ---------- cuando el bloque es angosto ---------- */

/* Con poco ancho el teléfono queda flaco y los globitos flotantes le tapan el
   contenido (el nombre del canal, el texto del mensaje). Abajo de 900px de
   contenedor no hay lugar para que no molesten, así que son un detalle de
   escritorio nada más. */
@container (max-width:900px){
  .canal .canal-chip{display:none}
}
@container (max-width:700px){
  .canal .canal-grid{grid-template-columns:minmax(0,1fr);gap:clamp(22px,4vw,32px)}
  .canal .canal-p{max-width:60ch}
  .canal .canal-h2{font-size:clamp(25px,6vw,34px)}
  .canal .canal-pantalla{width:min(100%,300px)}
}
/* En mobile el bloque quedaba muy largo: va el texto corto y el teléfono
   muestra un mensaje en vez de dos. El texto largo y el corto están los dos
   en el markup y se muestra uno u otro; el que se oculta con display:none
   tampoco lo lee el lector de pantalla, así que no se repite. */
.canal .canal-p-corto{display:none}
@container (max-width:520px){
  .canal .canal-p-largo{display:none}
  .canal .canal-p-corto{display:block}
  .canal .canal-reacs,.canal .canal-burbuja-b{display:none}
  .canal{border-radius:20px}
  .canal .canal-items{grid-template-columns:minmax(0,1fr);gap:9px}
  .canal .canal-chip{font-size:11px;padding:7px 12px 7px 7px}
  .canal .canal-chip i{width:19px;height:19px;font-size:10px}
  /* En mobile el teléfono entero estira demasiado la tarjeta: se muestra de la
     cabecera hasta el primer mensaje y el resto se recorta contra el borde de
     abajo (la tarjeta tiene overflow:hidden). Por eso pierde el marco inferior
     y las esquinas de abajo, como un teléfono que asoma. */
  .canal .canal-fono{
    height:250px;
    margin-bottom:calc(clamp(26px,3.4vw,44px) * -1);
  }
  .canal .canal-pantalla{
    position:absolute;top:0;left:0;right:0;margin-inline:auto;
    width:min(100%,270px);
    border-bottom:none;
    border-radius:30px 30px 0 0;
  }
}

/* por si el navegador no entiende container queries */
@supports not (container-type:inline-size){
  @media (max-width:900px){
    .canal .canal-grid{grid-template-columns:minmax(0,1fr)}
    .canal .canal-pantalla{width:min(100%,300px)}
    .canal .canal-chip-izq{left:0}
  }
}

/* quien pidió menos movimiento, no lo recibe */
@media (prefers-reduced-motion:reduce){
  .canal .canal-punto,.canal .canal-chip-izq,.canal .canal-chip-der{animation:none}
  .canal .canal-pantalla,.canal .canal-burbuja{animation:none;opacity:1;transform:none}
  .canal .canal-cta,.canal .canal-cta span{transition:none}
}