/* ===========================================================================
   LA TARTUFERÍA — Páginas de marca 2026 (zona oscura): hoja BASE

   Esta hoja ya no define el aspecto de los módulos. Desde la versión v9 del
   traductor, la tipografía, los colores y los bordes de cada módulo se copian
   del JSON de Divi 5 y se escriben en modulos-2026.css, que se genera solo.

   Aquí queda únicamente lo que no pertenece a ningún módulo concreto:

     1. El hero, que necesita CSS porque Divi 4 no sabe guardar el modo de
        mezcla de la foto de fondo.
     2. Una RED DE SEGURIDAD de color, por si algún módulo llega sin regla
        propia: sobre fondo oscuro, el color por defecto del tema es casi
        negro y el texto desaparece. Vale más un blanco genérico que un
        módulo invisible.
     3. Los detalles estructurales de los botones (que vayan en línea, sin la
        flecha que Divi les añade al pasar el ratón).
     4. El responsive.

   Lo que se quitó, y por qué: había aquí una escala tipográfica inventada
   (t26-display, t26-titulo, lt26-antetitulo...) y unos filetes verticales
   aplicados a TODAS las columnas. Las dos cosas eran aproximaciones a datos
   que el JSON ya traía exactos, y las dos se notaban: títulos con el cuerpo
   cambiado y líneas donde el diseño no las tiene.

   ÁMBITO: la carga lt-paginas-2026.php solo en las cuatro páginas de marca.
   En la tienda y el portal B2B, que van en claro, ni se descarga.

   Paleta:  oro #c89d66 · oro suave #ba9869 · texto #eaeaea · apagado #979386
            titular #ffffff · líneas #353233 · fondos #1c1b19 #1a1a1a #0a0a0a
   =========================================================================== */


/* ===========================================================================
   1. EL HERO

   Divi 4 no tiene atributo para background-blend-mode. Sin la mezcla, la foto
   de la trufa sale a plena luz y el titular blanco deja de leerse encima.
   =========================================================================== */

body.lt26-pagina .et_pb_section.lt26-hero {
  min-height: 92vh;
  display: flex;
  align-items: center;
  background-blend-mode: soft-light;
  background-color: #1c1b19;
  background-size: cover;
  background-position: 50% 50%;
}


/* ===========================================================================
   2. RED DE SEGURIDAD

   Sin !important a propósito: estas reglas deben perder contra la regla
   propia del módulo en modulos-2026.css. Solo actúan donde no hay ninguna.
   =========================================================================== */

body.lt26-pagina .et_pb_section h1,
body.lt26-pagina .et_pb_section h2,
body.lt26-pagina .et_pb_section h3,
body.lt26-pagina .et_pb_section h4,
body.lt26-pagina .et_pb_section h5,
body.lt26-pagina .et_pb_section h6 {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 400;
  color: #ffffff;
  line-height: 1.15;
}

/* Igual que la regla de familia de más abajo: SOLO el contenedor del módulo.
   Tocar los <p> y <li> de dentro rompía los numerales 01 02 03 04, que traen
   Playfair marrón propio en el contenedor y lo pasan a su hijo por herencia.
   Una regla directa sobre el hijo gana a cualquier herencia, así que el
   numeral salía en Inter claro. Desde el contenedor, el módulo con estilo
   propio manda y esto solo cubre al que no tiene ninguno. */
body.lt26-pagina .et_pb_section .et_pb_text,
body.lt26-pagina .et_pb_section .et_pb_blurb_description {
  font-family: Inter, -apple-system, "Segoe UI", sans-serif;
  color: #eaeaea;
  /* Sin font-weight ni line-height a propósito. Al fijarlos aquí, los módulos
     que traen el suyo pero no el grosor lo heredaban de esta regla: los
     numerales 01 02 03 04 salían en peso 300 cuando el suyo es 500. El grosor
     lo pone cada módulo, y los que no lo traen lo reciben de la hoja de
     módulos generada. */
}

