/* =========================================================================
   ESENCIA · pieza PORTADA (pantalla 01 de la maqueta, sin cabecera ni pie)

   La portada nueva es la página BORRADOR #1795 (Elementor). Su estructura
   la arma scratchpad/esencia2/portada/gen.py y le pone estas clases (todas
   empiezan por "esc-por" para no chocar con las de otras piezas):

     .esc-por.esc-por-hero          el hero partido (texto | foto)
        .esc-por-hero__txt            NUEVA TEMPORADA · título · párrafo · botón
           .esc-por-sobre  .esc-por-hero__tit  .esc-por-hero__p  .esc-por-hero__btn
        .esc-por-hero__foto           la foto (widget .esc-por-hero__img)
     .esc-por.esc-por-franja        los 4 avisos
        .esc-por-franja__c            cada casilla: .esc-por-franja__t + .esc-por-franja__d
     .esc-por.esc-por-sec.esc-por-cats      "Por categoría"
        .esc-por-sec__tit             título (.esc-por-sec__h) | VER TODO (.esc-por-sec__ver)
        .esc-por-cats__rejilla        4 widgets Shortcode .esc-por-cats__c con <a class="esc-por-cat">
     .esc-por.esc-por-cita          la reseña: .esc-por-cita__q + .esc-por-cita__firma
     .esc-por.esc-por-sec.esc-por-ultimos   "Lo último que llegó"
        .esc-por-sec__tit             título | VER LOS N
        .esc-por-ultimos__lista       widget "Productos" (la tarjeta es de la pieza BASE)

   Medidas copiadas de la maqueta (p1-esencia.html) con el navegador, a
   1180 px. OJO con una rareza de la maqueta que SÍ se ve en el PDF: la caja
   ".env" tiene 44 px de margen a cada lado, pero en las secciones (".sec")
   ese margen se anula. Por eso el hero y la franja llevan 44 px por lado y
   "Por categoría" / "Lo último" van pegados al borde de la caja de 1180.

   La maqueta solo existe en computador. Tableta (hasta 1024 px) y celular
   (hasta 767 px) están diseñados con el mismo lenguaje: sin sombras, sin
   esquinas redondas, líneas de un pelo, Bodoni para títulos y Jost para lo
   demás.

   Por qué tanto "!important": esta hoja tiene que ganarle a la del tema
   (Botiga), a la de Elementor y a la hoja base de Esencia, que también lo
   usan. Todo va acotado a las clases "esc-por", así que no toca nada más.
   ========================================================================= */


/* ------------------------------------------- la "cursiva" de la maqueta */

/* Ojo, detalle fino: la maqueta cargó Bodoni Moda SIN su cursiva, así que
   el navegador inclinó la letra recta para "sostenida." y para la reseña.
   Eso es lo que se ve en el PDF (letras más anchas que la cursiva de
   verdad). Para que quede igual, aquí se declara la letra RECTA con otro
   nombre y sin cursiva: al pedirle cursiva, el navegador la inclina igual
   que en la maqueta. Son los mismos archivos de fuentes/ (no baja nada nuevo). */
