@charset "utf-8";
/* ==========================================================
   Trembling Light — estructura semántica (Fase 15)
   header / nav / main / aside / footer sobre CSS Grid.
   Sustituye a las tablas de maquetación de 920 px fijos.
   Depende de los tokens de tl-sistema.css.

   Solo actúa sobre body.tl (páginas migradas). Las que aún no lo
   están siguen con css/responsive.css, acotada a body:not(.tl).
   ========================================================== */

*, *::before, *::after { box-sizing: border-box; }

body.tl {
  margin: 0;
  font-family: var(--tl-serif);
  color: var(--tl-lila);
  background-color: #fdfdfd;
  background-image: url(../images/fondo1.jpg);
}

.tl-shell {
  max-width: var(--tl-ancho);
  margin: 0 auto;
  padding: 0 20px;
}

/* ---------- CABECERA ---------- */
.tl-header { padding-top: 10px; }

.tl-topbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.tl-logo img { display: block; height: auto; }

.tl-utilidades {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  margin-left: auto;
}

.tl-social, .tl-idiomas, .tl-nav-principal ul, .tl-mapa ul, .tl-legal ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.tl-topline {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: nowrap;      /* redes y banderas SIEMPRE en la misma línea */
}
.tl-social, .tl-idiomas {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}
.tl-social a, .tl-idiomas a { flex: 0 0 auto; display: inline-flex; padding: 4px; }
.tl-social img, .tl-idiomas img { display: block; }
.tl-idiomas a[aria-current="true"] {
  outline: 2px solid var(--tl-rosa-hover);
  outline-offset: 1px;
  border-radius: 2px;
}

/* Menú principal: enlaces reales en una lista, sin barras en el marcado */
.tl-nav-principal ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 2px 4px;
}
.tl-nav-principal li { display: flex; align-items: center; }
.tl-nav-principal li + li::before {
  content: "|";
  color: var(--tl-separador);
  margin-right: 4px;
  align-self: center;
}

/* ---------- CARRUSEL: vive dentro del header ---------- */
.tl-hero {
  width: 100%;
  overflow: hidden;
  margin-top: 12px;
}
.tl-hero .tl-carrusel { width: 100%; }
/* El slider se pinta a 920 px fijos y el contenedor mide justo eso, así el
   carrusel casa con el borde del contenido. La fase 17 lo hará fluido. */
.tl-hero > div { margin: 0 auto; }

/* ---------- CUERPO: main + aside ---------- */
.tl-cuerpo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--tl-sidebar);
  gap: 32px;
  align-items: start;
  padding: 28px 0 8px;
}

.tl-main { min-width: 0; hyphens: auto; overflow-wrap: break-word; }

/* El contenido viene de 2010: imágenes con width y height clavados en el
   atributo, iframes de 560x315 y divs con width en el style. Nada de eso
   cabe en un móvil, así que se neutraliza aquí en vez de tocar 802 páginas.
   Medido sobre el sitio: 1.238 imágenes con alto fijo, 572 con ancho > 420,
   185 iframes, 19 divs con width fijo, 18 tablas y 113 páginas con cadenas
   sin espacios de 28 caracteres o más. */
.tl-main img {
  max-width: 100%;
  height: auto;              /* si no, el alto fijo las deforma al estrecharse */
}
.tl-main iframe {
  max-width: 100%;
}
/* Los vídeos de YouTube van a 560x315: se les da proporción fluida */
.tl-main iframe[src*="youtube"] {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}
/* Divs con el ancho clavado en el atributo style */
.tl-main div[style*="width:"] { max-width: 100% !important; }
/* Las tablas que quedan son formularios: que rueden en horizontal antes que
   desbordar la página */
.tl-main table { max-width: 100%; }
.tl-main > table { display: block; overflow-x: auto; }
.tl-main h1 {
  font-family: var(--tl-serif);
  font-size: 26px;
  line-height: 1.25;
  color: var(--tl-rosa);
  margin: 0 0 16px;
  text-wrap: balance;        /* reparte las líneas en vez de dejar una huérfana */
}
.tl-main p { line-height: 1.6; font-size: 15px; }

/* ---------- FICHA DE PRODUCTO: foto y texto en paralelo ---------- */
/* La foto flota: el texto empieza a su lado y, cuando la foto termina,
   recupera el ancho completo. Más compacto que una columna rígida. */