body.lt26-pagina .et_pb_section a       { color: #c89d66; }
body.lt26-pagina .et_pb_section a:hover { color: #eaeaea; }


/* ===========================================================================
   2 bis. LO QUE NO VIAJA EN UN EXPORT DE PÁGINAS

   Las páginas importadas de 2026.latartuferia.eu traen su maquetación y sus
   textos, pero NO los estilos globales del sitio de origen: en Divi esos viven
   en las Opciones del Tema, no dentro de la página. Todo módulo que allí
   heredaba del global, aquí hereda de NUESTROS valores por defecto, que son
   los de Divi de serie.

   Se nota en dos sitios, y los dos se corrigen aquí:
   =========================================================================== */

/* --- Los filetes salían AZULES -------------------------------------------
   Esas rayitas cortas bajo los rótulos («LA CASA», «SELECCIÓN», «ORIGEN») son
   módulos divisores. Divi los pinta con el color de acento del sitio, que de
   fábrica es el azul #2ea3f2. En su web el acento es el dorado de marca.
   Medido en el original: border-top de 0.909px en #c89d66, sobre ::before.

   Se corrige aquí y no cambiando el color de acento global de Divi porque
   ese ajuste alcanzaría también a la tienda y al portal. */
body.lt26-pagina .et_pb_divider:before {
  border-top-color: #c89d66 !important;
}

/* --- Algunas letras salían con otra fuente -------------------------------
   15 de los 78 módulos de texto no llevan tipografía propia: la heredaban del
   global. Al importarlos caen en las fuentes de serie de Divi —Arvo para
   titulares, Open Sans para texto—, que además ni siquiera están instaladas,
   así que acaban en una sustituta cualquiera del sistema.

   Estas dos reglas son la red de seguridad de familia. Van SIN !important: el
   módulo que sí traiga su fuente debe seguir ganando. */
body.lt26-pagina .et_pb_section h1,
body.lt26-pagina .et_pb_section h2,
body.lt26-pagina .et_pb_section h3,
body.lt26-pagina .et_pb_section h4,
body.lt26-pagina .et_pb_section h5,
body.lt26-pagina .et_pb_section h6,
body.lt26-pagina .et_pb_section .et_pb_module_header {
  font-family: "Playfair Display", Georgia, serif;
}

/* OJO: esta regla toca SOLO el contenedor del módulo (.et_pb_text), nunca el
   .et_pb_text_inner ni los <p> de dentro.
   La primera versión sí los tocaba, y rompió los numerales 01 02 03 04: Divi
   pone la fuente de cada módulo en el contenedor y deja que lo de dentro la
   herede. Una regla puesta directamente sobre el hijo gana SIEMPRE a lo que el
   hijo heredaría del padre, por muy específico que sea el selector del padre.
   Resultado: los numerales perdían su Playfair marrón y salían en Inter.
   Al quedarse en el contenedor, el módulo que trae fuente propia sigue
   mandando, y solo hereda de aquí el que no trae ninguna. */
body.lt26-pagina .et_pb_section .et_pb_text,
body.lt26-pagina .et_pb_section .et_pb_blurb_description {
  font-family: Inter, -apple-system, "Segoe UI", sans-serif;
}


/* ===========================================================================
   3. EL ÉNFASIS EN CURSIVA

   La «T» de «La otra T de Teruel». En su web es un <span class="te"> dentro
   del titular; se mantiene el nombre de clase para que el marcado siga valiendo.
   Medido del original: Playfair cursiva en #ba9869, un dorado más apagado que
   el de los rótulos.
   =========================================================================== */

body.lt26-pagina .et_pb_section .te {
  color: #ba9869;
  font-style: italic;
  font-family: "Playfair Display", Georgia, serif;
}


/* ===========================================================================
   4. BOTONES — solo lo estructural

   El color, el fondo y el borde los pone modulos-2026.css con los valores de
   su diseño. Aquí queda lo que no es cuestión de estilo sino de comportamiento
   de Divi.
   =========================================================================== */

/* Los dos botones del hero van uno al lado del otro, no apilados. */
body.lt26-pagina #page-container .et_pb_section .lt26-btn {
  display: inline-block;
  margin: 0 16px 0 0 !important;
}

/* El botón principal, relleno en dorado.
   Lo usa lt-canal-cta.php para distinguir la acción primaria («Ya soy cliente»)
   de la secundaria («Solicitar alta») cuando aparecen las dos juntas. Sin esto
   saldrían idénticas y el visitante no sabría cuál es cuál.
   Lleva #page-container porque el CSS que Divi genera por botón usa un ID. */
body.lt26-pagina #page-container .et_pb_section .lt26-btn-principal {
  background-color: #c89d66 !important;
  border-color: #c89d66 !important;
  color: #0a0a0a !important;
}

