/* ==========================================================================
   Enviamo v2 — secciones nuevas y ajustes
   Carga la ultima: aqui se corrige lo que las hojas heredadas dan por hecho.
   ========================================================================== */

/* --------------------------------------------------------------------------
   El problema — la mañana, hora a hora

   Antes eran cuatro tarjetas numeradas 1-2-3-4, y la numeracion mentia: no
   son pasos de un proceso, son molestias distintas de la misma mañana. El
   reloj da el orden que los numeros fingian, y de paso convierte cuatro
   cajas sueltas en una mañana que se va llenando.

   Cierra en violeta con la hora: son las 12:40 y aun no has vendido nada.
   Ese dato es el que duele, y es el que enlaza con la seccion siguiente.
   -------------------------------------------------------------------------- */

.problema__lista {
  display: grid;
  gap: 0;
  max-width: 54rem;
  margin-inline: auto;
  border-left: 2px solid var(--linea);
}

.problema__fila {
  position: relative;
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  gap: clamp(.8rem, .6rem + 1vw, 1.6rem);
  padding: clamp(1rem, .8rem + .8vw, 1.5rem) 0
           clamp(1rem, .8rem + .8vw, 1.5rem) clamp(1.1rem, .9rem + 1vw, 1.8rem);
}
.problema__fila + .problema__fila { border-top: 1px solid var(--linea); }

/* El punto sobre la linea. El ultimo en violeta: es donde estas ahora */
.problema__fila::before {
  content: '';
  position: absolute;
  left: -5px;
  top: calc(clamp(1rem, .8rem + .8vw, 1.5rem) + .45rem);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--linea);
}
.problema__fila:last-child::before { background: var(--violeta); }

.problema__hora {
  padding-top: .1rem;
  font-size: .82rem;
  font-weight: 800;
  color: var(--violeta-hondo);
  /* Cifras de ancho fijo: las horas quedan alineadas en columna */
  font-variant-numeric: tabular-nums;
}

.problema__que h3 {
  margin: 0 0 .25rem;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--tinta);
}

.problema__que p {
  margin: 0;
  font-size: .88rem;
  line-height: 1.55;
  color: var(--tinta-suave);
}

/* El cierre: misma anchura que la lista, ya es mediodia */
.problema__cierre {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  max-width: 54rem;
  margin: 1.5rem auto 0;
  padding: clamp(1rem, .8rem + .8vw, 1.4rem) clamp(1.1rem, .9rem + 1vw, 1.6rem);
  border-radius: 14px;
  background: var(--violeta-hondo);
  color: #fff;
}
.problema__cierre strong {
  font-size: 1.05rem;
  font-weight: 750;
  letter-spacing: -.02em;
}
.problema__cierre span { font-size: .9rem; opacity: .75; }

/* En estrecho la hora se pone encima: dos columnas no caben */
@media (max-width: 560px) {
  .problema__fila { grid-template-columns: 1fr; gap: .3rem; }
  .problema__hora { font-size: .75rem; }
}

/* --------------------------------------------------------------------------
   El pie de cada pestaña
   Una linea que situa la escena antes de que empiece.
   -------------------------------------------------------------------------- */

.tabs__pie {
  margin: 0 0 1.25rem;
  max-width: 54ch;
  font-size: .95rem;
  line-height: 1.55;
  color: var(--tinta-suave);
}

/* --------------------------------------------------------------------------
   Los mockups dentro de las pestañas
   Pierden su padding y su fondo: ya se lo da la seccion que los contiene.
   -------------------------------------------------------------------------- */

.tabs__panel .mk-seccion {
  padding: 0;
  background: none;
  isolation: auto;
}

/* El lienzo conserva su altura: dentro del panel perdia el `min-height` y la
   escena se aplastaba a la mitad. Y como los dos paneles comparten celda del
   grid, el alto tiene que ser el mismo en ambos o la pagina da un salto al
   cambiar de pestana. */
.tabs__panel .mk-lienzo { min-height: 430px; }
.tabs__panel .envoltorio { width: 100%; max-width: none; padding: 0; }

