/* Renovación de secciones: títulos (antes cintas), cabecera de producto, franja de contacto,
   pie de página y legibilidad de textos. El marcado lo genera generar-estatica.py. */

:root {
  --sm-teal: #229896;
  --sm-teal-dark: #0b3536;
  --sm-text: #3d4848;
  --sm-orange: #ff9403;
}

/* ---------- 5. Legibilidad de los textos ---------- */
html body #Content p:not([style*="color"]),
html body #Content .column_attr li:not([style*="color"]) {
  color: var(--sm-text) !important;
  font-size: 17px;
  line-height: 1.65 !important;
}
html body #Content .producto p:not([style*="color"]) { font-size: 16px; line-height: 1.55 !important; }

/* Las filas de tarjetas (columnas de 1/3) iban flotando: con textos de distinta altura se
   descolocaban. En flex quedan alineadas por filas y con la misma altura. */
html body #Content .section_wrapper:has(> .wrap.one-third) {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}
html body #Content .section_wrapper:has(> .wrap.one-third)::before,
html body #Content .section_wrapper:has(> .wrap.one-third)::after { display: none; }
html body #Content .section_wrapper:has(> .wrap.one-third) > .wrap { float: none; }
/* Tarjetas de una sola caja: la caja (que lleva el fondo) ocupa todo el alto de la fila */
html body #Content .section_wrapper > .wrap.one-third:has(> .mcb-wrap-inner > .column:only-child > .column_attr) { display: flex; }
html body #Content .section_wrapper > .wrap.one-third > .mcb-wrap-inner:has(> .column:only-child > .column_attr) {
  flex: 1; display: flex; flex-direction: column;
}
html body #Content .section_wrapper > .wrap.one-third > .mcb-wrap-inner > .column:only-child:has(> .column_attr) {
  flex: 1; display: flex; flex-direction: column;
}
html body #Content .section_wrapper > .wrap.one-third > .mcb-wrap-inner > .column:only-child > .column_attr { flex: 1; }

/* ---------- 1. Títulos de sección (antes cintas con esquina doblada) ---------- */
html body #Content .column_attr.hm-section-title {
  background: none !important;
  padding: 10px 0 4px !important;
}
html body #Content .column_attr.hm-section-title::before {
  content: "" !important;
  display: block !important;
  visibility: visible !important;
  overflow: visible !important;
  width: 56px !important; height: 4px !important;
  margin: 0 auto 18px;
  border-radius: 4px;
  background: var(--hm-accent, var(--sm-teal));
}
html body #Content .hm-section-title h1,
html body #Content .hm-section-title h2,
html body #Content .hm-section-title h3 {
  margin: 0 !important;
  font-size: 34px !important;
  line-height: 1.2 !important;
  letter-spacing: -.01em;
}
html body #Content .hm-section-title h1 span,
html body #Content .hm-section-title h2 span,
html body #Content .hm-section-title h3 span { color: #1f2d2d !important; }
@media (max-width: 767px) {
  html body #Content .hm-section-title h1,
  html body #Content .hm-section-title h2,
  html body #Content .hm-section-title h3 { font-size: 27px !important; }
}

/* ---------- 2. Cabecera de producto: texto real sobre la foto ---------- */
html body #Content .hm-prod-hero {
  position: relative;
  min-height: 420px;
  display: flex;
  align-items: center;
  background-image:
    linear-gradient(90deg,
      color-mix(in srgb, var(--accent) 88%, #000) 0%,
      color-mix(in srgb, var(--accent) 78%, transparent) 38%,
      transparent 72%),
    var(--hero-img);
  background-size: cover;
  background-position: var(--hero-pos, center);
}
/* Variante sin foto (Contacto): fondo de marca como la portada + red animada (hero-red.js) */
html body #Content .hm-prod-hero.hm-hero-brand {
  overflow: hidden;
  background:
    radial-gradient(900px 520px at 85% 15%, rgba(255, 148, 3, .22), transparent 60%),
    radial-gradient(700px 500px at 10% 100%, rgba(34, 152, 150, .55), transparent 65%),
    linear-gradient(135deg, #0b3536 0%, #13605f 55%, #1d8583 100%);
}
html body #Content .hm-hero-brand .hm-hero-bg { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
html body #Content .hm-hero-brand .hm-hero-bg canvas { display: block; width: 100%; height: 100%; }
html body #Content .hm-hero-brand .hm-prod-hero__inner { position: relative; z-index: 2; }