.tl-ficha-foto {
  float: left;
  width: 200px;
  max-width: 38%;
  margin: 2px 24px 14px 0;
}
.tl-ficha-foto img { display: block; width: 100%; height: auto; }

/* El <main> contiene el float para que no se derrame sobre el pie */
.tl-main::after { content: ""; display: block; clear: both; }

.tl-aside { display: flex; flex-direction: column; gap: 14px; }
.tl-aside a { display: block; }
.tl-aside img {
  display: block;
  width: 100%;
  height: auto;
  transition: opacity .2s ease, transform .2s ease;
}
.tl-aside a:hover img { opacity: .82; transform: translateY(-2px); }

/* ---------- PIE ---------- */
.tl-footer { padding: 8px 0 28px; }
.tl-footer-filete { text-align: center; margin: 8px 0 20px; }
.tl-footer-filete img { max-width: 100%; height: auto; }

.tl-mapa {
  display: grid;
  /* Columnas fijas, NO auto-fit: con auto-fit el número de columnas dependía
     del rótulo más largo y el pie salía distinto en cada idioma.
     Son 5: las mismas secciones del menú de arriba. HOME no está — ya lleva
     a la portada el logo de la cabecera. */
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 22px 24px;
}
.tl-mapa > div { min-width: 0; }
.tl-mapa > div > a { display: inline-block; margin-bottom: 6px; overflow-wrap: break-word; }
.tl-mapa ul li { margin: 2px 0; }
.tl-mapa ul a { font-size: 12px; }

.tl-legal { text-align: center; margin-top: 26px; }
.tl-legal ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; }
.tl-legal li + li::before { content: "|"; color: var(--tl-separador); margin-right: 14px; }
.tl-copyright {
  text-align: center;
  font-size: 12px;
  font-weight: normal;
  color: var(--tl-gris);
  margin: 14px 0 0;
}

/* ---------- BOTÓN DE MENÚ (solo móvil) ---------- */
.tl-nav-toggle {
  display: none;             /* en escritorio no existe */
  align-items: center;
  gap: 9px;
  background: none;
  border: 1px solid var(--tl-separador);
  border-radius: 4px;
  padding: 8px 12px;
  cursor: pointer;
  font-family: var(--tl-serif);
  font-size: 14px;
  font-weight: 700;
  color: var(--tl-azul);
}
.tl-nav-toggle-barras,
.tl-nav-toggle-barras::before,
.tl-nav-toggle-barras::after {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--tl-azul);
  content: "";
}
.tl-nav-toggle-barras { position: relative; }
.tl-nav-toggle-barras::before { position: absolute; top: -6px; }
.tl-nav-toggle-barras::after  { position: absolute; top:  6px; }
.tl-nav-toggle[aria-expanded="true"] { border-color: var(--tl-rosa-hover); }

/* ---------- ADAPTATIVO ---------- */
@media (max-width: 900px) {
  .tl-shell { padding: 0 16px; }

  /* Fila 1: logo izquierda, botón derecha. Fila 2: redes + banderas.
     Fila 3: el menú, cuando se abre. */
  .tl-topbar { flex-wrap: wrap; align-items: center; gap: 10px; }
  .tl-logo { flex: 0 0 auto; }
  .tl-logo img { width: 108px; }

  .tl-nav-toggle { display: inline-flex; margin-left: auto; }

  .tl-utilidades {
    flex: 1 0 100%;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-left: 0;
  }
  .tl-topline { justify-content: center; gap: 16px; }

  .tl-nav-principal { width: 100%; }
  /* Sin JavaScript el menú queda desplegado; con JavaScript, plegado */
  .tl-js .tl-nav-principal { display: none; }
  .tl-js .tl-nav-principal[data-abierto] { display: block; }

  .tl-nav-principal ul {
    flex-direction: column;
    gap: 0;
    border-top: 1px solid var(--tl-separador);
  }
  .tl-nav-principal li { display: block; border-bottom: 1px solid var(--tl-separador); }
  .tl-nav-principal li + li::before { content: none; }
  .tl-nav-principal a { display: block; padding: 13px 4px; font-size: 15px; text-align: center; }

  .tl-cuerpo { grid-template-columns: 1fr; gap: 26px; }
  .tl-main  { order: 1; }
  .tl-aside {
    order: 2;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    align-items: start;
  }

  .tl-mapa { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 24px; }
}