/* --------------------------------------------------------------------------
   Ajustes de las secciones heredadas
   Las hojas viejas traen sus propios paddings y fondos, que ahora gobierna
   el sistema. Se neutralizan aqui en vez de tocar veinte ficheros.
   -------------------------------------------------------------------------- */

/* `padding: inherit` hereda del PADRE, que no tiene ninguno: dejaba estas
   siete secciones pegadas a cero y por eso el corte de color caia sobre el
   contenido. Lo correcto es `revert`, que devuelve el valor a la regla de
   menor prioridad que si lo declara — el rango. */
/* Nada: las hojas heredadas ponen su propio padding y el rango lo pisa
   desde `v2-medidas.css`, que carga despues. */

/* La portada conserva su altura completa */
.portada { padding-block: unset; }


/* ==========================================================================
   Integraciones en dos columnas
   Las mismas pastillas de marca de siempre, pero repartidas: tiendas a la
   izquierda, transportistas a la derecha. Cada columna es una rejilla de
   cuatro; lo que no cabe baja a la fila siguiente dentro de su columna.
   Sin caja blanca alrededor: el fondo de la seccion ya separa bastante.
   ========================================================================== */

.dos-columnas {
  display: grid;
  gap: clamp(2rem, 1.5rem + 2.5vw, 3.5rem);
  margin-top: clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem);
}
@media (min-width: 900px) {
  .dos-columnas { grid-template-columns: 1fr 1fr; align-items: start; }
}

/* Los hijos de un grid nacen con `min-width: auto`, que significa «no bajes
   del ancho de tu contenido». Los nombres largos —«Correos Express»— hacían
   que la columna midiera 367px dentro de un contenedor de 334, y la sección
   se salía 10px por la derecha en móvil.

   `min-width: 0` le devuelve el mando al contenedor. */
.dos-columnas > .columna { min-width: 0; }

.columna__t {
  display: flex;
  align-items: baseline;
  gap: .8rem;
  margin-bottom: 1.4rem;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
}
/* La linea que acompaña al rotulo y se desvanece */
.columna__t::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 255, 255, .22), transparent);
}

/* Cuatro por fila, y lo que sobra baja.

   `minmax(0, 1fr)` y no `1fr` a secas: una columna `1fr` NO baja del tamaño
   mínimo de su contenido, así que los nombres largos («Correos Express»,
   «WooCommerce») ensanchaban su columna y la rejilla se salía de la pantalla
   por la derecha. En móvil se desbordaba 10px.

   Con `minmax(0, 1fr)` las columnas se reparten el espacio de verdad y el
   nombre parte en dos líneas si hace falta. */
.dos-columnas .marcas {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .6rem;
}

@media (max-width: 420px) {
  .dos-columnas .marcas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Los nombres de marca NO se parten: «WooCom/merce» o «PrestaSho/p» quedan
   fatal y encima son nombres propios. Se encogen de tamaño en vez de
   romperse, que es lo que hace cualquier envase de producto cuando el
   nombre no cabe. */
.dos-columnas .marca__nombre {
  min-width: 0;
  overflow-wrap: normal;
  word-break: keep-all;
  hyphens: none;
  font-size: clamp(.68rem, .6rem + .25vw, .8rem);
  line-height: 1.25;
}

/* Los de dos palabras («Correos Express», «TikTok Shop») sí parten por el
   espacio, que es lo natural */
@media (max-width: 420px) {
  .dos-columnas .marca__nombre { font-size: .66rem; }
}

/* ==========================================================================
   Los logos, a tamaño óptico igualado
   Antes cada fichero traía su propio margen interior y unos llenaban la
   pastilla mientras otros quedaban diminutos; el ancho en CSS no podía
   corregirlo. Ahora el aire va dentro de cada fichero, medido logo a logo
   para que todos pesen lo mismo a la vista, y la imagen ocupa la caja
   entera: el margen lo pone el dibujo, no esta regla.
   ========================================================================== */

.dos-columnas .marca__caja img {
  width: 100%;
  height: 100%;
}

/* La inicial, cuando no hay logo (InPost) */
.dos-columnas .marca__inicial {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--violeta-hondo);
}

