/* ==========================================================================
   La Salle Responde — hoja de estilos única del sitio público.
   Sin dependencias: CSS estándar, sin JavaScript.

   Para cambiar el aspecto general basta con tocar las variables de la
   sección 2 (colores, radios, sombras). Después, en el administrador:
   Ajustes → «Volver a publicar todo».

   Índice
   1. Fuentes            5. Encabezados y texto     9. Contactos
   2. Variables          6. Rejilla                10. Recorridos virtuales
   3. Base               7. Tarjetas               11. Tablas
   4. Cabecera y portada 8. Acordeón               12. Pie y botón de WhatsApp
   ========================================================================== */

/* 1. Fuentes ------------------------------------------------------------- */

@font-face {
  font-family: "Indivisa Sans";
  src: url("../fonts/indivisa/indivisatextsans-light-webfont.woff2") format("woff2"),
       url("../fonts/indivisa/indivisatextsans-light-webfont.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Indivisa Sans";
  src: url("../fonts/indivisa/indivisatextsans-lightitalic-webfont.woff2") format("woff2"),
       url("../fonts/indivisa/indivisatextsans-lightitalic-webfont.woff") format("woff");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Indivisa Sans";
  src: url("../fonts/indivisa/indivisatextsans-regular-webfont.woff2") format("woff2"),
       url("../fonts/indivisa/indivisatextsans-regular-webfont.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Indivisa Sans";
  src: url("../fonts/indivisa/indivisatextsans-regularitalic-webfont.woff2") format("woff2"),
       url("../fonts/indivisa/indivisatextsans-regularitalic-webfont.woff") format("woff");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Iconos de marca";
  src: url("../fonts/iconos/fa-brands-400.woff2") format("woff2"),
       url("../fonts/iconos/fa-brands-400.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

/* 2. Variables ----------------------------------------------------------- */

:root {
  /* Colores institucionales */
  --rojo: #ce0e2d;
  --rojo-oscuro: #b01b30;
  --marino: #273056;
  --azul: #4395d5;
  --noche: #091941;

  /* Neutros con un matiz azul, para que todo se sienta de la misma familia */
  --tinta: #151a2d;
  --tinta-suave: #4a5168;
  --papel: #ffffff;
  --niebla: #f2f4f9;
  --linea: #dde2ec;

  --acento: var(--marino);          /* color que identifica cada tarjeta */

  /* Formas y profundidad */
  --radio: 1rem;
  --radio-chico: 0.6rem;
  --sombra-suave: 0 1px 2px rgb(9 25 65 / 0.05), 0 12px 28px -18px rgb(9 25 65 / 0.28);
  --sombra-alta: 0 2px 4px rgb(9 25 65 / 0.06), 0 22px 40px -20px rgb(9 25 65 / 0.38);
  --solape: clamp(1.25rem, 3vw, 2rem);   /* cuánto sube el contenido sobre la portada */

  --sans: "Indivisa Sans", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;

  --ancho: 75rem;
  --margen: clamp(1rem, 4vw, 2rem);
}

.tema-preparatoria { --acento: var(--azul); }

/* 3. Base ---------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--niebla);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; height: auto; }

a {
  color: var(--rojo-oscuro);
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
  text-decoration-color: rgb(176 27 48 / 0.4);
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}
a:hover { color: var(--noche); text-decoration-color: currentColor; }

:focus-visible { outline: 3px solid var(--azul); outline-offset: 3px; border-radius: 4px; }

::selection { background: var(--noche); color: #fff; }

h1, h2, h3, h4, h5, h6, p, ul, ol { margin: 0; }
p + p, p + ul, p + ol, ul + p, ol + p { margin-top: 0.75em; }

strong { font-weight: 700; }
small, .nota { font-size: 0.875em; line-height: 1.5; color: var(--tinta-suave); }
.rojo { color: var(--rojo); }

.contenedor {
  width: 100%;
  max-width: calc(var(--ancho) + 2 * var(--margen));
  margin-inline: auto;
  padding-inline: var(--margen);
}

.saltar {
  position: absolute;
  left: 0.5rem;
  top: -4rem;
  z-index: 20;
  padding: 0.6rem 1rem;
  border-radius: var(--radio-chico);
  background: var(--noche);
  color: #fff;
}
.saltar:focus { top: 0.5rem; color: #fff; }

/* 4. Cabecera y portada -------------------------------------------------- */

.cabecera {
  position: relative;
  z-index: 2;
  padding: 1.3rem 0;
  background: var(--papel);
  border-top: 4px solid var(--marino);
  box-shadow: 0 1px 0 var(--linea);
}
.cabecera__logo { display: inline-block; line-height: 0; vertical-align: top; }
.cabecera__logo img { width: 140px; height: 46px; }

.portada {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: end;
  min-height: clamp(15rem, 36vw, 27rem);
  background: var(--noche);
  color: #fff;
  overflow: hidden;
}
.portada__fondo {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left top;
}
/* Velo que da contraste al titular sin tapar la imagen. */
.portada::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgb(9 25 65 / 0.9) 0%, rgb(9 25 65 / 0.6) 28%, rgb(9 25 65 / 0) 58%);
  pointer-events: none;
}
.portada__texto {
  width: 100%;
  max-width: calc(var(--ancho) + 2 * var(--margen));
  margin-inline: auto;
  padding: clamp(2rem, 5vw, 3.5rem) var(--margen) calc(var(--solape) + clamp(1.5rem, 3.2vw, 2.75rem));
  animation: portada-entra 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.portada__etiqueta {
  display: inline-block;
  margin: 0;
  padding: 0.5em 1.1em;
  border-radius: 10em;
  background: var(--rojo);
  box-shadow: 0 6px 18px -6px rgb(206 14 45 / 0.7);
  font-size: clamp(1rem, 1.1vw, 1rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.01em;
}
.portada__titular {
  max-width: 20em;
  margin: clamp(0.8rem, 1.6vw, 1.25rem) 0 0;
  font-size: clamp(2rem, 5.2vw, 4.25rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.015em;
  text-wrap: balance;
  text-shadow: 0 2px 24px rgb(9 25 65 / 0.55);
}

/* En pantallas anchas el texto va a la derecha: deja libre el motivo gráfico
   que las imágenes de portada llevan a la izquierda. */
@media (min-width: 44rem) {
  .portada__texto { text-align: right; }
  .portada__titular { margin-left: auto; }
}

@keyframes portada-entra {
  from { opacity: 0; transform: translateY(0.9rem); }
  to { opacity: 1; transform: none; }
}

/* El contenido sube sobre la portada como una hoja con esquinas redondeadas. */
main {
  position: relative;
  flex: 1;
  margin-top: calc(-1 * var(--solape));
  border-radius: calc(var(--solape) * 1.1) calc(var(--solape) * 1.1) 0 0;
  background: var(--niebla);
}

/* Portada del sitio: solo imagen, sin hoja de contenido. */
.es-inicio .portada { flex: 1; min-height: 60vh; }
.es-inicio main { flex: none; margin-top: 0; border-radius: 0; }

/* 5. Encabezados y texto ------------------------------------------------- */

.seccion { padding-block: clamp(2rem, 4.5vw, 3.5rem) clamp(1.5rem, 4vw, 3rem); }
.seccion + .seccion { padding-top: 0; }

.encabezado { max-width: 54rem; margin: 0 auto clamp(1.75rem, 3.2vw, 2.75rem); text-align: center; }
.encabezado p {
  margin-top: 1.1rem;
  font-size: 1.0625rem;
  color: var(--tinta-suave);
  text-wrap: pretty;
}
.encabezado__titulo {
  font-size: clamp(1.75rem, 3.6vw, 2.75rem);
  font-weight: 300;
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--noche);
  text-align: center;
  text-wrap: balance;
}
/* Filete bicolor bajo cada título de sección: los dos colores del escudo. */
.encabezado__titulo::after {
  content: "";
  display: block;
  width: 3.5rem;
  height: 4px;
  margin: 0.9rem auto 0;
  border-radius: 4px;
  background: linear-gradient(to right, var(--rojo) 0 62%, var(--azul) 62% 100%);
}
.fila > * > .encabezado__titulo { margin-bottom: clamp(1.75rem, 3.2vw, 2.75rem); }

.titulo {
  margin-bottom: 1rem;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid var(--linea);
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(1.15rem, 1.6vw, 1.35rem);
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: var(--noche);
  text-wrap: balance;
}
.titulo.rojo { color: var(--rojo); }

h3 { font-size: 1.35rem; font-weight: 400; line-height: 1.3; }
h4 { font-size: 1.125rem; font-weight: 400; line-height: 1.35; }
h5 {
  margin: 1.25rem 0 0.4rem;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--acento);
}
h5 > br { display: none; }
h5:empty { display: none; }

ul, ol { padding-left: 1.2rem; }
li { margin-block: 0.3em; padding-left: 0.15em; }
li > ul, li > ol { margin-block: 0.3em 0.7em; }
li::marker { color: var(--acento); font-weight: 700; }
ul ul > li::marker { color: color-mix(in srgb, var(--acento) 55%, #fff); }

/* 6. Rejilla ------------------------------------------------------------- */

.fila {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(1.1rem, 2.2vw, 1.75rem);
}
.fila > * { grid-column: span 12; min-width: 0; }

@media (min-width: 44rem) {
  .fila > .col-3, .fila > .col-4, .fila > .col-6 { grid-column: span 6; }
}
@media (min-width: 64rem) {
  .fila > .col-3 { grid-column: span 3; }
  .fila > .col-4 { grid-column: span 4; }
  .fila > .col-8 { grid-column: span 8; }
}

/* 7. Tarjetas ------------------------------------------------------------ */

.tarjeta { height: 100%; }

.tarjeta__caja {
  height: 100%;
  padding: clamp(1.35rem, 2.2vw, 1.85rem) clamp(1.15rem, 2.2vw, 1.75rem) clamp(1.25rem, 2.2vw, 1.75rem);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  /* La franja superior lleva el color de la tarjeta. */
  background: linear-gradient(var(--acento), var(--acento)) top / 100% 5px no-repeat var(--papel);
  box-shadow: var(--sombra-suave);
}
.es-azul { --acento: var(--azul); }
.es-marino { --acento: var(--marino); }
.es-rojo { --acento: var(--rojo-oscuro); }

.tarjeta__caja .fila { gap: 0.5rem clamp(1.5rem, 2.5vw, 2rem); }
.tarjeta__caja > :last-child, .tarjeta__interior > :last-child { margin-bottom: 0; }

/* 8. Acordeón (elementos <details> nativos) ------------------------------ */

.acordeon { display: grid; gap: 0.85rem; max-width: 58rem; margin-inline: auto; }

.acordeon__item {
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  box-shadow: var(--sombra-suave);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.acordeon__item:hover { border-color: color-mix(in srgb, var(--acento) 45%, var(--linea)); }
.acordeon__item[open] { border-color: var(--acento); box-shadow: var(--sombra-alta); }

.acordeon__pregunta {
  position: relative;
  display: block;
  padding: 1.1rem 4rem 1.1rem 1.4rem;
  border-radius: var(--radio);
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  line-height: 1.35;
  color: var(--noche);
  cursor: pointer;
  list-style: none;
}
.acordeon__pregunta::-webkit-details-marker { display: none; }

/* Botón redondo con «+» que gira y se vuelve «−» al abrir. */
.acordeon__pregunta::before,
.acordeon__pregunta::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 1.15rem;
  transition: transform 0.25s ease, background-color 0.2s ease, opacity 0.2s ease;
}
.acordeon__pregunta::before {
  width: 2.1rem;
  height: 2.1rem;
  margin-top: -1.05rem;
  border-radius: 50%;
  background:
    linear-gradient(var(--noche), var(--noche)) center / 0.8rem 2px no-repeat,
    var(--niebla);
}
.acordeon__pregunta::after {
  right: calc(1.15rem + 1.05rem - 1px);
  width: 2px;
  height: 0.8rem;
  margin-top: -0.4rem;
  background: var(--noche);
}
.acordeon__pregunta:hover::before { background-color: var(--linea); }
.acordeon__item[open] > .acordeon__pregunta { font-weight: 700; }
.acordeon__item[open] > .acordeon__pregunta::before {
  background:
    linear-gradient(#fff, #fff) center / 0.8rem 2px no-repeat,
    var(--rojo);
  transform: rotate(180deg);
}
.acordeon__item[open] > .acordeon__pregunta::after { opacity: 0; transform: rotate(90deg); }

.acordeon__respuesta { padding: 0 1.4rem 1.3rem; color: var(--tinta); }
.acordeon__item[open] > .acordeon__respuesta { animation: respuesta-entra 0.3s ease both; }

@keyframes respuesta-entra {
  from { opacity: 0; transform: translateY(-0.35rem); }
  to { opacity: 1; transform: none; }
}

/* Dentro de una tarjeta el acordeón es más discreto. */
.tarjeta__caja .acordeon { gap: 0.55rem; max-width: none; margin-top: 0.5rem; }
.tarjeta__caja .acordeon__item {
  border-color: transparent;
  border-radius: var(--radio-chico);
  box-shadow: none;
  background: var(--niebla);
}
.tarjeta__caja .acordeon__item[open] { border-color: var(--linea); background: var(--papel); box-shadow: none; }
.tarjeta__caja .acordeon__pregunta { padding: 0.75rem 3.25rem 0.75rem 1rem; font-size: 1.02rem; }
.tarjeta__caja .acordeon__pregunta::before { right: 0.75rem; width: 1.7rem; height: 1.7rem; margin-top: -0.85rem; background-color: var(--papel); }
.tarjeta__caja .acordeon__pregunta::after { right: calc(0.75rem + 0.85rem - 1px); }
.tarjeta__caja .acordeon__respuesta { padding: 0 1rem 1rem; }

/* 9. Contactos ----------------------------------------------------------- */

.contactos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
  padding: 0;
  list-style: none;
}
.contacto {
  display: flex;
  gap: 1rem;
  margin: 0;
  padding: 1.35rem 1.4rem 1.4rem;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: var(--papel);
  box-shadow: var(--sombra-suave);
}
.contacto__icono {
  flex: none;
  width: 2.9rem;
  height: 2.9rem;
  border-radius: 50%;
  background: url("../images/iconos/correo.svg") center / 1.4rem no-repeat rgb(206 14 45 / 0.08);
}
.contacto__icono.es-chat { background-image: url("../images/iconos/chat.svg"); }
.contacto__datos { min-width: 0; }
.contacto__area { font-size: 0.875rem; line-height: 1.4; color: var(--tinta-suave); }
.contacto__nombre {
  margin: 0.3rem 0 0.6rem;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--noche);
}
.contacto__meta { font-size: 0.95rem; line-height: 1.7; }

/* 10. Recorridos virtuales ----------------------------------------------- */

.recorridos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 22rem));
  justify-content: center;
  gap: clamp(1rem, 2.2vw, 1.75rem);
  list-style: none;
  margin: 0;
  padding: 10px clamp(16px, 4vw, 50px) 0;
}
.recorridos > li { margin: 0; padding: 0; }
.recorrido {
  position: relative;
  display: block;
  height: 100%;
  overflow: hidden;
  border-radius: var(--radio);
  background: var(--noche);
  box-shadow: var(--sombra-suave);
  color: #fff;
  text-decoration: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.recorrido:hover { color: #fff; transform: translateY(-4px); box-shadow: var(--sombra-alta); }
.recorrido__foto {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.recorrido:hover .recorrido__foto { transform: scale(1.05); }
.recorrido__titulo {
  position: absolute;
  inset: auto 0 0 0;
  padding: 3.5rem 1.25rem 1.1rem;
  background: linear-gradient(to top, rgb(9 25 65 / 0.92), rgb(9 25 65 / 0));
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.25;
}

/* 11. Tablas ------------------------------------------------------------- */

table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.9375rem;
  line-height: 1.45;
}
th, td { padding: 0.75rem 0.9rem; text-align: left; vertical-align: top; }
th { background: var(--acento); color: #fff; font-weight: 700; }
th:first-child { border-top-left-radius: var(--radio-chico); }
th:last-child { border-top-right-radius: var(--radio-chico); }
td { border-bottom: 1px solid var(--linea); }
td:first-child { border-left: 1px solid var(--linea); }
td:last-child { border-right: 1px solid var(--linea); }
tbody tr:nth-child(even) td { background: var(--niebla); }
tbody tr:last-child td:first-child { border-bottom-left-radius: var(--radio-chico); }
tbody tr:last-child td:last-child { border-bottom-right-radius: var(--radio-chico); }
/* Tablas sin fila de encabezados: se cierra el borde superior. */
table:not(:has(th)) tr:first-child td { border-top: 1px solid var(--linea); }
table:not(:has(th)) tr:first-child td:first-child { border-top-left-radius: var(--radio-chico); }
table:not(:has(th)) tr:first-child td:last-child { border-top-right-radius: var(--radio-chico); }

.titulo + table { margin-top: 1.1rem; }

@media (max-width: 34rem) {
  /* Las tablas con etiquetas por celda se apilan; las demás se desplazan. */
  table:has(td[data-label]) thead { display: none; }
  table:has(td[data-label]) tr {
    display: block;
    margin-top: 0.75rem;
    padding: 0.8rem 1rem;
    border: 1px solid var(--linea);
    border-left: 4px solid var(--acento);
    border-radius: var(--radio-chico);
    background: var(--papel);
  }
  table:has(td[data-label]) td {
    display: block;
    padding: 0.2rem 0;
    border: 0;
    border-radius: 0;
    background: none;
  }
  td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--tinta-suave);
  }
  td[data-label] + td[data-label] { margin-top: 0.45rem; }
  table:not(:has(td[data-label])) { display: block; overflow-x: auto; }
}

/* 12. Pie y botón de WhatsApp -------------------------------------------- */

.pie { background: var(--noche); color: #fff; }
.pie > .contenedor {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem 2rem;
  padding-block: clamp(1.75rem, 3vw, 2.25rem);
}
.pie__redes { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.pie__red {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid rgb(255 255 255 / 0.18);
  border-radius: 50%;
  color: #fff;
  font-family: "Iconos de marca";
  font-size: 1rem;
  line-height: 1;
  text-decoration: none;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.pie__red:hover { background: #fff; border-color: #fff; color: var(--rojo); transform: translateY(-2px); }
.pie__red[data-red="facebook"]::before { content: "\f09a"; }
.pie__red[data-red="twitter"]::before { content: "\f099"; }
.pie__red[data-red="youtube"]::before { content: "\f167"; }
.pie__red[data-red="instagram"]::before { content: "\f16d"; }
.pie__red[data-red="linkedin"]::before { content: "\f08c"; }
.pie__legal {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.7;
  color: rgb(255 255 255 / 0.72);
}
.pie__legal a { color: rgb(255 255 255 / 0.72); text-decoration-color: rgb(255 255 255 / 0.3); }
.pie__legal a:hover { color: #fff; }

.whatsapp-flotante {
  position: fixed;
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom));
  z-index: 10;
  padding: 0.9rem 1.35rem 0.9rem 3.1rem;
  border-radius: 10rem;
  background: #1fa855 url("../images/whatsapp.png") 1rem center / 1.5rem auto no-repeat;
  box-shadow: 0 2px 4px rgb(9 25 65 / 0.2), 0 12px 26px -8px rgb(18 110 55 / 0.65);
  color: #fff;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  transition: transform 0.2s ease, background-color 0.2s ease;
}
.whatsapp-flotante:hover { background-color: #128c4a; color: #fff; transform: translateY(-2px); }

/* En celular el botón flotante no debe tapar el pie. */
@media (max-width: 44rem) {
  .pie > .contenedor { flex-direction: column; text-align: center; }
  .pie__redes { justify-content: center; }
  body:has(.whatsapp-flotante) .pie { padding-bottom: 4.25rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

@media print {
  body, main { background: #fff; }
  main { margin-top: 0; border-radius: 0; }
  .portada__fondo, .portada::after, .pie__redes, .whatsapp-flotante, .saltar { display: none; }
  .portada { min-height: 0; background: none; color: var(--tinta); }
  .portada__texto { padding-bottom: 1rem; animation: none; }
  .portada__titular { text-shadow: none; }
  .tarjeta__caja, .acordeon__item, .contacto, .recorrido { box-shadow: none; break-inside: avoid; }
  .acordeon__respuesta { display: block; }
  .pie { background: none; color: var(--tinta); }
  .pie__legal, .pie__legal a { color: var(--tinta-suave); }
}