@font-face {
  font-family: 'Esencia Bodoni Inclinada';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fuentes/BodoniModa-400-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Esencia Bodoni Inclinada';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fuentes/BodoniModa-400-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ------------------------------------------------- las cajas, en general */

/* Cada sección es una caja de 1180 px centrada (la ".env" de la maqueta).
   Se apagan el relleno y los huecos que Elementor y Botiga ponen solos:
   las medidas las pone esta hoja. */
.e-con.esc-por {
  --padding-top: 0px; --padding-right: 0px; --padding-bottom: 0px; --padding-left: 0px;
  --gap: 0px; --row-gap: 0px; --column-gap: 0px;
  --width: 100%;
  width: 100% !important;
  max-width: 1180px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  box-sizing: border-box;
  font-family: var(--esc-sans);
  font-weight: 400;
  letter-spacing: normal;
  color: var(--esc-tinta);
}
.esc-por .e-con {
  --padding-top: 0px; --padding-right: 0px; --padding-bottom: 0px; --padding-left: 0px;
  --gap: 0px; --row-gap: 0px; --column-gap: 0px;
  padding: 0 !important;
  margin: 0 !important;
  min-width: 0;
  box-sizing: border-box;
}
.esc-por .elementor-widget {
  margin: 0 !important;
  min-width: 0;
}
.esc-por .elementor-widget-container,
.esc-por .elementor-shortcode { margin: 0; padding: 0; }
.esc-por a { text-decoration: none !important; }
.esc-por p { margin: 0; }

/* Los títulos de Elementor traen interlineado 1 y la hoja base les pone
   "text-wrap: balance" (reparte las palabras entre renglones). La maqueta
   no lo hace: se vuelve a lo normal y cada título dice su medida. */
.esc-por .elementor-heading-title {
  line-height: normal;
  text-wrap: wrap;
  padding: 0;
  margin: 0;
}


/* ------------------------------------------------------- 1. hero partido */

/* Dos mitades iguales, 520 px de alto como mínimo, 44 px a cada lado. */
.e-con.esc-por-hero {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  min-height: 520px;
  padding: 0 44px !important;
}

/* La mitad del texto: centrado de arriba abajo, 74 px arriba y abajo y
   44 px de aire antes de la foto. */
.esc-por .esc-por-hero__txt.e-con {
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 74px 44px 74px 0 !important;
}
.esc-por-hero__txt > .elementor-widget { width: 100%; }

/* NUEVA TEMPORADA */
.esc-por .esc-por-sobre.elementor-widget { margin-bottom: 22px !important; }
.esc-por .esc-por-sobre .elementor-heading-title {
  font-family: var(--esc-sans) !important;
  font-size: 10.5px !important;
  font-weight: 400 !important;
  line-height: normal !important;
  letter-spacing: .34em !important;
  text-transform: uppercase;
  color: var(--esc-grafito-pdf) !important;
}

/* La forma, / sostenida. */
.esc-por .esc-por-hero__tit.elementor-widget { margin-bottom: 24px !important; }
.esc-por .esc-por-hero__tit .elementor-heading-title {
  font-family: var(--esc-serif) !important;
  font-size: 66px !important;
  font-weight: 400 !important;
  font-style: normal;
  line-height: 1.02 !important;
  letter-spacing: normal !important;
  text-wrap: balance;
  color: var(--esc-tinta) !important;
}
.esc-por .esc-por-hero__tit em {
  font-family: 'Esencia Bodoni Inclinada', var(--esc-serif) !important;
  font-style: italic;
}

/* El párrafo: 40 caracteres de ancho como mucho. */
.esc-por .esc-por-hero__p.elementor-widget { margin-bottom: 34px !important; }
.esc-por .esc-por-hero__p,
.esc-por .esc-por-hero__p p {
  font-family: var(--esc-sans) !important;
  font-size: 15.5px !important;
  font-weight: 300 !important;
  line-height: 1.75 !important;
  letter-spacing: normal !important;
  color: var(--esc-texto-2) !important;
}
.esc-por .esc-por-hero__p p { max-width: 40ch; margin: 0 !important; }

/* VER LA COLECCIÓN: botón lleno, tinta. */
.esc-por .esc-por-hero__btn.elementor-widget { width: auto; }
.esc-por .esc-por-hero__btn .elementor-button {
  display: inline-block;
  font-family: var(--esc-sans) !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  line-height: normal !important;
  letter-spacing: .26em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  padding: 15px 38px !important;
  background: var(--esc-tinta) !important;
  color: var(--esc-porcelana) !important;
  border: 1px solid var(--esc-tinta) !important;
  border-radius: 0 !important;
}
.esc-por .esc-por-hero__btn .elementor-button:hover,
.esc-por .esc-por-hero__btn .elementor-button:focus-visible {
  background: transparent !important;
  color: var(--esc-tinta) !important;
}
.esc-por .esc-por-hero__btn .elementor-button-text { text-decoration: none !important; }

/* La foto llena su mitad (como el "cover" de la maqueta): se recorta lo
   que sobre por igual arriba y abajo. El gris claro se ve mientras carga. */
.esc-por .esc-por-hero__foto.e-con {
  display: block !important;
  position: relative;
  overflow: hidden;
  background: #EAE7E2;
}
.esc-por .esc-por-hero__foto > .esc-por-hero__img {
  position: absolute !important;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
}
.esc-por .esc-por-hero__img .elementor-widget-container,
.esc-por .esc-por-hero__img a { display: block; width: 100%; height: 100%; }
.esc-por .esc-por-hero__img img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover;
  object-position: 50% 50%;
  border-radius: 0 !important;
}