/* --------------------------------------------------------------------------
   La casilla «Y más»
   Salía como un cuadrado blanco sólido: heredaba el fondo de las pastillas
   normales. Tiene que leerse como un hueco reservado, no como una marca.
   -------------------------------------------------------------------------- */

.dos-columnas .marca--proxima .marca__caja {
  background: transparent;
  border: 1.5px dashed rgba(255, 255, 255, .3);
  box-shadow: none;
}
.dos-columnas .marca--proxima:hover .marca__caja { transform: none; }

.dos-columnas .marca__mas {
  font-size: 1.7rem;
  font-weight: 200;
  line-height: 1;
  color: rgba(255, 255, 255, .55);
}

/* El icono de la API: unas llaves de código dicen «esto se conecta
   programando» sin tener que escribirlo. */
.marca__codigo {
  font: 700 1.15rem ui-monospace, 'SF Mono', Menlo, monospace;
  color: var(--violeta-hondo);
  letter-spacing: -.04em;
}

/* El logo que firma el cierre. El fichero es violeta sobre transparente, así
   que sobre fondo oscuro hay que pasarlo a blanco: `brightness(0)` lo vuelve
   negro sólido conservando el alfa, e `invert(1)` lo pone en blanco. */
.alta__logo {
  display: block;
  height: 27px;
  width: auto;
  margin-bottom: 1.5rem;
  filter: brightness(0) invert(1);
  opacity: .92;
}


/* ==========================================================================
   Feeds de producto
   Los canales a un lado y lo que puedes hacer con ellos al otro. Los logos
   van en su color real: son marcas conocidas y reconocerlas es el punto.
   ========================================================================== */

.feeds__reja {
  display: grid;
  gap: clamp(1.5rem, 1.2rem + 2vw, 3rem);
}
@media (min-width: 900px) {
  .feeds__reja { grid-template-columns: 1fr 1fr; align-items: start; }
}

.feeds__canales {
  display: grid;
  gap: .6rem;
}

.feeds__canal {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: .9rem 1.1rem;
  border: 1px solid var(--linea);
  border-radius: 14px;
  background: var(--papel);
}

.feeds__logo {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 11px;
  background: #fff;
  border: 1px solid var(--linea);
}
.feeds__logo svg { width: 22px; height: 22px; }
/* Los SVG de Google, Meta y Microsoft llenan su caja; el unico que llega como
   imagen es apaisado y traia su propio margen, asi que a 24px cuadrados se
   quedaba en una franja diminuta al lado de los otros tres. Con el ancho
   completo y `contain` se ve del mismo tamaño optico sin deformarse. */
.feeds__logo img { width: 32px; height: 32px; object-fit: contain; border-radius: 5px; }

.feeds__nombre {
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: -.015em;
  color: var(--tinta);
}
.feeds__pie {
  margin-top: .1rem;
  font-size: .8rem;
  color: var(--tinta-suave);
}

.feeds__puntos {
  display: grid;
  gap: 1.4rem;
  padding-left: clamp(0rem, -1rem + 2vw, 1.5rem);
}

.feeds__punto h3 {
  margin: 0 0 .35rem;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--tinta);
}
.feeds__punto p {
  margin: 0;
  font-size: .9rem;
  line-height: 1.55;
  color: var(--tinta-suave);
}
/* El enlace, del color de marca y subrayado suave: el parrafo va en tono
   apagado y sin esto no se distinguiria que se puede pulsar. */
.feeds__punto a {
  color: var(--violeta);
  text-decoration: underline;
  text-underline-offset: .16em;
  text-decoration-color: rgba(50, 45, 161, .35);
  transition: text-decoration-color .2s;
}
.feeds__punto a:hover { text-decoration-color: var(--violeta); }