@media (max-width: 620px) {
  .tl-ficha-foto { float: none; margin: 0 auto 18px; width: auto; max-width: 220px; }
}

@media (max-width: 480px) {
  .tl-shell { padding: 0 14px; }
  .tl-main h1 { font-size: 22px; }
  .tl-nav-toggle-txt { display: none; }
  .tl-nav-toggle { padding: 9px 11px; }
  .tl-aside { grid-template-columns: 1fr; }
  .tl-mapa { grid-template-columns: 1fr; }
  .tl-legal ul { flex-direction: column; gap: 8px; }
  .tl-legal li + li::before { content: none; }
}


/* ---------- ESCALA TIPOGRÁFICA EN MÓVIL ----------
   El contenido usa las clases del CSS de 2010, con tamaños pensados para una
   columna de 545 px: tit_txxtrosa 24px, tit_txxt 22px, txxt 18px. En 390 px
   eso deja titulares de seis y siete líneas. Se reescalan solo en móvil. */
@media (max-width: 620px) {
  .tl-main h1 { font-size: 21px; line-height: 1.22; }

  .tl-main .tit_txxtrosa,
  .tl-main .tit_txxtrosa2,
  .tl-main .tit_txxtrosagr { font-size: 18px !important; line-height: 1.3; }

  .tl-main .tit_txxt { font-size: 17px !important; line-height: 1.3; }

  .tl-main,
  .tl-main .txxt,
  .tl-main .txxt_rosa,
  .tl-main .txxt_naranja,
  .tl-main .tit_txxtazul,
  .tl-main .txxt_destacadorosa,
  .tl-main p,
  .tl-main li,
  .tl-main dd,
  .tl-main dt { font-size: 14.5px !important; line-height: 1.6; }

  .tl-main .texto2 { font-size: 14px !important; }

  /* El justificado en una columna estrecha abre ríos: a bandera */
  .tl-main p, .tl-main span, .tl-main div { text-align: left !important; }
  .tl-main p[align="center"], .tl-main div[align="center"] { text-align: center !important; }
}

@media (max-width: 480px) {
  .tl-main h1 { font-size: 19px; }
  .tl-main .tit_txxtrosa,
  .tl-main .tit_txxtrosa2,
  .tl-main .tit_txxtrosagr { font-size: 17px !important; }
  .tl-main,
  .tl-main .txxt,
  .tl-main .txxt_rosa,
  .tl-main .tit_txxtazul,
  .tl-main .txxt_destacadorosa,
  .tl-main p,
  .tl-main li,
  .tl-main dd,
  .tl-main dt { font-size: 14px !important; }
}

/* ---------- Enlace de salto (accesibilidad) ---------- */
.tl-saltar {
  position: absolute;
  left: -9999px;
  top: 0;
  background: #fff;
  color: var(--tl-azul);
  padding: 10px 16px;
  z-index: 100;
}
.tl-saltar:focus { left: 8px; top: 8px; outline: 2px solid var(--tl-rosa-hover); }

/* ---------- FICHAS DESPLEGABLES DEL DIRECTORIO ----------
   Los puntos de venta van en <details>/<summary>. En escritorio se ven
   abiertos y el resumen hace de subtítulo; en móvil se pliegan, que es
   donde la lista corrida se hacía ilegible. */
.tl-acordeon {
  border-top: 1px solid var(--tl-separador);
  margin: 0;
}
.tl-acordeon:last-of-type { border-bottom: 1px solid var(--tl-separador); }

.tl-acordeon > summary {
  font-family: var(--tl-serif);
  font-size: 18px;
  font-weight: 700;
  color: var(--tl-rosa);
  padding: 12px 0;
  cursor: default;
  list-style: none;
}
.tl-acordeon > summary::-webkit-details-marker { display: none; }

.tl-acordeon-cuerpo { padding-bottom: 6px; }