/* ----------------------------------------------------- 2. franja de avisos */

/* Cuatro casillas iguales separadas por una línea de un pelo; la franja
   lleva una línea arriba y otra abajo de lado a lado de la caja. */
.e-con.esc-por-franja {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  padding: 0 44px !important;
  border-top: 1px solid var(--esc-linea);
  border-bottom: 1px solid var(--esc-linea);
}
.esc-por .esc-por-franja__c.e-con {
  display: block !important;
  padding: 26px 22px !important;
  border-right: 1px solid var(--esc-linea);
}
.esc-por .esc-por-franja__c.e-con:last-child { border-right: none; }

.esc-por .esc-por-franja__t.elementor-widget { margin-bottom: 7px !important; }
.esc-por .esc-por-franja__t .elementor-heading-title {
  font-family: var(--esc-sans) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  line-height: normal !important;
  letter-spacing: .2em !important;
  text-transform: uppercase;
  color: var(--esc-tinta) !important;
}
.esc-por .esc-por-franja__d,
.esc-por .esc-por-franja__d p {
  font-family: var(--esc-sans) !important;
  font-size: 12.5px !important;
  font-weight: 300 !important;
  line-height: 1.5 !important;
  letter-spacing: normal !important;
  color: var(--esc-grafito-pdf) !important;
}


/* ---------------------------------- 3 y 5. secciones con título (82 px) */

/* "Por categoría" y "Lo último que llegó" van pegados al borde de la caja
   de 1180 (así sale en el PDF), con 82 px arriba y abajo. */
.e-con.esc-por-sec {
  display: block !important;
  padding: 82px 0 !important;
}

/* El título a la izquierda y VER TODO a la derecha, alineados por abajo. */
.esc-por .esc-por-sec__tit.e-con {
  display: flex !important;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
  margin: 0 0 40px !important;
}
.esc-por .esc-por-sec__tit > .elementor-widget { width: auto; flex: 0 1 auto; }

.esc-por .esc-por-sec__h .elementor-heading-title {
  font-family: var(--esc-serif) !important;
  font-size: 36px !important;
  font-weight: 400 !important;
  line-height: normal !important;
  letter-spacing: normal !important;
  color: var(--esc-tinta) !important;
}

/* VER TODO / VER LOS 226: mayúsculas espaciadas con una raya debajo. */
.esc-por .esc-por-sec__ver .elementor-heading-title,
.esc-por .esc-por-sec__ver .elementor-shortcode {
  font-family: var(--esc-sans) !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  line-height: normal !important;
  letter-spacing: .2em !important;
  text-transform: uppercase;
  white-space: nowrap;
}
.esc-por .esc-por-sec__ver a {
  display: block;
  color: var(--esc-tinta) !important;
  font: inherit !important;
  letter-spacing: inherit !important;
  border-bottom: 1px solid var(--esc-tinta);
  padding-bottom: 3px;
}
.esc-por .esc-por-sec__ver a:hover { color: var(--esc-grafito-pdf) !important; border-color: var(--esc-grafito-pdf); }