/* Divi le mete una flecha en :after al pasar el ratón. Su diseño no la tiene. */
body.lt26-pagina #page-container .et_pb_section .lt26-btn:after,
body.lt26-pagina #page-container .et_pb_section .lt26-btn .et_pb_button:after {
  display: none !important;
}


/* ===========================================================================
   5. FILAS

   Divi 5 maquetó con flexbox; Divi 4 usa su propia rejilla. Centrar
   verticalmente es lo que más acerca las dos: sin esto, en una fila de dos
   columnas el texto se va arriba y la imagen queda suelta a la derecha.
   =========================================================================== */

body.lt26-pagina .et_pb_section .et_pb_row {
  align-items: center;
}


/* ===========================================================================
   6. RESPONSIVE

   Al apilarse las columnas, el filete vertical deja de tener sentido y pasa a
   ser horizontal, que es lo que hace su sitio. La regla alcanza a cualquier
   columna que traiga borde derecho de su propio diseño, sin presuponer cuáles.
   =========================================================================== */

@media (max-width: 980px) {

  body.lt26-pagina .et_pb_section.lt26-hero {
    min-height: 70vh;
  }

  body.lt26-pagina #page-container .et_pb_section .lt26-btn {
    margin-bottom: 10px !important;
  }

  body.lt26-pagina .et_pb_section .et_pb_column[class*="lt26-0"] {
    border-right: none !important;
    border-bottom: 1px solid #353233 !important;
  }

  body.lt26-pagina .et_pb_section .et_pb_row .et_pb_column:last-child {
    border-bottom: none !important;
  }
}


/* ===========================================================================
   7. MARGEN LATERAL EN MÓVIL Y TABLET (26 oct)

   Sus filas van al 100 % de ancho sin relleno: en escritorio se centran por
   el max-width de 1400px, pero por debajo de 980px el texto y las imágenes
   quedaban pegados a los dos bordes de la pantalla. Pasa en su staging
   igual; aquí se le da el aire que no trae. El mismo valor lo usa la
   cabecera (lt-cabecera.php) para que logo, botón y texto queden alineados.

   Con !important y border-box: Divi escribe el relleno de cada fila con su
   propio selector, y sin border-box el 100 % más el relleno desbordaría.
   =========================================================================== */

@media (max-width: 980px) {
  body.lt26-pagina #main-content .et_pb_section .et_pb_row {
    box-sizing: border-box !important;
    padding-left: 32px !important;
    padding-right: 32px !important;
  }
}

@media (max-width: 767px) {
  body.lt26-pagina #main-content .et_pb_section .et_pb_row {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

@media (max-width: 359px) {
  body.lt26-pagina #main-content .et_pb_section .et_pb_row {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}


/* ===========================================================================
   8. TITULARES EN MÓVIL (26 oct)

   Al darle margen lateral al contenido salieron dos fallos que ya estaban:

   - Varios módulos de titular llevan a móvil el ancho de escritorio (116,
     147, 240px dentro de columnas de 320) y el texto queda en una tira
     estrecha o se sale del margen. En móvil van al ancho de su columna.

   - Los titulares de cabecera de «Canal profesional» y «Contacto» van a
     72px también en móvil, y «proveedor,» o «temporada» no caben en una
     pantalla de 360px: había scroll lateral. Bajan a 48px, el tamaño de
     sus titulares de sección. El de la portada (96px) sí cabe y se queda.
     Por slug de página y no por número de módulo, que cambia al reimportar.
   =========================================================================== */

@media (max-width: 767px) {
  body.lt26-pagina #main-content .et_pb_heading {
    width: 100% !important;
    max-width: 100% !important;
  }

  body.lt26-pag-canal-profesional #main-content .et_pb_section:first-child .et_pb_heading .et_pb_module_header,
  body.lt26-pag-contacto #main-content .et_pb_section:first-child .et_pb_heading .et_pb_module_header {
    font-size: 48px !important;
    line-height: 1.1 !important;
  }
}

/* «Conservación y uso» (Universo) va dentro de una tarjeta con 40px de
   relleno: en móvil le quedan 255px y «Conservación» a 48px mide ~295px.
   Mismo número de módulo que usa modulos-2026.css para este titular. */