/* ==========================================================================
   El bloque del precio
   Tenía las cuatro esquinas rectas dentro de una tarjeta redondeada, así que
   se le salía por la derecha y cantaba. Se redondea por su lado exterior y
   se queda recto donde toca la tarjeta, que es como encaja una pieza dentro
   de otra.
   ========================================================================== */

.precios__accion {
  border-radius: 0 var(--radio) var(--radio) 0;
}

/* En estrecho el bloque pasa debajo, así que el redondeo cambia de lado */
@media (max-width: 860px) {
  .precios__accion { border-radius: 0 0 var(--radio) var(--radio); }
}


/* ==========================================================================
   Gestión de productos

   El editor masivo y el stock estuvieron un rato metidos en la sección de
   feeds, y no era su sitio: los feeds son la SALIDA del catálogo y esto es
   la gestión. Tiene entidad propia, así que va aparte.

   Se enseña la pantalla en vez de describirla. Antes las operaciones iban en
   cajas con borde y flecha y parecían botones, cuando solo eran ejemplos.
   Ahora la tabla las cuenta sola: las filas tocadas por el cambio van en
   ámbar —el mismo color que usa el panel de verdad— con el precio viejo
   tachado al lado del nuevo.
   ========================================================================== */

.productos__marco {
  display: grid;
  gap: clamp(1.5rem, 1.2rem + 2vw, 3rem);
  align-items: center;
}
@media (min-width: 900px) {
  .productos__marco { grid-template-columns: 1fr 1.1fr; }
}

.productos__puntos { display: grid; gap: 1.5rem; }

.productos__punto h3 {
  margin: 0 0 .3rem;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--tinta);
}
.productos__punto p {
  margin: 0;
  font-size: .89rem;
  line-height: 1.55;
  color: var(--tinta-suave);
}

/* --------------------------------------------------------------------------
   La tabla
   -------------------------------------------------------------------------- */

.productos__tabla {
  border: 1px solid var(--linea);
  border-radius: 14px;
  overflow: hidden;
  background: var(--papel-alto);
  box-shadow: 0 20px 45px -30px rgba(50, 45, 161, .5);
  font-size: .8rem;
}

.productos__jefe,
.productos__fila {
  display: grid;
  grid-template-columns: 1.6fr .8fr .6fr;
  gap: .5rem;
}

.productos__jefe {
  padding: .6rem .9rem;
  background: var(--niebla);
  border-bottom: 1px solid var(--linea);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}