/* ------------------------------------------------------------ 3. categorías */

/* Cuatro tarjetas pegadas, separadas por un hilo de línea de 1 px que va
   de arriba abajo (el fondo de la rejilla se asoma entre las tarjetas). */
.esc-por .esc-por-cats__rejilla.e-con {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px !important;
  background: var(--esc-linea);
}
.esc-por .esc-por-cats__c.elementor-widget { background: var(--esc-porcelana); }
.esc-por .esc-por-cats__c .elementor-shortcode { height: 100%; }

.esc-por-cat {
  display: block;
  height: 100%;
  color: var(--esc-tinta) !important;
}
.esc-por-cat__f {
  display: block;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: #EAE7E2;
}
.esc-por-cat__f img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover;
  object-position: 50% 50%;
  border-radius: 0 !important;
}
.esc-por-cat__n {
  display: block;
  padding: 17px 2px 0;
}
.esc-por-cat__n b {
  display: block;
  font-family: var(--esc-sans);
  font-size: 13px;
  font-weight: 500;
  line-height: normal;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--esc-tinta);
}
.esc-por-cat__n span {
  display: block;
  font-family: var(--esc-sans);
  font-size: 11.5px;
  font-weight: 300;
  line-height: 16px;
  letter-spacing: normal;
  color: var(--esc-grafito-pdf);
}


/* ---------------------------------------------------------------- 4. reseña */

/* Banda blanca de lado a lado de la pantalla, con línea arriba y abajo. */
.e-con.esc-por.esc-por-cita {
  display: block !important;
  max-width: none !important;
  padding: 76px 44px !important;
  background: var(--esc-nieve) !important;
  border-top: 1px solid var(--esc-linea);
  border-bottom: 1px solid var(--esc-linea);
  text-align: center;
}
.esc-por .esc-por-cita__q.elementor-widget { margin-bottom: 22px !important; }
.esc-por .esc-por-cita__q .elementor-heading-title {
  font-family: 'Esencia Bodoni Inclinada', var(--esc-serif) !important;
  font-size: 29px !important;
  font-weight: 400 !important;
  font-style: italic;
  line-height: 1.45 !important;
  letter-spacing: normal !important;
  max-width: 24ch;
  margin: 0 auto;
  color: var(--esc-tinta) !important;
}
.esc-por .esc-por-cita__firma .elementor-heading-title {
  font-family: var(--esc-sans) !important;
  font-size: 10.5px !important;
  font-weight: 400 !important;
  line-height: normal !important;
  letter-spacing: .28em !important;
  text-transform: uppercase;
  color: var(--esc-grafito-pdf) !important;
}


/* ------------------------------------------------------------ 5. lo último */

/* La tarjeta de cada producto la dibuja y la pinta la pieza BASE. Aquí
   solo: 4 por fila en computador, sin bordes ni márgenes del widget. */
.esc-por .esc-por-ultimos__lista ul.products {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  margin: 0 !important;
  padding: 0 !important;   /* Botiga le pone 15 px a los lados en tableta y celular */
}
.esc-por .esc-por-ultimos__lista ul.products::before,
.esc-por .esc-por-ultimos__lista ul.products::after { display: none !important; }


/* ======================================= entre 1025 y 1179 px (computador chico) */

/* La caja ya no cabe entera: las secciones dejan 24 px a cada lado (igual
   que la fila del menú de la cabecera en estas medidas). */
@media (max-width: 1179px) {
  .e-con.esc-por-sec { padding: 82px 24px !important; }
}


/* =============================================================== tableta */