@media (max-width: 767px) {
  body.lt26-pag-el-universo-de-la-trufa #main-content .et_pb_heading_13 .et_pb_module_header {
    font-size: 36px !important;
  }
}


/* ===========================================================================
   9. AUDITORÍA RESPONSIVE (26-27 oct)

   Medido en 8 anchos, de 320 a 1440 px. Informe y capturas en
   Documents/.../La tartuferia/auditoria-responsive-2026-10-26/.

   La causa común: Divi 5 maqueta con flex y guarda en cada módulo sus
   medidas de escritorio (anchos en %, rellenos de 40-118 px, grupos en
   fila). Al importarlo, en móvil esas medidas se quedan, y las tarjetas
   que en escritorio van de tres en tres siguen de tres en tres a 360 px.
   El texto no se sale: se parte sílaba a sílaba («Mel-ano-spo-ru-m»), así
   que no da scroll lateral y no salta a la vista en una medición.

   Por número de módulo y slug, como modulos-2026.css: los números no
   cambian al reimportar porque Divi los cuenta por orden en la página.
   Si una entrega nueva reordena módulos, revisar esta sección a 360 px.
   =========================================================================== */

/* --- Margen lateral entre 981 y 1480 px ----------------------------------
   El de la sección 7 acababa en 980. Por encima, la fila va al 100 % hasta
   llegar a 1400 px, y el texto tocaba el borde a 1024 y 1280 px. 40 px
   cuando la fila llena la pantalla; se reduce según aparece el margen del
   max-width y a 1480 px vale 0. Misma fórmula en lt-cabecera.php. */
@media (min-width: 981px) {
  body.lt26-pagina #main-content .et_pb_section .et_pb_row {
    box-sizing: border-box !important;
    padding-left: max(0px, 40px - max(0px, (100vw - 1400px) / 2)) !important;
    padding-right: max(0px, 40px - max(0px, (100vw - 1400px) / 2)) !important;
  }
}

/* --- Módulos de texto a todo el ancho en móvil -------------------------------
   Lo mismo que la sección 8 hace con los titulares: varios módulos de texto
   llevan a móvil su ancho de escritorio en %. La entradilla de Canal («Trabajamos
   con cocinas, distribuidores…») partía «distribuidores» a 360 px. */
@media (max-width: 767px) {
  body.lt26-pagina #main-content .et_pb_text {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* --- Universo: «Conservación y uso», alineado con el resto ----------------
   Su columna lleva 40 px de relleno sin fondo ni borde: en móvil el texto
   empezaba a 60 px del borde, y el de las secciones de alrededor a 20. */
@media (max-width: 767px) {
  body.lt26-pag-el-universo-de-la-trufa #main-content .et_pb_column_18 {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* --- «Conservación y uso» también en tablet --------------------------------
   El ajuste de la sección 8 empieza en 767; a 768 px seguía saliéndose. */
@media (min-width: 768px) and (max-width: 980px) {
  body.lt26-pag-el-universo-de-la-trufa #main-content .et_pb_heading_13 .et_pb_module_header {
    font-size: 40px !important;
  }
}

/* --- Portada: «900 – 1.400 m sobre el nivel del mar» ---------------------
   El bloque de texto lleva 118 px de relleno a cada lado. A 360 px dejaba
   el titular en una tira de 84 px, en nueve líneas y saliéndose. */
@media (max-width: 767px) {
  body.lt26-pag-la-tartuferia #main-content .et_pb_group_9 {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* --- Universo: la entradilla de la cabecera --------------------------------
   Va a 72 px en un módulo del 40 % de ancho: 128 px a 360, y partía
   «Tod-o», «ocu-rre», «coc-ina». En móvil, a todo el ancho y a 44 px. */
@media (max-width: 767px) {
  body.lt26-pag-el-universo-de-la-trufa #main-content .et_pb_text_28 {
    width: 100% !important;
    max-width: 100% !important;
  }
  body.lt26-pag-el-universo-de-la-trufa #main-content .et_pb_text_28 .et_pb_text_inner {
    font-size: 44px !important;
    line-height: 1.1 !important;
  }
}