@media (max-width: 620px) {
  .tl-acordeon > summary {
    cursor: pointer;
    position: relative;
    padding: 14px 30px 14px 0;
    font-size: 16px;
  }
  /* Flecha propia, en el rosa de la marca */
  .tl-acordeon > summary::after {
    content: "";
    position: absolute;
    right: 6px;
    top: 50%;
    width: 9px;
    height: 9px;
    margin-top: -6px;
    border-right: 2px solid var(--tl-rosa);
    border-bottom: 2px solid var(--tl-rosa);
    transform: rotate(45deg);
    transition: transform .2s ease;
  }
  .tl-acordeon[open] > summary::after {
    transform: rotate(-135deg);
    margin-top: -2px;
  }
  .tl-acordeon > summary:focus-visible {
    outline: 2px solid var(--tl-rosa-hover);
    outline-offset: 2px;
  }
}

/* ---------- CARRUSEL (fase 17) ----------
   Pista con scroll-snap: fluida por definición, sin ancho clavado.
   Sin JavaScript sigue siendo utilizable deslizando. */
.tl-carrusel {
  position: relative;
  overflow: hidden;
}
.tl-carrusel-pista {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.tl-carrusel-pista::-webkit-scrollbar { display: none; }
.tl-carrusel-pista > li {
  flex: 0 0 100%;
  scroll-snap-align: center;
  margin: 0;
}
.tl-carrusel-pista img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 920 / 250;
  object-fit: cover;
}

/* Flechas: discretas, aparecen al pasar por encima */
.tl-carrusel-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .72);
  cursor: pointer;
  opacity: 0;
  transition: opacity .2s ease, background .2s ease;
}
.tl-carrusel:hover .tl-carrusel-nav,
.tl-carrusel-nav:focus-visible { opacity: 1; }
.tl-carrusel-nav:hover { background: rgba(255, 255, 255, .92); }
.tl-carrusel-nav::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 9px;
  height: 9px;
  border-top: 2px solid var(--tl-azul);
  border-right: 2px solid var(--tl-azul);
}
.tl-carrusel-ant { left: 10px; }
.tl-carrusel-sig { right: 10px; }
.tl-carrusel-ant::before { transform: translate(-35%, -50%) rotate(-135deg); }
.tl-carrusel-sig::before { transform: translate(-65%, -50%) rotate(45deg); }
.tl-carrusel-nav:focus-visible { outline: 2px solid var(--tl-rosa-hover); outline-offset: 2px; }

/* En táctil no hay hover: las flechas estorban más que ayudan */
@media (hover: none) {
  .tl-carrusel-nav { display: none; }
}

/* ---------------------------------------------------------------
   Justificado: control de ríos y palabras separadas
   El body heredaba text-align:justify de default.css. En un título
   de pocas palabras eso reparte el espacio sobrante entre 3 o 4
   huecos y quedan separaciones enormes (visto en pt/index.html).
   Los títulos nunca se justifican; el texto corrido sí, pero con
   partición de palabras y sin justificar en pantallas estrechas,
   donde la línea es demasiado corta para repartir bien el espacio.
   --------------------------------------------------------------- */
body.tl h1,
body.tl h2,
body.tl h3,
body.tl h4,
body.tl h5,
body.tl h6,
body.tl summary,
body.tl .tl-nav-principal,
body.tl .tl-mapa,
body.tl .tl-aside,
body.tl figcaption,
body.tl caption,
body.tl th {
  text-align: left;
  text-wrap: balance;
}

body.tl .tl-main p,
body.tl .tl-main li,
body.tl .tl-main td {
  hyphens: auto;
  -webkit-hyphens: auto;
  overflow-wrap: break-word;
}

@media (max-width: 620px) {
  body.tl,
  body.tl .tl-main,
  body.tl .tl-main p,
  body.tl .tl-main li,
  body.tl .tl-main td,
  body.tl .tl-main div {
    text-align: left;
  }
}

/* ---------------------------------------------------------------
   Escala tipográfica única del contenido
   Las clases heredadas declaraban tamaños sueltos entre 11 y 24px
   (.txxt 18, .txxt_destacadorosa 18, .tit_txxtazul 17, .txt 16,
   .texto2 16, .tit_txxt 22, .tit_txxtrosa 24...) y muchas de las
   más usadas (Estilo8, Estilo81, txt1, mitad, plistado,
   noticia_simbolo, tag-link) no declaraban ninguno, así que
   heredaban el de la etiqueta que las envolvía. Al anidarse unas
   dentro de otras, un mismo párrafo mezclaba tres o cuatro
   tamaños: eso es lo que se veía en adquieretuesencia.html.

   Regla: dentro de .tl-main sólo los títulos de bloque cambian de
   tamaño. Las clases en línea conservan su COLOR y su peso (que
   son los que dan el significado) pero heredan el tamaño.
   --------------------------------------------------------------- */