html body #Content .hm-prod-hero__inner {
  width: 100%;
  max-width: 1220px;
  margin: 0 auto;
  padding: 60px 40px;
  box-sizing: border-box;
  color: #fff;
}
html body #Content .hm-prod-hero__title {
  margin: 0 0 14px !important;
  color: #fff !important;
  font-size: 58px !important;
  line-height: 1.05 !important;
  font-weight: 700;
  letter-spacing: -.02em;
}
html body #Content .hm-prod-hero__title .hm-eyebrow {
  display: block;
  margin-bottom: 10px;
  font-family: "Lato", sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .85;
}
/* Logo en lugar del texto pequeño (Sobre nosotros: TYM) */
html body #Content .hm-prod-hero__title .hm-eyebrow-logo {
  display: block;
  height: 46px;
  width: auto;
  margin: 0 0 18px;
}
@media (max-width: 767px) {
  html body #Content .hm-prod-hero__title .hm-eyebrow-logo { height: 34px; margin-bottom: 14px; }
}
html body #Content .hm-prod-hero p.hm-prod-hero__q {
  max-width: 460px;
  margin: 0 !important;
  color: #fff !important;
  font-size: 22px !important;
  line-height: 1.4 !important;
  opacity: .95;
}
@media (max-width: 767px) {
  html body #Content .hm-prod-hero {
    min-height: 300px;
    background-image:
      linear-gradient(0deg, color-mix(in srgb, var(--accent) 92%, #000), color-mix(in srgb, var(--accent) 70%, transparent)),
      var(--hero-img);
  }
  html body #Content .hm-prod-hero__inner { padding: 48px 20px; }
  html body #Content .hm-prod-hero__title { font-size: 42px !important; }
  html body #Content .hm-prod-hero p.hm-prod-hero__q { font-size: 19px !important; }
}

/* ---------- 3. Franja de contacto al final de cada página ---------- */
html body #Content .section.hm-cta-band {
  background:
    radial-gradient(700px 360px at 85% 0%, rgba(255, 148, 3, .20), transparent 60%),
    linear-gradient(135deg, #0b3536 0%, #13605f 60%, #1d8583 100%) !important;
  padding: 70px 0 80px !important;
}
html body #Content .hm-cta-band .column_placeholder { display: none; }
html body #Content .hm-cta-band h1,
html body #Content .hm-cta-band h2,
html body #Content .hm-cta-band h3,
html body #Content .hm-cta-band h4,
html body #Content .hm-cta-band h4 span,
html body #Content .hm-cta-band h3 span,
html body #Content .hm-cta-band h3 b {
  color: #fff !important;
  font-size: 34px !important;
  line-height: 1.25 !important;
  margin: 0 0 26px !important;
}
html body #Content .hm-cta-band .column { float: none !important; width: 100% !important; margin: 0 !important; text-align: center; }
html body #Content .hm-cta-band .button_align { text-align: center; }