@media (max-width: 1024px) {
  /* Botiga mete 15 px a los lados de las cajas en tableta y celular: aquí
     manda esta hoja. */
  .e-con.esc-por-hero,
  .e-con.esc-por-franja { padding-left: 24px !important; padding-right: 24px !important; }
  .e-con.esc-por-sec { padding: 68px 24px !important; }
  .e-con.esc-por.esc-por-cita { padding: 64px 24px !important; }

  /* Hero: sigue partido, más bajo y con el título más chico. */
  .e-con.esc-por-hero { min-height: 460px; }
  .esc-por .esc-por-hero__txt.e-con { padding: 56px 32px 56px 0 !important; }
  .esc-por .esc-por-hero__tit .elementor-heading-title { font-size: 50px !important; }
  .esc-por .esc-por-hero__p,
  .esc-por .esc-por-hero__p p { font-size: 15px !important; }

  /* Franja: dos y dos. */
  .e-con.esc-por-franja { grid-template-columns: repeat(2, 1fr); }
  .esc-por .esc-por-franja__c.e-con:nth-child(2n) { border-right: none; }
  .esc-por .esc-por-franja__c.e-con:nth-child(-n+2) { border-bottom: 1px solid var(--esc-linea); }

  .esc-por .esc-por-sec__tit.e-con { margin-bottom: 32px !important; }
  .esc-por .esc-por-sec__h .elementor-heading-title { font-size: 32px !important; }

  .esc-por .esc-por-cita__q .elementor-heading-title { font-size: 26px !important; }

  .esc-por-cat__n b { font-size: 12px; letter-spacing: .12em; }
}


/* =============================================================== celular */

@media (max-width: 767px) {
  .e-con.esc-por-hero,
  .e-con.esc-por-franja { padding-left: 16px !important; padding-right: 16px !important; }
  .e-con.esc-por-sec { padding: 56px 16px !important; }
  .e-con.esc-por.esc-por-cita { padding: 56px 16px !important; }

  /* Hero: primero la foto (4/5) y debajo el texto. */
  .e-con.esc-por-hero {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .esc-por .esc-por-hero__foto.e-con { order: -1; aspect-ratio: 4 / 5; }
  .esc-por .esc-por-hero__txt.e-con { padding: 36px 0 48px !important; }
  .esc-por .esc-por-sobre.elementor-widget { margin-bottom: 16px !important; }
  .esc-por .esc-por-hero__tit.elementor-widget { margin-bottom: 18px !important; }
  .esc-por .esc-por-hero__tit .elementor-heading-title { font-size: 44px !important; }
  .esc-por .esc-por-hero__p.elementor-widget { margin-bottom: 28px !important; }
  .esc-por .esc-por-hero__btn.elementor-widget { width: 100%; }
  .esc-por .esc-por-hero__btn .elementor-button { display: block; text-align: center; }

  /* Franja: dos y dos, un poco más apretada. */
  .esc-por .esc-por-franja__c.e-con { padding: 20px 14px !important; }
  .esc-por .esc-por-franja__t .elementor-heading-title { font-size: 10.5px !important; letter-spacing: .16em !important; }

  .esc-por .esc-por-sec__tit.e-con { margin-bottom: 26px !important; gap: 12px; }
  .esc-por .esc-por-sec__h .elementor-heading-title { font-size: 27px !important; }
  .esc-por .esc-por-sec__ver .elementor-heading-title,
  .esc-por .esc-por-sec__ver .elementor-shortcode { font-size: 10.5px !important; letter-spacing: .16em !important; }

  /* Categorías: dos y dos. */
  .esc-por .esc-por-cats__rejilla.e-con { grid-template-columns: repeat(2, 1fr); }
  .esc-por-cat__n { padding: 12px 2px 14px; }

  .esc-por .esc-por-cita__q .elementor-heading-title { font-size: 23px !important; }
  .esc-por .esc-por-cita__q.elementor-widget { margin-bottom: 18px !important; }
  .esc-por .esc-por-cita__firma .elementor-heading-title { font-size: 10px !important; letter-spacing: .22em !important; }

  /* Lo último: dos por fila. */
  .esc-por .esc-por-ultimos__lista ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}