body.tl .tl-main {
  font-family: var(--tl-serif);
  font-size: 15px;
  line-height: 1.6;
}

/* Nivel 1: título de sección */
body.tl .tl-main .tit_txxtrosa,
body.tl .tl-main .tit_txxtrosa2,
body.tl .tl-main .tit_txxtrosagr {
  font-size: 21px;
  line-height: 1.3;
}

/* Nivel 2: subtítulo */
body.tl .tl-main .tit_txxt,
body.tl .tl-main summary {
  font-size: 18px;
  line-height: 1.35;
}

/* Nivel 3: todo lo demás hereda el cuerpo de texto */
body.tl .tl-main .txxt,
body.tl .tl-main .txxt_rosa,
body.tl .tl-main .txxt_naranja,
body.tl .tl-main .txxt_destacadorosa,
body.tl .tl-main .tit_txxtazul,
body.tl .tl-main .tit_txxtazul1,
body.tl .tl-main .tit_txxtazul3,
body.tl .tl-main .tit_txtazul,
body.tl .tl-main .txt,
body.tl .tl-main .txt1,
body.tl .tl-main .txt2,
body.tl .tl-main .texto,
body.tl .tl-main .texto2,
body.tl .tl-main .textosin,
body.tl .tl-main .idioma,
body.tl .tl-main .mitad,
body.tl .tl-main .plistado,
body.tl .tl-main .noticia_simbolo,
body.tl .tl-main .tag-link,
body.tl .tl-main .Estilo1,
body.tl .tl-main .Estilo2,
body.tl .tl-main .Estilo3,
body.tl .tl-main .Estilo4,
body.tl .tl-main .Estilo5,
body.tl .tl-main .Estilo8,
body.tl .tl-main .Estilo81 {
  font-size: inherit;
  font-family: var(--tl-serif);
  line-height: inherit;
}

/* El párrafo es el que fija el cuerpo; los <span> de dentro heredan */
body.tl .tl-main p,
body.tl .tl-main li,
body.tl .tl-main dd,
body.tl .tl-main dt {
  font-size: 15px;
  line-height: 1.6;
}

/* Los botones mantienen su tamaño propio: son otro elemento */
body.tl .tl-main .button_rosa,
body.tl .tl-main .button_azul,
body.tl .tl-main .button_eva,
body.tl .tl-main .button_adan { font-size: 16px; }
body.tl .tl-main .button_rosa1 { font-size: 19px; }

/* ===============================================================
   FASE 18 — Estética y accesibilidad
   =============================================================== */

/* ---------------------------------------------------------------
   18.1 Enlaces dentro del contenido
   default.css declaraba a{font-size:18px}, así que un enlace dentro
   de un párrafo de 15px se veía más grande que el texto que lo
   rodea. Un enlace hereda del texto: sólo cambia de color.
   --------------------------------------------------------------- */
body.tl .tl-main a {
  font-size: inherit;
  font-family: inherit;
  text-indent: 0;
}
body.tl .tl-main p > a:not([class]),
body.tl .tl-main li > a:not([class]) {
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(26,128,148,.45);
}
body.tl .tl-main p > a:not([class]):hover,
body.tl .tl-main li > a:not([class]):hover {
  text-decoration-color: currentColor;
}

/* ---------------------------------------------------------------
   18.2 Foco visible
   Antes no había ninguno: quien navega con el teclado no sabía
   dónde estaba. :focus-visible sólo se dibuja en navegación por
   teclado, así que el ratón no ve ningún cambio.
   --------------------------------------------------------------- */
body.tl a:focus-visible,
body.tl button:focus-visible,
body.tl summary:focus-visible,
body.tl input:focus-visible,
body.tl select:focus-visible,
body.tl textarea:focus-visible {
  outline: 2px solid var(--tl-azul);
  outline-offset: 2px;
  border-radius: 3px;
}
body.tl .tl-saltar:focus-visible { outline-color: var(--tl-rosa); }