/* ---------- 4. Pie de página ---------- */
html body #Footer.hm-footer {
  background: #0d2a2b !important;
  color: rgba(255, 255, 255, .72);
  font-family: "Lato", sans-serif;
  font-size: 15px;
  line-height: 1.6;
  padding: 0;
}
.hm-footer__inner {
  max-width: 1220px;
  margin: 0 auto;
  padding: 40px 40px 0;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 1.3fr .9fr 1.6fr 1fr;   /* marca, empresa, productos, contacto */
  gap: 36px;
}
.hm-footer__brand img { height: 40px; width: auto; }
.hm-footer__brand p { margin: 12px 0 0; max-width: 280px; color: rgba(255, 255, 255, .72); font-size: 14px; line-height: 1.5; }
.hm-footer h3 {
  margin: 2px 0 10px !important;
  color: #fff !important;
  font-family: "Lato", sans-serif;
  font-size: 13px !important;
  line-height: 1.4 !important;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.hm-footer ul { list-style: none; margin: 0; padding: 0; }
.hm-footer li { margin: 0 0 5px; font-size: 14px; }
/* Productos en dos columnas: es la lista que más alargaba el pie */
.hm-footer__cols { display: flex; gap: 56px; }
html body #Footer.hm-footer a { color: rgba(255, 255, 255, .78); text-decoration: none; transition: color .2s ease; }
html body #Footer.hm-footer a:hover { color: #fff; }
html body #Footer.hm-footer a.hm-footer__cta {
  display: inline-flex; align-items: center; height: 38px; margin-top: 8px; padding: 0 20px; font-size: 14px;
  border-radius: 999px; background: var(--sm-orange); color: #fff; font-weight: 700;
}
html body #Footer.hm-footer a.hm-footer__cta:hover { filter: brightness(.93); }
.hm-footer__bottom {
  max-width: 1220px;
  margin: 28px auto 0;
  padding: 16px 40px 18px;
  box-sizing: border-box;
  border-top: 1px solid rgba(255, 255, 255, .12);
  display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between;
  font-size: 13px;
}
.hm-footer__legal { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.hm-footer__legal button {
  background: none; border: 0; padding: 0; margin: 0; cursor: pointer;
  color: rgba(255, 255, 255, .78); font: inherit;
}
.hm-footer__legal button:hover { color: #fff; }
@media (max-width: 959px) {
  .hm-footer__inner { grid-template-columns: 1fr 1fr; }
  .hm-footer__brand { grid-column: 1 / -1; }
  /* Empresa y Contacto lado a lado; Productos debajo, a todo el ancho */
  .hm-footer__inner > .hm-footer__products { grid-column: 1 / -1; order: 1; }
}
@media (max-width: 559px) {
  .hm-footer__inner { grid-template-columns: 1fr 1fr; padding: 32px 20px 0; gap: 24px 20px; }
  .hm-footer__inner > .hm-footer__products { grid-column: 1 / -1; }
  .hm-footer__bottom { padding: 14px 20px 18px; }
}

/* ---------- Picos entre secciones ----------
   La sección marcada sube 70px sobre la anterior y se recorta dejando solo un triángulo
   de 144x70 en el centro (la misma forma que las imágenes originales). Como el pico es
   la propia sección, siempre tiene su mismo fondo (color, degradado o textura). */
html body #Content .section.hm-notch {
  position: relative;
  z-index: 1;
  margin-top: -70px !important;
  padding-top: 70px !important;
  clip-path: polygon(0 70px, calc(50% - 72px) 70px, 50% 0, calc(50% + 72px) 70px, 100% 70px, 100% 100%, 0 100%);
}
html body #Content .section.hm-cta-band.hm-notch { padding-top: 140px !important; }
/* Hueco que deja sitio al pico (en móvil el tema lo encogía y el pico pisaba el contenido) */
html body #Content .wrap.hm-notch-spacer { display: block !important; width: 100% !important; min-height: 70px; }
html body #Content .wrap.hm-notch-spacer .column { margin-bottom: 0 !important; }

/* ---------- Cabecera con foto a la derecha, sin ampliarla ----------
   Para fotos que no aguantan estirarse a todo el ancho: la foto se dibuja a la altura de la
   cabecera (proporción 16:9, ancho = alto x 1.777) pegada a la derecha; el resto es color liso
   y un degradado funde el borde izquierdo de la foto. */
html body #Content .hm-prod-hero.hm-hero-split {
  --hero-h: 420px;
  height: var(--hero-h);
  min-height: 0;
  background-color: color-mix(in srgb, var(--accent) 88%, #000);
  background-image:
    linear-gradient(90deg, color-mix(in srgb, var(--accent) 88%, #000) 0%, transparent 45%),
    var(--hero-img);
  background-size: calc(var(--hero-h) * 1.777) 100%, auto 100%;
  background-position: right center, right center;   /* la foto ocupa todo el alto: solo importa el lado */
  background-repeat: no-repeat;
}
@media (max-width: 767px) {
  html body #Content .hm-prod-hero.hm-hero-split {
    --hero-h: 300px;
    background-image:
      linear-gradient(0deg, color-mix(in srgb, var(--accent) 90%, #000), color-mix(in srgb, var(--accent) 55%, transparent)),
      var(--hero-img);
    background-size: 100% 100%, var(--hero-size-mob, cover);
    background-position: center, var(--hero-pos-mob, center);
  }
}

/* Red animada tenue en la franja de contacto */
html body #Content .section.hm-cta-band { position: relative; overflow: hidden; }
html body #Content .hm-cta-band > .hm-hero-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
html body #Content .hm-cta-band > .hm-hero-bg canvas { display: block; width: 100%; height: 100%; }
html body #Content .hm-cta-band > .section_wrapper { position: relative; z-index: 1; }
/* Escritorio: columnas del ancho de su contenido y el mismo hueco entre todas
   (marca | empresa | productos | contacto) */
@media (min-width: 960px) {
  .hm-footer__inner { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; }
  .hm-footer__brand { flex: 0 0 auto; max-width: 300px; }
}
/* Correo bajo la frase de la marca (ya no hay columna de Contacto) */
html body #Footer.hm-footer a.hm-footer__mail {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 14px;
  color: #fff; font-weight: 700; font-size: 15px;
}
html body #Footer.hm-footer a.hm-footer__mail::before {
  content: ""; width: 16px; height: 12px; flex: none;
  background: currentColor; opacity: .8;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12'%3E%3Cpath d='M0 0h16v12H0z' fill='none' stroke='%23000' stroke-width='2'/%3E%3Cpath d='M1 1l7 6 7-6' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12'%3E%3Cpath d='M0 0h16v12H0z' fill='none' stroke='%23000' stroke-width='2'/%3E%3Cpath d='M1 1l7 6 7-6' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E") center / contain no-repeat;
}
html body #Footer.hm-footer a.hm-footer__mail:hover { color: var(--sm-orange); }
/* Tres bloques: marca a la izquierda, Empresa y Productos a la derecha con su hueco */
@media (min-width: 960px) {
  .hm-footer__inner { justify-content: flex-start; gap: 0; }
  .hm-footer__brand { margin-right: auto; }
  .hm-footer__inner > nav { margin-left: 110px; }
}
@media (max-width: 959px) {
  .hm-footer__inner > .hm-footer__products { grid-column: auto; order: 0; }
}
@media (max-width: 559px) {
  .hm-footer__inner > .hm-footer__products { grid-column: 1 / -1; }
}

/* ---------- Páginas legales (política de cookies) ---------- */
html body #Content .hm-legal { max-width: 820px; margin: 0 auto; padding: 64px 24px 80px; color: var(--sm-text); }
html body #Content .hm-legal h1 { font-size: 40px !important; line-height: 1.15 !important; color: #1f2d2d !important; margin: 0 0 8px !important; }
html body #Content .hm-legal h2 { font-size: 24px !important; line-height: 1.3 !important; color: #1f2d2d !important; margin: 40px 0 12px !important; }
html body #Content .hm-legal .hm-legal__date { color: #6b7777 !important; font-size: 15px !important; margin-bottom: 32px; }
html body #Content .hm-legal ul { margin: 0 0 16px 22px; }
html body #Content .hm-legal li { margin-bottom: 6px; }
html body #Content .hm-legal a { color: var(--sm-teal); text-decoration: underline; text-underline-offset: 3px; }
html body #Content .hm-legal code { background: #eef4f4; padding: 2px 6px; border-radius: 4px; font-size: .9em; }
html body #Content .hm-legal__table { overflow-x: auto; margin: 8px 0 20px; border: 1px solid #dfe8e8; border-radius: 10px; }
html body #Content .hm-legal table { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 560px; }
html body #Content .hm-legal th { background: #eef4f4; text-align: left; padding: 10px 14px; color: #1f2d2d; }
html body #Content .hm-legal td { padding: 10px 14px; border-top: 1px solid #dfe8e8; vertical-align: top; }
html body #Content .hm-legal button.hm-legal__link {
  background: none; border: 0; padding: 0; margin: 0; font: inherit; cursor: pointer;
  color: var(--sm-teal); text-decoration: underline; text-underline-offset: 3px;
}
@media (max-width: 767px) { html body #Content .hm-legal { padding: 40px 20px 56px; } html body #Content .hm-legal h1 { font-size: 32px !important; } }
html body #Content .hm-legal th, html body #Content .hm-legal td { text-align: left !important; }
/* Móvil: la tabla pasa a ficha (etiqueta + valor) */
@media (max-width: 600px) {
  html body #Content .hm-legal table { min-width: 0; }
  html body #Content .hm-legal thead { display: none; }
  html body #Content .hm-legal tr, html body #Content .hm-legal td { display: block; }
  html body #Content .hm-legal td { border-top: 0; padding: 8px 14px; }
  html body #Content .hm-legal td::before {
    content: attr(data-label); display: block; font-size: 12px; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase; color: #6b7777; margin-bottom: 2px;
  }
  html body #Content .hm-legal td + td { border-top: 1px solid #dfe8e8; }
}
/* Las secciones con pico van siempre debajo de todo lo anterior: en Sobre nosotros un elemento
   flotante de la sección previa "estrechaba" la franja de contacto hasta dejarla en un lado */
html body #Content .section.hm-notch { clear: both; width: 100%; }