/**
 * El vocabulario compartido del sitio. Clases ud-*.
 * Las clases de estado que toca el JavaScript viven en interacciones.css.
 */

@layer patrones {
  /* Utilidades ------------------------------------------------------- */

  .ud-oculto-visual {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    border: 0;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  /* Etiqueta cápsula. La piden el home, las notas y el índice del blog. */
  .ud-capsula {
    display: inline-flex;
    align-items: center;
    padding: var(--espacio-1) var(--espacio-4);
    border: var(--borde) solid var(--color-linea-fuerte);
    border-radius: var(--radio-pildora);
    color: var(--color-texto-suave);
    font-family: var(--fuente-titulos);
    font-size: var(--texto-xs);
    font-weight: var(--peso-titulo);
    letter-spacing: var(--espaciado-letra-amplio);
    text-transform: uppercase;
  }

  /* Caja de llamada a la acción. La piden las notas y el índice del blog. */
  .ud-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--espacio-4);
    padding: var(--espacio-6);
    border: var(--borde) solid var(--color-linea-fuerte);
    border-radius: var(--radio-lg);
    background-color: var(--color-superficie-2);
  }

  .ud-cta__titulo {
    font-family: var(--fuente-titulos);
    font-size: var(--titulo-tarjeta);
    font-weight: var(--peso-encabezado);
    font-stretch: var(--ancho-encabezado);
    text-wrap: balance;
  }

  /* Botones ---------------------------------------------------------- */

  .ud-boton {
    display: inline-flex;
    min-height: var(--area-toque);
    align-items: center;
    justify-content: center;
    padding: 0 var(--espacio-6);
    border: 0;
    border-radius: var(--radio-pildora);
    background-color: var(--color-guinda-vivo);
    color: var(--color-texto);
    cursor: pointer;
    font-family: var(--fuente-titulos);
    font-size: var(--texto-sm);
    font-weight: var(--peso-titulo);
    text-align: center;
    text-decoration: none;
    transition: background-color var(--transicion);
    white-space: nowrap;
  }

  .ud-boton:hover,
  .ud-boton:focus-visible {
    background-color: var(--color-guinda-vivo-hover);
    color: var(--color-texto);
  }

  .ud-boton--flecha {
    gap: var(--espacio-3);
    padding-right: var(--espacio-2);
  }

  /* Círculo con flecha, dibujado con bordes: sin imagen y sin markup extra. */
  .ud-boton__flecha {
    position: relative;
    display: inline-flex;
    width: 1.75rem;
    height: 1.75rem;
    flex: none;
    align-items: center;
    justify-content: center;
    border-radius: var(--radio-pildora);
    background-color: var(--color-texto);
    color: var(--color-guinda-vivo);
  }

  .ud-boton__flecha::before {
    content: "";
    width: 0.7rem;
    border-top: 2px solid currentColor;
  }

  .ud-boton__flecha::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0.5rem;
    width: 0.4rem;
    height: 0.4rem;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    transform: translateY(-50%) rotate(45deg);
  }

  /* Carrusel. Lo piden Proyectos y Blog en el home. La pista aporta el
     comportamiento; el ancho de tarjeta lo pone cada sección. */
  .ud-carrusel {
    display: grid;
    grid-auto-flow: column;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .ud-carrusel::-webkit-scrollbar {
    display: none;
  }

  .ud-carrusel > * {
    scroll-snap-align: start;
  }

  /* Mano abierta solo donde hay mouse: en táctil el gesto es el nativo. */
  @media (hover: hover) and (pointer: fine) {
    .ud-carrusel {
      cursor: grab;
    }
  }

  .ud-carrusel__flechas {
    display: flex;
    gap: var(--espacio-2);
  }

  .ud-carrusel__boton {
    display: inline-flex;
    width: var(--area-toque);
    height: var(--area-toque);
    align-items: center;
    justify-content: center;
    border: var(--borde) solid var(--color-linea-fuerte);
    border-radius: var(--radio-pildora);
    background-color: transparent;
    color: var(--color-texto);
    cursor: pointer;
    transition: background-color var(--transicion);
  }

  .ud-carrusel__boton:hover:not([disabled]),
  .ud-carrusel__boton:focus-visible {
    background-color: var(--color-fondo-hover);
  }

  .ud-carrusel__boton[disabled] {
    cursor: default;
    opacity: 0.35;
  }

  /* Punta de flecha dibujada con bordes, sin imagen. */
  .ud-carrusel__icono {
    width: 0.55rem;
    height: 0.55rem;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    transform: translateX(-0.15em) rotate(45deg);
  }

  .ud-carrusel__icono--anterior {
    transform: translateX(0.15em) rotate(225deg);
  }

  /* Cifras. Home y Nosotros. */
  .ud-cifras {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--espacio-4);
  }

  .ud-cifra {
    padding: var(--espacio-6);
    border: var(--borde) solid var(--tarjeta-borde, var(--color-linea));
    border-radius: var(--radio-md);
    background-color: var(--color-superficie-1);
  }

  .ud-cifra__numero {
    font-family: var(--fuente-titulos);
    font-size: clamp(1.9rem, 0.6rem + 5.6vw, 4rem);
    font-weight: var(--peso-titulo);
    letter-spacing: var(--espaciado-letra-titulo);
    line-height: var(--interlinea-apretada);
  }

  .ud-cifra__etiqueta {
    margin-top: var(--espacio-2);
    color: var(--color-texto-suave);
    font-size: var(--texto-sm);
  }

  /* Cuatro columnas hasta que la cifra más ancha ("100%") quepa en su
     tarjeta; antes de 75rem se queda en dos. */
  @media (min-width: 75rem) {
    .ud-cifras {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }

  /* Enlace de texto con flecha. Home, notas y landings. */
  .ud-enlace-flecha {
    display: inline-flex;
    min-height: var(--area-toque);
    align-items: center;
    gap: var(--espacio-3);
    padding: 0;
    border: 0;
    background-color: transparent;
    color: var(--color-texto);
    cursor: pointer;
    font-family: var(--fuente-titulos);
    font-size: var(--texto-sm);
    font-weight: var(--peso-titulo);
    text-decoration: none;
  }

  .ud-enlace-flecha:hover,
  .ud-enlace-flecha:focus-visible {
    color: var(--color-guinda-claro);
  }

  /* El círculo del patrón se invierte cuando va suelto, sin pastilla. */
  .ud-enlace-flecha .ud-boton__flecha {
    background-color: var(--color-guinda-vivo);
    color: var(--color-texto);
  }

  .ud-seccion-clara .ud-enlace-flecha {
    color: var(--color-guinda);
  }

  .ud-seccion-clara .ud-enlace-flecha:hover,
  .ud-seccion-clara .ud-enlace-flecha:focus-visible {
    color: var(--color-primario);
  }

  .ud-seccion-clara .ud-enlace-flecha .ud-boton__flecha {
    background-color: var(--color-guinda);
    color: var(--color-apoyo);
  }

  /* Insignias de certificación. Home, Nosotros, ramas y Mantenimiento. */
  /* Divisores con cualquier número de columnas: cada insignia dibuja el suyo
     justo a su izquierda. La caja se extiende hacia fuera lo que mide el
     relleno y recorta lo que sobresale, así el divisor de la primera
     insignia de cada fila queda fuera y los demás caen entre columnas. Vale
     igual para una sola fila que para varias. */
  .ud-insignias {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--espacio-4) 0;
    margin-inline: calc(var(--espacio-4) * -1);
    overflow: hidden;
  }

  .ud-insignia {
    position: relative;
    display: flex;
    /* El texto baja bajo el ícono cuando la columna es estrecha, en vez de
       desbordarse. */
    flex-wrap: wrap;
    align-items: center;
    gap: var(--espacio-3);
    padding: var(--espacio-1) var(--espacio-4);
    font-family: var(--fuente-titulos);
    font-size: var(--texto-xs);
    font-weight: var(--peso-titulo);
    letter-spacing: var(--espaciado-letra-amplio);
    text-transform: uppercase;
  }

  .ud-insignia::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(var(--borde) * -1);
    border-left: var(--borde) solid var(--color-linea-fuerte);
  }

  .ud-insignia__icono {
    width: 1.5rem;
    height: 1.5rem;
    flex: none;
    fill: none;
    stroke: var(--color-guinda-claro);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.5;
  }

  /* Hero de las páginas interiores: Nosotros, las ramas y las páginas de
     servicio, y /mantenimiento/ (el home tiene el suyo).
     Tarjeta con las proporciones del hero del home: el mismo margen lateral
     angosto y el mismo alto (llena la pantalla bajo el header y crece si el
     contenido no cabe, también en celular). Radio grande; la foto se recorta
     dentro del redondeo y el contenido va centrado en los dos ejes. */
  .ud-hero {
    position: relative;
    display: flex;
    min-height: calc(100vh - var(--altura-header) - var(--margen-lateral) * 3);
    min-height: calc(100svh - var(--altura-header) - var(--margen-lateral) * 3);
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin: var(--margen-lateral) var(--margen-lateral) 0;
    padding: var(--espacio-8) var(--relleno-hero);
    border-radius: var(--radio-lg);
  }

  /* Sin foto, el marcador va arriba: centrado se encimaba con el H1. */
  .ud-hero__foto {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: start center;
    padding: var(--espacio-4);
    background-color: color-mix(in srgb, var(--color-apoyo) 22%, var(--color-fondo));
  }

  /* La foto cubre todo el fondo; el degradado va encima. */
  .ud-hero__imagen {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Degradado en vez de velo: oscurece solo detrás del texto y deja limpias
     las orillas. El radio horizontal sigue al ancho de lectura, no al de la
     tarjeta, para que el párrafo quede siempre en la zona plena; el centro va
     al medio del alto, como el contenido. Intensidad medida contra las siete
     fotos de obra con la tarjeta a pantalla completa: el párrafo da 5:1 o más
     (AA) en 390, 1024, 1440 y 1920 px. Es decorativo: un pseudoelemento sin
     texto, que los lectores de pantalla no anuncian. */
  .ud-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--degradado-texto-foto);
  }

  .ud-hero__contenido {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  /* Las migas también van al centro, aun cuando saltan de línea. */
  .ud-hero .ud-migas__lista {
    justify-content: center;
  }

  .ud-hero__contenido .ud-capsula,
  .ud-hero__contenido .ud-boton {
    margin-top: var(--espacio-6);
  }

  /* Migas de pan. Las piden las notas y las páginas de servicio. */
  .ud-migas {
    font-size: var(--texto-sm);
  }

  .ud-migas__lista {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espacio-2);
    color: var(--color-texto-suave);
  }

  .ud-migas__lista li + li::before {
    content: "›";
    margin-right: var(--espacio-2);
  }

  .ud-migas__lista a {
    color: var(--color-texto-suave);
    text-decoration: none;
  }

  .ud-migas__lista a:hover,
  .ud-migas__lista a:focus-visible {
    color: var(--color-guinda-claro);
  }

  /* Hueco de imagen mientras no hay foto. Lo piden home, notas, blog y
     servicio. */
  .ud-foto {
    display: grid;
    place-items: center;
    padding: var(--espacio-4);
    border-radius: var(--radio-lg);
    background-color: color-mix(in srgb, var(--color-apoyo) 22%, var(--color-fondo));
  }

  .ud-foto--clara {
    background-color: color-mix(in srgb, var(--color-primario) 12%, var(--color-apoyo));
  }

  .ud-pendiente {
    color: var(--color-texto-suave);
    font-family: var(--fuente-titulos);
    font-size: var(--texto-xs);
    letter-spacing: var(--espaciado-letra-amplio);
    text-align: center;
    text-transform: uppercase;
  }

  /* Sección clara: fondo Tender Light Blue y texto en azul de marca. */
  .ud-seccion-clara {
    border-radius: var(--radio-lg);
    background-color: var(--color-apoyo);
    color: var(--color-primario);
  }

  .ud-seccion-clara .ud-capsula {
    border-color: color-mix(in srgb, var(--color-primario) 30%, transparent);
    color: var(--color-primario);
  }

  .ud-seccion-clara .ud-pendiente {
    color: color-mix(in srgb, var(--color-primario) 78%, var(--color-apoyo));
  }

  .ud-seccion-clara .ud-carrusel__boton {
    border-color: color-mix(in srgb, var(--color-primario) 30%, transparent);
    color: var(--color-primario);
  }

  .ud-seccion-clara .ud-carrusel__boton:hover:not([disabled]),
  .ud-seccion-clara .ud-carrusel__boton:focus-visible {
    background-color: color-mix(in srgb, var(--color-blanco) 45%, var(--color-apoyo));
  }

  /* Pasos del proceso. Los piden el home y las páginas de servicio. */
  .ud-pasos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: var(--espacio-4);
  }

  .ud-paso {
    padding: var(--espacio-6);
    border: var(--borde) solid var(--tarjeta-borde, var(--color-linea));
    border-radius: var(--radio-md);
    background-color: var(--color-superficie-1);
  }

  .ud-paso__numero {
    color: var(--color-guinda-claro);
    font-family: var(--fuente-titulos);
    font-size: var(--texto-lg);
    font-weight: var(--peso-titulo);
  }

  .ud-paso__titulo {
    margin-top: var(--espacio-2);
    font-size: var(--titulo-tarjeta-sm);
  }

  /* Hover de tarjetas. Un solo efecto para todo el sitio.
       ud-tarjeta            cualquier tarjeta: al pasar el cursor se marca
                             su borde, nada más.
       ud-tarjeta--enlace    la tarjeta lleva a otra página: además se eleva
                             y gana sombra, también con foco de teclado (en
                             ella o en un enlace de adentro).
       ud-tarjeta--clara     sobre fondo claro: borde y sombra en azul.
       ud-tarjeta--fuerte    la tarjeta ya parte de un borde marcado.
       ud-tarjeta__imagen    marco de la imagen: recorta, y lo de adentro se
                             acerca un poco.
     La tarjeta toma el color de su borde de --tarjeta-borde; cada hoja lo usa
     en su propio border (con --color-linea de respaldo). Así el cambio de
     color vive aquí aunque el borde se declare en una hoja de página.
     Con prefers-reduced-motion no hay elevación ni acercamiento. */
  .ud-tarjeta {
    --tarjeta-borde: var(--color-linea);
    --tarjeta-borde-activo: var(--color-linea-fuerte);
    --tarjeta-sombra: var(--sombra-tarjeta);
    transition:
      border-color var(--transicion-tarjeta),
      box-shadow var(--transicion-tarjeta),
      transform var(--transicion-tarjeta);
  }

  .ud-tarjeta--fuerte {
    --tarjeta-borde: var(--color-linea-fuerte);
    --tarjeta-borde-activo: var(--color-linea-activa);
  }

  .ud-tarjeta--clara {
    --tarjeta-borde: var(--color-linea-clara);
    --tarjeta-borde-activo: var(--color-linea-clara-fuerte);
    --tarjeta-sombra: var(--sombra-tarjeta-clara);
  }

  .ud-tarjeta:hover,
  .ud-tarjeta--enlace:focus-visible,
  .ud-tarjeta--enlace:has(:focus-visible) {
    --tarjeta-borde: var(--tarjeta-borde-activo);
  }

  .ud-tarjeta--enlace:hover,
  .ud-tarjeta--enlace:focus-visible,
  .ud-tarjeta--enlace:has(:focus-visible) {
    box-shadow: var(--tarjeta-sombra);
  }

  .ud-tarjeta__imagen {
    overflow: hidden;
  }

  .ud-tarjeta__imagen > * {
    transition: transform var(--transicion-tarjeta);
  }

  @media (prefers-reduced-motion: no-preference) {
    .ud-tarjeta--enlace:hover,
    .ud-tarjeta--enlace:focus-visible,
    .ud-tarjeta--enlace:has(:focus-visible) {
      transform: translateY(calc(var(--elevacion-tarjeta) * -1));
    }

    .ud-tarjeta--enlace:hover .ud-tarjeta__imagen > *,
    .ud-tarjeta--enlace:focus-visible .ud-tarjeta__imagen > *,
    .ud-tarjeta--enlace:has(:focus-visible) .ud-tarjeta__imagen > * {
      transform: scale(var(--zoom-imagen-tarjeta));
    }
  }

  /* Tarjeta de proyecto del carrusel. Home y páginas de servicio. */
  .ud-proyecto {
    border-radius: var(--radio-lg);
  }

  .ud-proyecto .ud-foto {
    min-height: 11rem;
  }

  .ud-proyecto:focus-visible {
    outline: 2px solid var(--color-guinda);
    outline-offset: 4px;
  }

  .ud-proyecto__nombre {
    margin-top: var(--espacio-4);
    font-size: var(--titulo-tarjeta);
  }

  .ud-proyecto__lugar {
    margin-top: var(--espacio-1);
    font-size: var(--texto-sm);
  }

  .ud-seccion-clara .ud-proyecto__lugar {
    color: color-mix(in srgb, var(--color-primario) 78%, var(--color-apoyo));
  }

  /* Tarjeta de nota del blog. Home y páginas de servicio. */
  .ud-nota__enlace {
    display: flex;
    height: 100%;
    flex-direction: column;
    overflow: hidden;
    border: var(--borde) solid var(--tarjeta-borde, var(--color-linea));
    border-radius: var(--radio-lg);
    background-color: var(--color-superficie-1);
    color: var(--color-texto);
    text-decoration: none;
  }

  .ud-nota__enlace:focus-visible {
    outline: 2px solid var(--color-guinda-claro);
    outline-offset: 4px;
  }

  .ud-nota__enlace .ud-foto {
    aspect-ratio: 16 / 10;
    border-radius: 0;
  }

  .ud-nota__cuerpo {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    padding: var(--espacio-6);
  }

  /* El título manda en la tarjeta: tamaño de tarjeta grande. */
  .ud-nota__titulo {
    margin-top: var(--espacio-4);
    font-size: var(--titulo-tarjeta);
  }

  /* La cápsula de categoría queda por debajo del título: Manrope medio en
     lugar de Archivo seminegra. (Archivo solo se carga en 600 y 700, así que
     bajarle el peso no tendría efecto.) Solo en la tarjeta de nota. */
  .ud-nota .ud-capsula {
    font-family: var(--fuente-texto);
    font-weight: var(--peso-medio);
  }

  .ud-nota__datos {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espacio-2);
    margin-top: auto;
    padding-top: var(--espacio-6);
    color: var(--color-texto-suave);
    font-size: var(--texto-xs);
  }

  /* Pregunta desplegable. Notas y páginas de servicio. */
  .ud-pregunta {
    padding: var(--espacio-4) var(--espacio-6);
    border: var(--borde) solid var(--color-linea);
    border-radius: var(--radio-md);
    background-color: var(--color-superficie-1);
  }

  .ud-pregunta summary {
    color: var(--color-texto);
    cursor: pointer;
    font-family: var(--fuente-titulos);
    font-size: var(--texto-md);
    font-weight: var(--peso-titulo);
  }

  .ud-pregunta p {
    margin-top: var(--espacio-3);
    color: var(--color-texto-suave);
  }

  /* Header ----------------------------------------------------------- */

  /* El header es una cápsula flotante: la caja exterior solo aporta el margen
     contra los bordes de la ventana y la fijación al hacer scroll. */
  /* La caja exterior no se ve: su relleno no debe robarle el clic al contenido
     que pasa por debajo. Solo lo visible vuelve a ser clicable. */
  .ud-header {
    position: sticky;
    z-index: var(--z-header);
    top: 0;
    padding: var(--margen-lateral) var(--margen-lateral) 0;
    pointer-events: none;
  }

  .ud-header__interior {
    position: relative;
    display: flex;
    min-height: var(--altura-header);
    align-items: center;
    gap: var(--espacio-4);
    padding: var(--espacio-3) var(--espacio-4);
    border: var(--borde) solid var(--color-linea);
    border-radius: var(--radio-pildora);
    background-color: var(--color-fondo);
    pointer-events: auto;
  }

  /* Respaldo opaco: lo translúcido solo se activa donde hay backdrop-filter. */
  @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    .ud-header__interior {
      background-color: var(--color-header);
      backdrop-filter: var(--desenfoque-header);
      -webkit-backdrop-filter: var(--desenfoque-header);
    }
  }

  .ud-header__logo {
    display: inline-flex;
    margin-right: auto;
    align-items: center;
  }

  .ud-header__logo img {
    width: auto;
    height: var(--altura-logo);
  }

  .ud-header__menu {
    display: inline-flex;
    width: var(--area-toque);
    height: var(--area-toque);
    align-items: center;
    justify-content: center;
    border: var(--borde) solid var(--color-linea);
    border-radius: var(--radio-pildora);
    background-color: transparent;
    color: var(--color-texto);
    cursor: pointer;
  }

  /* Tres barras dibujadas con bordes, sin imagen. */
  .ud-header__menu-icono,
  .ud-header__menu-icono::before,
  .ud-header__menu-icono::after {
    display: block;
    width: 1.25rem;
    border-top: 2px solid currentColor;
  }

  .ud-header__menu-icono::before,
  .ud-header__menu-icono::after {
    content: "";
    position: relative;
  }

  .ud-header__menu-icono::before {
    top: 0.3rem;
  }

  .ud-header__menu-icono::after {
    top: 0.6rem;
  }

  /* En celular cuelga de la cápsula sin deformarla; en escritorio deja de ser
     caja (display: contents) y estas reglas no aplican. */
  .ud-header__panel {
    position: absolute;
    top: calc(100% + var(--espacio-2));
    right: 0;
    left: 0;
    display: none;
    padding: var(--espacio-2) var(--espacio-4) var(--espacio-4);
    border: var(--borde) solid var(--color-linea);
    border-radius: var(--radio-lg);
    background-color: var(--color-superficie-1);
    pointer-events: auto;
  }

  /* Navegación ------------------------------------------------------- */

  .ud-nav__lista {
    display: flex;
    flex-direction: column;
  }

  .ud-nav__grupo {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    border-top: var(--borde) solid var(--color-linea);
  }

  .ud-nav__enlace {
    display: inline-flex;
    min-height: var(--area-toque);
    flex: 1;
    align-items: center;
    padding: var(--espacio-2) 0;
    color: var(--color-texto);
    font-family: var(--fuente-titulos);
    font-size: var(--texto-md);
    font-weight: var(--peso-titulo);
    text-decoration: none;
  }

  .ud-nav__enlace:hover,
  .ud-nav__enlace:focus-visible {
    color: var(--color-guinda-claro);
  }

  .ud-nav__enlace--activo {
    color: var(--color-guinda-claro);
  }

  .ud-nav__enlace--rama {
    text-decoration: underline;
    text-decoration-color: var(--color-guinda-claro);
    text-decoration-thickness: 2px;
    text-underline-offset: 0.35em;
  }

  .ud-nav__disparador {
    display: inline-flex;
    width: var(--area-toque);
    height: var(--area-toque);
    align-items: center;
    justify-content: center;
    border: 0;
    background-color: transparent;
    color: inherit;
    cursor: pointer;
  }

  /* Punta de flecha dibujada con bordes, sin imagen. */
  .ud-nav__caret {
    width: 0.5rem;
    height: 0.5rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-0.15em) rotate(45deg);
  }

  .ud-nav__submenu {
    display: none;
    flex-basis: 100%;
    padding: 0 0 var(--espacio-2) var(--espacio-4);
  }

  .ud-nav__enlace--submenu {
    color: var(--color-texto-suave);
    font-size: var(--texto-sm);
  }

  .ud-nav__enlace--submenu.ud-nav__enlace--activo {
    color: var(--color-guinda-claro);
  }

  /* Footer ----------------------------------------------------------- */

  /* Dos tarjetas: la principal y la legal, separadas del borde de la
     ventana por el margen del sitio y entre sí por un espacio pequeño. Las
     tarjetas hacen de separador: no hay líneas. */
  .ud-footer {
    display: grid;
    gap: var(--espacio-2);
    padding: 0 var(--margen-lateral) var(--margen-lateral);
    color: var(--color-texto);
  }

  .ud-footer__interior {
    display: grid;
    gap: var(--espacio-8);
    padding: var(--espacio-8);
    border-radius: var(--radio-lg);
    background-color: var(--color-superficie-1);
  }

  .ud-footer__logo {
    display: inline-flex;
    margin-bottom: var(--espacio-4);
  }

  .ud-footer__logo img {
    width: auto;
    height: var(--altura-logo-footer);
  }

  .ud-footer__frase {
    max-width: var(--ancho-texto);
    margin-bottom: var(--espacio-6);
    color: var(--color-texto-suave);
    font-size: var(--texto-sm);
  }

  .ud-footer__navegacion {
    display: grid;
    gap: var(--espacio-8);
  }

  .ud-footer__titulo {
    margin-bottom: var(--espacio-3);
    color: var(--color-apoyo);
    font-family: var(--fuente-titulos);
    font-size: var(--texto-xs);
    font-weight: var(--peso-titulo);
    font-stretch: normal;
    letter-spacing: var(--espaciado-letra-amplio);
    text-transform: uppercase;
  }

  .ud-footer__lista {
    display: flex;
    flex-direction: column;
    gap: var(--espacio-1);
  }

  .ud-footer__enlace {
    display: inline-flex;
    min-height: var(--area-toque);
    align-items: center;
    color: var(--color-texto);
    font-size: var(--texto-sm);
    text-decoration: none;
  }

  .ud-footer__enlace:hover,
  .ud-footer__enlace:focus-visible {
    color: var(--color-guinda-claro);
  }

  .ud-footer__domicilio {
    max-width: var(--ancho-texto);
    margin-bottom: var(--espacio-3);
    color: var(--color-texto-suave);
    font-size: var(--texto-sm);
  }

  /* Tarjeta inferior, más baja: copyright a la izquierda y sello a la
     derecha, en la esquina. Al partirse en celular, el sello se queda
     alineado a la derecha. */
  .ud-footer__legal {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--espacio-2) var(--espacio-6);
    padding: var(--espacio-2) var(--espacio-8);
    border-radius: var(--radio-lg);
    background-color: var(--color-superficie-1);
  }

  .ud-footer__legal-derecha {
    display: flex;
    align-items: center;
    gap: var(--espacio-6);
    margin-left: auto;
  }

  .ud-footer__sello {
    display: inline-flex;
    min-height: var(--area-toque);
    align-items: center;
    opacity: var(--opacidad-atenuada);
    transition: opacity var(--transicion);
  }

  .ud-footer__sello:hover,
  .ud-footer__sello:focus-visible {
    opacity: 1;
  }

  .ud-footer__sello img {
    width: auto;
    height: var(--altura-sello);
  }

  .ud-footer__derechos {
    color: var(--color-texto-suave);
    font-size: var(--texto-xs);
  }

  /* Modal de cotización ---------------------------------------------- */

  .ud-modal {
    position: relative;
    width: min(100%, var(--ancho-modal));
    max-height: 92svh;
    padding: 0;
    border: var(--borde) solid var(--color-linea-fuerte);
    border-radius: var(--radio-lg);
    background-color: var(--color-superficie-2);
    box-shadow: var(--sombra-modal);
    color: var(--color-texto);
    overflow: hidden;
  }

  .ud-modal::backdrop {
    background-color: var(--color-velo);
    backdrop-filter: var(--desenfoque-header);
    -webkit-backdrop-filter: var(--desenfoque-header);
  }

  /* En celular se desplaza el modal entero. */
  .ud-modal__columnas {
    display: grid;
    max-height: 92svh;
    overflow-y: auto;
  }

  /* En celular la imagen es solo una franja alta del bloque, con el título
     encima; el resto del texto cae debajo, sobre el fondo del modal. */
  .ud-modal__lado {
    position: relative;
    padding: calc(var(--alto-franja-modal) - 2.5rem) var(--espacio-6)
      var(--espacio-6);
  }

  .ud-modal__imagen {
    position: absolute;
    inset: 0 0 auto;
    width: 100%;
    height: var(--alto-franja-modal);
    object-fit: cover;
    object-position: 45% 50%;
  }

  /* Degradado en tres paradas: la zona donde cae el texto queda bien oscura y
     la parte alta deja ver la foto. */
  .ud-modal__lado::after {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: var(--alto-franja-modal);
    background-image: linear-gradient(
      to top,
      color-mix(in srgb, var(--color-fondo) 96%, transparent) 0%,
      color-mix(in srgb, var(--color-fondo) 84%, transparent) 45%,
      color-mix(in srgb, var(--color-fondo) 25%, transparent) 100%
    );
  }

  /* Por encima del degradado: un ::after pinta después de los hijos, así que
     sin z-index el texto queda debajo. */
  .ud-modal__titulo {
    position: relative;
    z-index: 1;
    font-size: var(--titulo-tarjeta);
  }

  .ud-modal__lado-texto {
    position: relative;
    z-index: 1;
    padding-top: var(--espacio-4);
  }

  .ud-modal__texto {
    color: var(--color-texto-suave);
    font-size: var(--texto-sm);
  }

  .ud-modal__contacto {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-top: var(--espacio-6);
  }

  .ud-modal__etiqueta {
    margin-bottom: var(--espacio-2);
    color: var(--color-apoyo);
    font-family: var(--fuente-titulos);
    font-size: var(--texto-xs);
    font-weight: var(--peso-titulo);
    letter-spacing: var(--espaciado-letra-amplio);
    text-transform: uppercase;
  }

  .ud-modal__dato {
    display: inline-flex;
    min-height: var(--area-toque);
    align-items: center;
    color: var(--color-texto);
    font-family: var(--fuente-titulos);
    font-size: var(--texto-sm);
    font-weight: var(--peso-titulo);
    text-decoration: none;
  }

  .ud-modal__dato:hover,
  .ud-modal__dato:focus-visible {
    color: var(--color-guinda-claro);
  }

  .ud-modal__forma {
    padding: var(--espacio-6);
  }

  /* Esquina superior derecha del modal, por encima de la imagen. */
  .ud-modal__cerrar {
    position: absolute;
    z-index: 1;
    top: var(--espacio-4);
    right: var(--espacio-4);
    display: inline-flex;
    width: var(--area-toque);
    height: var(--area-toque);
    align-items: center;
    justify-content: center;
    border: var(--borde) solid var(--color-linea);
    border-radius: var(--radio-pildora);
    background-color: var(--color-fondo);
    color: var(--color-texto);
    cursor: pointer;
    font-size: var(--texto-lg);
    line-height: 1;
  }

  .ud-modal__cerrar:hover,
  .ud-modal__cerrar:focus-visible {
    background-color: var(--color-superficie-1);
  }

  /* Modal compacto: una sola columna con el formulario. WhatsApp. */
  .ud-modal--compacto {
    width: min(100%, var(--ancho-modal-compacto));
  }

  .ud-modal--compacto .ud-modal__forma {
    padding: var(--espacio-8) var(--espacio-6) var(--espacio-6);
  }

  /* El título deja libre la esquina del botón de cerrar. */
  .ud-modal--compacto .ud-modal__titulo {
    margin-bottom: var(--espacio-6);
    padding-right: calc(var(--area-toque) + var(--espacio-2));
  }

  /* Botón flotante de WhatsApp. Colores de la marca, no el verde de
     WhatsApp. Se aparta cuando el footer está a la vista (esta-oculto, en
     interacciones.css). */
  .ud-whatsapp {
    position: fixed;
    z-index: var(--z-flotante);
    right: var(--margen-lateral);
    bottom: var(--margen-lateral);
    display: inline-flex;
    width: var(--area-toque);
    height: var(--area-toque);
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: var(--radio-pildora);
    background-color: var(--color-guinda-vivo);
    box-shadow: var(--sombra-submenu);
    color: var(--color-blanco);
    cursor: pointer;
    transition:
      background-color var(--transicion),
      opacity var(--transicion),
      visibility var(--transicion);
  }

  /* Llega con hidden y lo muestra el JavaScript; el display de arriba le
     ganaría al hidden del navegador. */
  .ud-whatsapp[hidden] {
    display: none;
  }

  .ud-whatsapp:hover,
  .ud-whatsapp:focus-visible {
    background-color: var(--color-guinda-vivo-hover);
  }

  .ud-whatsapp:focus-visible {
    outline: 2px solid var(--color-guinda-claro);
    outline-offset: 4px;
  }

  .ud-whatsapp__icono {
    width: 1.5rem;
    height: 1.5rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.5;
  }

  /* Formulario ------------------------------------------------------- */

  .ud-formulario {
    display: grid;
    gap: var(--espacio-4);
  }

  .ud-formulario__fila {
    display: grid;
    gap: var(--espacio-4);
  }

  .ud-campo {
    display: flex;
    flex-direction: column;
    gap: var(--espacio-2);
  }

  .ud-campo__etiqueta {
    color: var(--color-texto-suave);
    font-family: var(--fuente-titulos);
    font-size: var(--texto-xs);
    font-weight: var(--peso-titulo);
    letter-spacing: var(--espaciado-letra-amplio);
    text-transform: uppercase;
  }

  .ud-campo__control {
    min-height: var(--area-toque);
    padding: var(--espacio-3) var(--espacio-4);
    border: var(--borde) solid var(--color-linea-fuerte);
    border-radius: var(--radio-sm);
    background-color: var(--color-superficie-1);
    color: var(--color-texto);
    font-size: var(--texto-sm);
  }

  .ud-campo__control:focus-visible {
    border-color: var(--color-guinda-claro);
  }

  textarea.ud-campo__control {
    min-height: 4.5rem;
    resize: vertical;
  }

  .ud-campo--casilla {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--espacio-3);
  }

  .ud-campo--casilla .ud-campo__etiqueta {
    color: var(--color-texto);
    font-family: var(--fuente-texto);
    font-size: var(--texto-sm);
    font-weight: var(--peso-normal);
    letter-spacing: normal;
    text-transform: none;
  }

  .ud-campo__casilla {
    width: 1.15rem;
    height: 1.15rem;
    flex: none;
    margin-top: 0.2rem;
    accent-color: var(--color-guinda-vivo);
  }

  .ud-formulario__envio {
    margin-top: var(--espacio-2);
  }

  /* En celular el modal compacto se ancla arriba: al abrirse el teclado, los
     campos quedan a la vista en lugar de taparse. */
  @media (max-width: 63.999rem) {
    .ud-modal--compacto {
      margin-top: var(--margen-lateral);
      margin-bottom: auto;
    }
  }

  /* Escritorio ------------------------------------------------------- */

  @media (min-width: 64rem) {
    .ud-whatsapp {
      width: calc(var(--area-toque) + var(--espacio-3));
      height: calc(var(--area-toque) + var(--espacio-3));
    }

    /* Tres columnas: las de los lados se reparten por igual, así la píldora
       del centro queda centrada en el header sin que influya el ancho del
       logotipo ni el del botón. */
    .ud-header__interior {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      gap: var(--espacio-6);
      padding-inline: var(--espacio-6);
    }

    .ud-header__logo {
      margin-right: 0;
      justify-self: start;
    }

    .ud-header__menu {
      display: none;
    }

    /* El panel deja de ser caja: sus hijos entran en la rejilla del header. */
    .ud-header__panel {
      display: contents;
    }

    .ud-header__cta {
      justify-self: end;
    }

    /* Sin fondo ni borde propios: la cápsula es el header. */
    .ud-nav__lista {
      flex-direction: row;
      align-items: center;
      gap: var(--espacio-2);
    }

    .ud-nav__grupo {
      border-top: 0;
    }

    .ud-nav__enlace {
      flex: none;
      padding: 0 var(--espacio-2);
      font-size: var(--texto-sm);
    }

    .ud-nav__disparador {
      width: var(--espacio-6);
      height: var(--espacio-6);
      margin-left: calc(var(--espacio-2) * -1);
    }

    /* Del borde del enlace al borde de la cápsula hay el relleno vertical del
       header; se suma para que el submenú caiga por debajo, alineado a su
       enlace. */
    .ud-nav__submenu {
      position: absolute;
      z-index: var(--z-header);
      top: calc(100% + var(--espacio-3) + var(--espacio-2));
      left: 0;
      min-width: var(--ancho-submenu);
      padding: var(--espacio-2);
      border: var(--borde) solid var(--color-linea);
      border-radius: var(--radio-md);
      background-color: var(--color-superficie-2);
      box-shadow: var(--sombra-submenu);
      pointer-events: auto;
    }

    /* Puente invisible sobre el hueco entre el enlace y el submenú: sin él,
       el cursor sale del grupo al bajar, el submenú se cierra y el clic cae
       en lo que hay debajo del header. */
    .ud-nav__submenu::before {
      content: "";
      position: absolute;
      right: 0;
      bottom: 100%;
      left: 0;
      height: calc(var(--espacio-3) + var(--espacio-2) + var(--borde));
    }

    .ud-nav__grupo:hover > .ud-nav__submenu,
    .ud-nav__grupo:focus-within > .ud-nav__submenu {
      display: block;
    }

    .ud-nav__enlace--submenu {
      min-height: var(--espacio-8);
      padding: var(--espacio-1) var(--espacio-2);
      border-radius: var(--radio-sm);
    }

    .ud-nav__enlace--submenu:hover,
    .ud-nav__enlace--submenu:focus-visible {
      background-color: var(--color-fondo-hover);
    }

    /* Dos columnas: la imagen manda alto y solo el formulario se desplaza si
       la pantalla es baja. */
    .ud-modal__columnas {
      grid-template-columns: 1fr 1.15fr;
      /* La fila se ciñe al alto disponible; si no, crece con el contenido y
         se desborda en lugar de dejar que la columna se desplace. */
      grid-template-rows: minmax(0, 1fr);
      overflow: hidden;
    }

    /* La imagen pasa a ocupar la columna entera. */
    .ud-modal__lado {
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      padding: var(--espacio-8);
      overflow: hidden;
    }

    .ud-modal__imagen,
    .ud-modal__lado::after {
      inset: 0;
      height: 100%;
    }

    .ud-modal__forma {
      /* min-height: 0 o el elemento de rejilla crece con su contenido y el
         overflow nunca entra: se desborda en vez de desplazarse. */
      min-height: 0;
      padding: var(--espacio-8);
      overflow-y: auto;
    }

    /* minmax(0, 1fr) y no 1fr: si no, el <select> con la opción más larga
       ensancha su columna y el par deja de ser parejo. */
    .ud-formulario__fila {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Escritorio angosto (64–80rem): las cuatro columnas no caben junto a la
       marca, así que la marca va en su propia fila y debajo, en una fila, los
       enlaces (que se llevan el sobrante) y el contacto. */
    .ud-footer__interior {
      grid-template-columns: minmax(0, 1fr) minmax(14rem, 18rem);
      column-gap: var(--espacio-12);
      row-gap: var(--espacio-8);
      align-items: start;
      padding: var(--espacio-12);
    }

    .ud-footer__marca {
      grid-column: 1 / -1;
    }

    .ud-footer__legal {
      padding-inline: var(--espacio-12);
    }

    /* Cada columna de enlaces cabe completa y reparte por igual lo que sobra. */
    .ud-footer__navegacion {
      grid-template-columns: repeat(3, minmax(max-content, 1fr));
      gap: var(--espacio-8);
    }

  }

  /* Desde 80rem cabe todo en una fila. La marca se queda en lo justo para el
     logotipo y la frase; lo que sobra se reparte entre los enlaces (dos
     partes) y el contacto (una). */
  @media (min-width: 80rem) {
    .ud-footer__interior {
      grid-template-columns:
        minmax(17.5rem, 20rem)
        minmax(max-content, 2fr)
        minmax(14rem, 1fr);
    }

    .ud-footer__marca {
      grid-column: auto;
    }
  }
}