/* ---------------------------------------------------------------
   18.3 Botones
   Los botones tenían texto blanco sobre pastel: 1,15:1 a 1,51:1 de
   contraste, es decir, prácticamente ilegibles. Se conserva el
   fondo de marca y el texto pasa al azul de la navegación, que da
   entre 11,7:1 y 15,3:1. Además dejan de ser texto suelto: tienen
   área de pulsación, borde, y estados de hover y de foco.
   --------------------------------------------------------------- */
body.tl .button_rosa,
body.tl .button_rosa1,
body.tl .button_eva,
body.tl .button_adan,
body.tl .button_azul {
  display: inline-block;
  color: var(--tl-azul);
  font-family: var(--tl-serif);
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  padding: 9px 14px;
  margin: 0 6px 8px 0;
  border: 1px solid rgba(0,0,102,.16);
  border-radius: 6px;
  transition: background-color .15s ease, border-color .15s ease, transform .1s ease;
}
body.tl .button_rosa,
body.tl .button_rosa1 { background-color: #f2d6cf; }
body.tl .button_eva   { background-color: #fec1e0; }
body.tl .button_adan  { background-color: #ccf3f7; }
body.tl .button_azul  { background-color: #dcf8c6; }

body.tl .button_rosa:hover,
body.tl .button_rosa1:hover { background-color: #e8bfb5; }
body.tl .button_eva:hover   { background-color: #f9a7d1; }
body.tl .button_adan:hover  { background-color: #b3e9ef; }
body.tl .button_azul:hover  { background-color: #c9f0ac; }

body.tl .button_rosa:hover,
body.tl .button_rosa1:hover,
body.tl .button_eva:hover,
body.tl .button_adan:hover,
body.tl .button_azul:hover {
  border-color: rgba(0,0,102,.32);
  color: var(--tl-azul);
}
body.tl .button_rosa:active,
body.tl .button_eva:active,
body.tl .button_adan:active,
body.tl .button_azul:active { transform: translateY(1px); }

/* La nube de etiquetas de producto respira */
body.tl .tl-main .tag-link { margin: 0 6px 8px 0; }

/* ---------------------------------------------------------------
   18.4 Ritmo vertical
   Los márgenes venían de <br> sueltos y de párrafos vacíos con
   &nbsp;. Aquí se fija un ritmo: el espacio ANTES de un título es
   mayor que el que va después, para que el título se lea pegado a
   lo que titula.
   --------------------------------------------------------------- */
body.tl .tl-main > *:first-child { margin-top: 0; }
body.tl .tl-main p { margin: 0 0 1em; }
body.tl .tl-main h1 { margin: 0 0 .6em; }
body.tl .tl-main h2,
body.tl .tl-main h3 { margin: 1.6em 0 .5em; }
body.tl .tl-main .tit_txxtrosa,
body.tl .tl-main .tit_txxtrosa2,
body.tl .tl-main .tit_txxtrosagr,
body.tl .tl-main .tit_txxt { display: inline-block; margin-top: .4em; }
body.tl .tl-main ul,
body.tl .tl-main ol { margin: 0 0 1em; padding-left: 1.4em; }
body.tl .tl-main li { margin-bottom: .35em; }
/* Párrafos realmente vacíos que dejó el editor antiguo. Los que
   contienen &nbsp; se conservan: en muchas páginas son separación
   intencionada y quitarlos cambiaría la composición. */
body.tl .tl-main p:empty { display: none; }

/* ---------------------------------------------------------------
   18.5 Filete de marca
   Un separador discreto en vez de líneas <hr> del navegador.
   --------------------------------------------------------------- */
body.tl .tl-main hr {
  border: 0;
  height: 1px;
  margin: 2em 0;
  background: linear-gradient(to right,
              transparent, var(--tl-separador) 15%,
              var(--tl-separador) 85%, transparent);
}
body.tl .tl-footer-filete {
  height: 2px;
  background: linear-gradient(to right, transparent, var(--tl-rosa), transparent);
  opacity: .55;
}

/* ---------------------------------------------------------------
   18.6 Ficha de producto
   La foto flota a la izquierda desde la fase 15; aquí se le da
   marco y se evita que el texto quede pegado a ella.
   --------------------------------------------------------------- */
body.tl .tl-ficha-foto {
  margin: 2px 22px 16px 0;
  padding: 6px;
  background: #fff;
  border: 1px solid var(--tl-separador);
  border-radius: 6px;
  box-sizing: border-box;
}
body.tl .tl-ficha-foto img { display: block; width: 100%; height: auto; border-radius: 3px; }
body.tl .tl-ficha-foto figcaption {
  margin-top: 6px;
  font-size: 12px;
  color: var(--tl-gris);
  text-align: center;
}

/* ---------------------------------------------------------------
   18.7 Acordeón de las páginas de directorio
   --------------------------------------------------------------- */
body.tl .tl-acordeon {
  border: 1px solid var(--tl-separador);
  border-radius: 6px;
  margin: 0 0 12px;
  background: #fff;
}
body.tl .tl-acordeon > summary {
  cursor: pointer;
  padding: 10px 14px;
  color: var(--tl-rosa);
  font-weight: 700;
  list-style: none;
}
body.tl .tl-acordeon > summary::-webkit-details-marker { display: none; }
body.tl .tl-acordeon > summary::after {
  content: "+";
  float: right;
  font-weight: 400;
  color: var(--tl-gris);
}
body.tl .tl-acordeon[open] > summary::after { content: "–"; }
body.tl .tl-acordeon > summary:hover { color: var(--tl-rosa-hover); }
body.tl .tl-acordeon-cuerpo { padding: 0 14px 4px; }

/* ---------------------------------------------------------------
   18.8 Formularios
   Eran tablas con inputs de size="40": en móvil sólo se podían
   usar desplazando la página en horizontal. Ahora la tabla es
   fluida, los campos ocupan el ancho disponible y por debajo de
   620px cada fila se apila con la etiqueta encima del campo.
   La altura mínima de 44px es la que recomienda Apple y Google
   para que un dedo acierte.
   --------------------------------------------------------------- */
body.tl .tl-main form table { width: 100%; table-layout: fixed; }
body.tl .tl-main form td { padding: 6px 8px; vertical-align: top; }

body.tl .tl-main input[type="text"],
body.tl .tl-main input[type="email"],
body.tl .tl-main input[type="tel"],
body.tl .tl-main input[type="number"],
body.tl .tl-main input[type="date"],
body.tl .tl-main select,
body.tl .tl-main textarea {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  min-height: 44px;
  padding: 9px 11px;
  font-family: var(--tl-serif);
  font-size: 16px;            /* por debajo de 16px iOS hace zoom al enfocar */
  color: var(--tl-lila);
  background: #fff;
  border: 1px solid #b9b9c6;
  border-radius: 5px;
}
body.tl .tl-main textarea { min-height: 130px; line-height: 1.5; resize: vertical; }
body.tl .tl-main input:hover,
body.tl .tl-main textarea:hover,
body.tl .tl-main select:hover { border-color: var(--tl-rosa); }

body.tl .tl-main input[type="checkbox"],
body.tl .tl-main input[type="radio"] {
  width: 18px; height: 18px; min-height: 0;
  margin-right: 8px; vertical-align: middle; accent-color: var(--tl-rosa);
}
body.tl .tl-main label { cursor: pointer; }

body.tl .tl-main input[type="submit"],
body.tl .tl-main input[type="button"],
body.tl .tl-main button {
  display: inline-block;
  min-height: 44px;
  padding: 10px 26px;
  font-family: var(--tl-serif);
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  background: var(--tl-azul);
  border: 1px solid var(--tl-azul);
  border-radius: 6px;
  cursor: pointer;
  transition: background-color .15s ease;
}
body.tl .tl-main input[type="submit"]:hover:not(:disabled),
body.tl .tl-main button:hover:not(:disabled) { background: var(--tl-rosa); border-color: var(--tl-rosa); }
body.tl .tl-main input[type="submit"]:disabled,
body.tl .tl-main button:disabled {
  background: #d3d3dc; border-color: #d3d3dc; color: #55555f; cursor: not-allowed;
}

@media (max-width: 620px) {
  body.tl .tl-main form table,
  body.tl .tl-main form tbody,
  body.tl .tl-main form tr,
  body.tl .tl-main form td { display: block; width: 100%; }
  body.tl .tl-main form td { padding: 4px 0; }
  body.tl .tl-main form td:empty { display: none; }
}