/* --- Universo: el calendario de temporadas (2 filas de 3 tarjetas) --------
   Seguían de tres en tres en móvil, con 40 px de relleno: el texto quedaba
   en 25 px de ancho. De dos en dos desde 480 px y de una en una debajo. */
@media (max-width: 767px) {
  body.lt26-pag-el-universo-de-la-trufa #main-content .et_pb_group_16,
  body.lt26-pag-el-universo-de-la-trufa #main-content .et_pb_group_20 {
    flex-wrap: wrap !important;
  }
  body.lt26-pag-el-universo-de-la-trufa #main-content .et_pb_group_16 > .et_pb_group,
  body.lt26-pag-el-universo-de-la-trufa #main-content .et_pb_group_20 > .et_pb_group {
    flex: 0 0 50% !important;
    width: 50% !important;
    max-width: 50% !important;
    box-sizing: border-box !important;
    padding: 28px 24px !important;
  }
}
@media (max-width: 479px) {
  body.lt26-pag-el-universo-de-la-trufa #main-content .et_pb_group_16 > .et_pb_group,
  body.lt26-pag-el-universo-de-la-trufa #main-content .et_pb_group_20 > .et_pb_group {
    flex-basis: 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 24px 20px !important;
  }
}

/* --- Canal: los pasos 01-04 ------------------------------------------------
   Los cuatro en una fila de 58 px cada uno a 360 px: «Bolet-í-n»,
   «Transpo-rte». De dos en dos desde 480 px y apilados debajo. */
@media (max-width: 767px) {
  body.lt26-pag-canal-profesional #main-content .et_pb_group_5 {
    flex-wrap: wrap !important;
    gap: 32px 24px !important;
  }
  body.lt26-pag-canal-profesional #main-content .et_pb_group_5 > .et_pb_group {
    flex: 0 0 calc(50% - 12px) !important;
    width: calc(50% - 12px) !important;
    max-width: calc(50% - 12px) !important;
  }
}
@media (max-width: 479px) {
  body.lt26-pag-canal-profesional #main-content .et_pb_group_5 > .et_pb_group {
    flex-basis: 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* --- Titular de cabecera de Canal y Contacto en tablet ---------------------
   La adaptación de la sección 8 empieza en 767. Entre 768 y 980 el titular
   sigue a 72 px en media columna y «temporada» se salía 29 px. */
@media (min-width: 768px) and (max-width: 980px) {
  body.lt26-pag-canal-profesional #main-content .et_pb_section:first-child .et_pb_heading .et_pb_module_header,
  body.lt26-pag-contacto #main-content .et_pb_section:first-child .et_pb_heading .et_pb_module_header {
    font-size: 56px !important;
    line-height: 1.1 !important;
  }
}

/* --- Pantallas de 320 px (iPhone SE) ----------------------------------------
   «¿Hablamos de trufa?» (portada) a 48 px y «Conservación y uso» (Universo)
   a 36 px se salían 6 y 13 px de su caja. */
@media (max-width: 359px) {
  body.lt26-pag-la-tartuferia #main-content .et_pb_heading_11 .et_pb_module_header {
    font-size: 40px !important;
  }
  body.lt26-pag-el-universo-de-la-trufa #main-content .et_pb_heading_13 .et_pb_module_header {
    font-size: 30px !important;
  }
}

/* --- Portada: el hero con el móvil en horizontal (27 oct) ------------------
   Su fila lleva 160 px de relleno arriba y el titular va a 96 px. En vertical
   sobra altura, pero con el móvil girado (320-430 px de alto) la primera
   pantalla era solo foto y rótulo: el titular «La otra T de Teruel» empezaba
   por debajo del borde. Solo en pantallas bajas y apaisadas; en vertical y
   en tablet no cambia nada. El resto de cabeceras de marca sí caben. */
@media (max-width: 980px) and (max-height: 500px) and (orientation: landscape) {
  body.lt26-pag-la-tartuferia #main-content .et_pb_section:first-child {
    padding-top: 24px !important;
  }
  body.lt26-pag-la-tartuferia #main-content .et_pb_section:first-child > .et_pb_row:first-child {
    padding-top: 24px !important;
  }
  body.lt26-pag-la-tartuferia #main-content .et_pb_section:first-child .et_pb_heading .et_pb_module_header {
    font-size: 56px !important;
    line-height: 1.05 !important;
  }
}