.productos__fila {
  align-items: center;
  padding: .55rem .9rem;
  color: var(--tinta-media);
}
.productos__fila + .productos__fila { border-top: 1px solid #f0eff8; }

/* Las tocadas por el cambio: ámbar, como en el panel */
.productos__fila--toca { background: #fffbeb; }
.productos__fila--toca .productos__nuevo {
  color: var(--violeta-hondo);
  font-weight: 750;
}

.productos__viejo {
  margin-right: .35rem;
  font-size: .75rem;
  color: var(--tinta-suave);
  text-decoration: line-through;
}

.productos__pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  flex-wrap: wrap;
  padding: .7rem .9rem;
  border-top: 1px solid var(--linea);
  background: var(--papel);
  font-size: .78rem;
  color: var(--tinta-suave);
}
.productos__cuenta { color: var(--violeta-hondo); font-weight: 750; }

.productos__boton {
  padding: .35rem .8rem;
  border-radius: 8px;
  background: var(--violeta-hondo);
  color: #fff;
  font-size: .76rem;
  font-weight: 700;
}

/* ==========================================================================
   Preguntas frecuentes
   ==========================================================================

   Antes: diez cajas iguales en una columna de 54rem, con las respuestas sin
   llegar al borde y mucho blanco muerto a la derecha. Y el titular partido
   en dos líneas por el marcado viejo, cuando son dos palabras.

   Ahora en dos columnas: la sección mide la mitad de alto, las respuestas
   llenan su tarjeta y la vista tiene dónde apoyarse.
   ========================================================================== */

.faq__reja {
  display: grid;
  gap: clamp(.7rem, .5rem + .6vw, 1rem);
  align-items: start;
}
@media (min-width: 880px) {
  .faq__reja { grid-template-columns: 1fr 1fr; }
}

.faq__columna {
  display: grid;
  gap: clamp(.7rem, .5rem + .6vw, 1rem);
  align-content: start;
}

.faq .faq__caja {
  border: 1px solid var(--linea);
  border-radius: 16px;
  background: var(--papel-alto);
  transition: border-color .3s, box-shadow .3s;
}

.faq .faq__caja:hover { border-color: #cfcbec; }

/* Abierta: se despega del resto, para no perder de vista cuál estás leyendo */
.faq .faq__caja[open] {
  border-color: rgba(66, 60, 212, .3);
  box-shadow: 0 16px 40px -26px rgba(50, 45, 161, .5);
}

.faq .faq__pregunta {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: clamp(1rem, .85rem + .5vw, 1.3rem);
  cursor: pointer;
  font-size: .97rem;
  font-weight: 650;
  letter-spacing: -.015em;
  line-height: 1.4;
  color: var(--tinta);
  list-style: none;
}

/* La respuesta ocupa el ancho de su tarjeta, sin blanco muerto */
.faq .faq__respuesta {
  padding: 0 clamp(1rem, .85rem + .5vw, 1.3rem) clamp(1rem, .85rem + .5vw, 1.3rem);
  margin: 0;
  max-width: none;
  font-size: .91rem;
  line-height: 1.6;
  color: var(--tinta-suave);
}

/* El «más» que gira al abrir */
.faq .faq__mas {
  position: relative;
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: .1rem;
  border-radius: 7px;
  background: var(--niebla);
  transition: background .3s, transform .35s cubic-bezier(.2, .8, .25, 1);
}
.faq .faq__caja[open] .faq__mas {
  background: rgba(66, 60, 212, .12);
  transform: rotate(135deg);
}
.faq .faq__mas::before,
.faq .faq__mas::after {
  content: '';
  position: absolute;
  inset: 50% 25%;
  height: 1.5px;
  margin-top: -.75px;
  border-radius: 2px;
  background: var(--tinta-media);
}
.faq .faq__mas::after { transform: rotate(90deg); }
.faq .faq__caja[open] .faq__mas::before,
.faq .faq__caja[open] .faq__mas::after { background: var(--violeta-hondo); }

/* ==========================================================================
   El sello de «próximamente»

   Para lo que está en construcción y merece anunciarse igualmente. El caso
   que lo motivó: el portal de devoluciones, que es de lo más buscado del
   sector pero todavía no existe.

   Se anuncia a propósito y se deja indexar. No hay forma honesta de enseñar
   un texto a las personas y escondérselo a Google —y si se intenta con
   texto oculto, eso sí se penaliza—, así que la alternativa buena es decir
   la verdad: «esto viene». Capta la búsqueda sin prometer nada falso.

   Visualmente tiene que leerse como una promesa, no como una función más:
   de ahi el sello delante, la viñeta hueca y el tono apagado.
   ========================================================================== */

.punto--proximamente {
  /* Este punto no promete lo mismo que los otros tres, y tiene que notarse
     sin gritar: el sello delante y el texto en el tono suave del resto. */
  color: var(--tinta-suave);
}

.proximamente__sello {
  display: inline-block;
  margin-right: .45rem;
  padding: .12rem .45rem;
  border-radius: 999px;
  background: rgba(1, 236, 167, .18);
  color: #04795a;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .02em;
  white-space: nowrap;
  vertical-align: .05em;
}

/* La viñeta, hueca: lo que aun no existe no se pinta macizo. */
.muestra__puntos .punto--proximamente::before {
  background: transparent;
  border: 1.5px solid #0bbd8c;
}

/* Sobre los fondos oscuros, el verde de marca sin el fondo pastel */
.s--tinta .proximamente__sello,
.conexiones .proximamente__sello {
  background: rgba(1, 236, 167, .14);
  color: var(--verde);
}