/* La familia del sitio es "Exo 2" y se declara una sola vez, en
   public/skins/tokens.css: ahi estan las @font-face (archivos propios, en
   /skins/fonts/) y el token --font-family-base con la pila de respaldo. Los
   cuatro layouts cargan tokens.css antes que cualquier otra hoja, asi que
   aca alcanza con usar la variable.

   Antes se importaba desde fonts.googleapis.com; se dejo de hacer para no
   depender de un tercer dominio para pintar el texto. */

/* ===== VARIABLES GLOBALES DEL SITIO =====

   Los colores se cargan desde /administracion/paleta. Lo que hay aca abajo son
   los valores de fabrica: el layout del sitio (app/layout/page/page.php) emite
   un segundo :root inline, despues de esta hoja, con lo que haya guardado el
   editor, y ese pisa a este.

   Este bloque no es decorativo entonces, cumple dos funciones:

     - el sitio se ve bien aunque no exista la tabla `paleta` (una instalacion
       a la que todavia no le corrieron sql/paleta.sql)
     - es la referencia de lo que significa cada variable, en un solo lugar

   Los defaults tienen que coincidir con los de Page_Model_Paleta_Registry: es
   de donde salieron. Si se cambia un color aca, cambiarlo tambien alla.

   Para agregar una variable nueva, agregarla al registro y usarla aca.

   MODO CLARO Y MODO OSCURO
   Los mismos nombres de variable valen para los dos modos: mas abajo hay un
   segundo juego que las repisa cuando el visitante esta en oscuro. Todo el
   resto de la hoja (y disenios.css) escribe var(--color-...)
   sin enterarse de que existen dos modos, que es justamente la idea: no hay una
   sola regla duplicada "para el modo oscuro". */
:root {
  /* light: los <select>, las barras de scroll y el resto de los controles que
     dibuja el navegador van claros. El modo oscuro lo pone en dark. */
  color-scheme: light;

  /* Marca */
  --color-acento: #4f46e5;
  --color-acento-hover: #4338ca;
  --color-acento-contraste: #ffffff;

  /* Textos */
  --color-texto: #1f2a37;
  --color-texto-suave: #555555;
  --color-texto-tenue: #888888;
  --color-enlace: #0d6efd;

  /* Fondos y bordes. El fondo del sitio es el gris de lienzo sobre el que se
     apoyan las cajas, que son las blancas: por eso el "alterno" es el claro. */
  --color-fondo: #f8f9fa;
  --color-fondo-alterno: transparent; /* el alterno es transparente para que el fondo del sitio se vea */
  --color-borde: #e9ecef;

  /* Header */
  --header-fondo: #ffffff;
  --header-texto: #1f2a37;
  --header-activo: #4f46e5;

  /* Footer */
  --footer-fondo: #ffffff;
  --footer-texto: #1f2a37;
  --footer-enlace: #4f46e5;

  /* Derivados: no se editan en el administrador, se calculan a partir del
     acento, del enlace, del texto y del fondo de las cajas
     (ver Page_Model_Paleta_Registry::_derivados). */
  --color-acento-light: rgba(79, 70, 229, 0.10);
  --color-acento-sombra: rgba(79, 70, 229, 0.28);
  --color-acento-borde: rgba(79, 70, 229, 0.35);
  --color-enlace-hover: #0b5acf;
  /* La linea de pelo entre dos secciones o entre un testimonio y su autor.
     Sale del color del texto, no de un negro fijo, para que se vea igual sobre
     un fondo claro que sobre uno oscuro. */
  --color-linea-tenue: rgba(31, 42, 55, 0.08);
  /* El panel translucido que el diseño 5 apoya sobre la foto de fondo. */
  --color-panel-velo: rgba(255, 255, 255, 0.92);
  /* La sombra de las tarjetas. En modo oscuro es mas negra, si no desaparece. */
  --color-sombra: rgba(0, 0, 0, 0.12);

  /* Forma, espacio, tipografia y movimiento estan en /skins/tokens.css, que
     los dos skins cargan antes que su propia hoja. No se repiten aca: son la
     misma escala para el sitio y para el administrador, y tener dos copias es
     exactamente como se desincronizaron la primera vez.

     Lo unico que si vive aca son los dos alias que ya usaba el CSS de los
     diseños y de los sliders. */
  --radio-card: var(--radius-lg);
  --dsn-radio: var(--radius-lg);
}

/* ===== MODO OSCURO =====

   Los mismos tres bloques que emite el layout (ver
   Page_Model_Paleta_Registry::css), con los valores de fabrica: el primero para
   el visitante que tiene el sistema en oscuro y nunca eligio nada, el segundo
   para el que apreto el boton del header.

   El de la @media va limitado a :not([data-tema="claro"]) para que quien eligio
   claro a mano lo siga viendo claro aunque su sistema este en oscuro. Y el de
   [data-tema="oscuro"] va ultimo con la misma especificidad, asi la eleccion
   explicita gana sin necesidad de !important.

   Tienen que coincidir con defecto_oscuro en Page_Model_Paleta_Registry. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    color-scheme: dark;

    --color-acento: #818cf8;
    --color-acento-hover: #a5b4fc;
    --color-acento-contraste: #14161f;

    --color-texto: #f1f5f9;
    --color-texto-suave: #c3cbd6;
    --color-texto-tenue: #93a0b0;
    --color-enlace: #6ea8fe;

    --color-fondo: #10141b;
    --color-fondo-alterno: #191f28;
    --color-borde: #2b333f;

    --header-fondo: #131922;
    --header-texto: #e8edf3;
    --header-activo: #a5b4fc;

    --footer-fondo: #131922;
    --footer-texto: #e8edf3;
    --footer-enlace: #a5b4fc;

    --color-acento-light: rgba(129, 140, 248, 0.18);
    --color-acento-sombra: rgba(129, 140, 248, 0.40);
    --color-acento-borde: rgba(129, 140, 248, 0.45);
    --color-enlace-hover: #8ebbfe;
    --color-linea-tenue: rgba(241, 245, 249, 0.16);
    --color-panel-velo: rgba(25, 31, 40, 0.92);
    --color-sombra: rgba(0, 0, 0, 0.55);
  }
}

:root[data-tema="oscuro"] {
  color-scheme: dark;

  --color-acento: #818cf8;
  --color-acento-hover: #a5b4fc;
  --color-acento-contraste: #14161f;

  --color-texto: #f1f5f9;
  --color-texto-suave: #c3cbd6;
  --color-texto-tenue: #93a0b0;
  --color-enlace: #6ea8fe;

  --color-fondo: #10141b;
  --color-fondo-alterno: #191f28;
  --color-borde: #2b333f;

  --header-fondo: #131922;
  --header-texto: #e8edf3;
  --header-activo: #a5b4fc;

  --footer-fondo: #131922;
  --footer-texto: #e8edf3;
  --footer-enlace: #a5b4fc;

  --color-acento-light: rgba(129, 140, 248, 0.18);
  --color-acento-sombra: rgba(129, 140, 248, 0.40);
  --color-acento-borde: rgba(129, 140, 248, 0.45);
  --color-enlace-hover: #8ebbfe;
  --color-linea-tenue: rgba(241, 245, 249, 0.16);
  --color-panel-velo: rgba(25, 31, 40, 0.92);
  --color-sombra: rgba(0, 0, 0, 0.55);
}

/* ===== BOTON — el unico componente de boton del sitio =====

   Es la base de todos los diseños de contenido. Las variantes son
   modificadores de esta clase (.btn-sm, -outline, -sutil), no botones nuevos
   por seccion: en cuanto una seccion define el suyo, se desincronizan.

   Lo que cambia en hover es el color de fondo y nada mas. Antes ademas subia
   dos pixeles y se le encendia una sombra de color; con eso, cualquier grilla
   de tarjetas hacia saltar medio contenido al pasar el mouse por encima.

   Los !important son los que ya estaban: hacen falta para ganarle a los
   enlaces de Bootstrap, que traen su propio color y subrayado. */
.btn-vermas {
  display: inline-block;
  padding: var(--space-2) var(--space-5);
  background-color: var(--color-acento);
  color: var(--color-acento-contraste) !important;
  border-radius: var(--radius-md);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-base);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none !important;
  transition: background-color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard);
  white-space: nowrap;
}

.btn-vermas:hover,
.btn-vermas:focus {
  background-color: var(--color-acento-hover);
  border-color: var(--color-acento-hover);
  color: var(--color-acento-contraste) !important;
}

.btn-vermas.btn-sm {
  padding: var(--space-1) var(--space-3);
  font-size: var(--font-size-xs);
}

/* Contorno — para cuando el boton va sobre una caja que ya es del color de
   marca, o cuando hay dos acciones y una es la secundaria. */
.btn-vermas-outline {
  background-color: transparent;
  border-color: var(--color-acento);
  color: var(--color-acento) !important;
}

.btn-vermas-outline:hover,
.btn-vermas-outline:focus {
  background-color: var(--color-acento);
  color: var(--color-acento-contraste) !important;
}

/* ===== BASE de normalizacion global ===== */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  box-sizing: border-box;

  /* El alto del header se declara aca y no en el body porque scroll-padding-top
     lo necesita: el elemento que desplaza es el <html>, y una variable definida
     en el <body> no llega hacia arriba. El body la hereda igual.

     65px es lo que mide el header de verdad: el logo (.navbar-logo, 48px) mas
     el padding vertical de .navbar de Bootstrap (.5rem arriba y abajo) mas el
     borde de 1px. Decia 35px, que no correspondia a nada: el <body> reservaba
     35px para una barra de 65, asi que los primeros 30px de cada pagina
     quedaban tapados por el header, y scroll-padding-top —que se calcula de
     este numero— dejaba una seccion recien saltada 6px por DEBAJO del borde
     del header en vez de despejada.

     Si cambia el alto del logo o el padding del navbar, este numero cambia
     con ellos.

     AHORA ESTA EN 25px A PROPOSITO, provisorio. Con menos que el alto real el
     <body> reserva de menos y los primeros 40px de cada pagina quedan detras
     del header; y como scroll-padding-top sale de aca, una seccion recien
     saltada aterriza 16px por debajo del borde del header en vez de despejada.
     Para que las dos cosas queden bien el valor tiene que ser 65px.

     La unidad NO es opcional: un 0 pelado hace invalido el calc() de
     scroll-padding-top —en calc() no se puede sumar un cero sin unidad a una
     longitud— y entonces la propiedad entera se descarta y vale "auto", con lo
     que el salto a un ancla deja la seccion entera tapada. Si alguna vez va en
     cero, va "0px". */
  --global-header-height: 25px;

  /* El header es fixed, asi que al saltar a un ancla (/#contactenos) el titulo
     de la seccion quedaba tapado. scroll-padding-top le reserva su alto mas un
     respiro, y vale para cualquier salto: el enlace del menu, el del pie y el
     scroll restaurado al recargar. */
  scroll-padding-top: calc(var(--global-header-height) + var(--space-5));

  /* El salto se recorre en vez de teletransportar: es movimiento como respuesta
     a una accion, no decoracion. Se apaga con prefers-reduced-motion (al final
     de la hoja). */
  scroll-behavior: smooth;
}

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

body {
  margin: 0;
  font-family: var(--font-family-base);
  line-height: 1.5;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  padding-top: var(--global-header-height);
  background: var(--color-fondo);
  overflow-x: hidden;
  /* El pie ya no esta pegado abajo con position:fixed sino al final del
     documento. Para que igual toque el borde inferior de la ventana en una
     pagina corta, el body es una columna flexible y el <main> es lo unico
     que crece. Es el mismo resultado que daba la franja reservada de antes,
     pero sin un alto fijo que habia que corregir en cada breakpoint cada vez
     que el pie cambiaba de contenido. */
  display: flex;
  flex-direction: column;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
figure,
dl,
dd {
  margin: 0;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

img,
svg,
canvas,
video {
  display: block;
  max-width: 100%;
}

/* El <picture> solo existe para ofrecerle al navegador la version movil de la
   imagen: no tiene que aparecer en el layout. Con display:contents el <img>
   sigue siendo hijo directo de su contenedor y toda la maquetacion de arriba
   (flex, grid, alturas) funciona igual que cuando no habia <picture>. */
picture {
  display: contents;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  margin: 0;
  font: inherit;
  color: inherit;
  background: none;
  border: none;
}

button,
[type="button"],
[type="submit"],
[type="reset"] {
  cursor: pointer;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

[hidden] {
  display: none !important;
}

/* ===== FOCO DE TECLADO =====

   Una sola regla para todo el sitio. Antes cada componente apagaba el suyo
   con outline:none dentro del mismo bloque que el :hover (.btn-vermas,
   .cnt-btn, los botones flotantes), asi que navegar con Tab dejaba de mostrar
   donde estaba parado el foco: el contorno se apagaba tambien al recibirlo.

   Va con :focus-visible y no con :focus para que el anillo aparezca al
   tabular pero no al hacer clic con el mouse, que es lo que el navegador ya
   distingue por nosotros.

   El color sale de la paleta, asi que sigue viendose sobre cualquier marca y
   en los dos modos. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--color-acento);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.main-general {
  flex: 1 0 auto;
}

/* El fondo va aca y no en una clase de Bootstrap en el HTML: el <nav> tenia
   bg-white, que gana por especificidad y dejaba el header fuera de la paleta. */
.global-navbar {
  min-height: var(--global-header-height);
  background-color: var(--header-fondo);
  border-bottom: 1px solid var(--color-borde);
}

.global-navbar .navbar-brand {
  display: inline-flex;
  align-items: center;
  padding-top: 0;
  padding-bottom: 0;
}

.global-navbar .navbar-logo {
  height: 48px;
  width: auto;
  display: block;
}

.global-navbar .nav-link {
  position: relative;
  z-index: 1;
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-sm);
  color: var(--header-texto);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  text-align: center;
  transition: color var(--duration-fast) var(--ease-standard);
}

/* :focus-visible y no :focus. Con :focus, el enlace en el que se acaba de
   hacer clic conserva el foco y por lo tanto el color de acento: quedaban dos
   opciones "marcadas" a la vez —la activa, con su recuadro, y la ultima
   tocada, con el texto de color— y la segunda no se apagaba hasta hacer clic
   en otro lado. Con :focus-visible el color aparece al tabular, que es cuando
   hace falta ver donde esta parado el teclado, y no se queda pegado tras un
   clic con el mouse. Es el mismo criterio de la regla de foco general del
   sitio, mas arriba. */
.global-navbar .nav-link:hover,
.global-navbar .nav-link:focus-visible,
.global-navbar .nav-link.show {
  color: var(--header-activo);
}

/* Opcion del menu que corresponde a la pagina actual: un poco mas opaca y con
   las esquinas redondeadas. Es el estado de reposo — sin JS, sin hover — y
   sigue funcionando si /skins/page/js/menu-indicador.js no llega a cargar.
   Cuando si carga, el indicador deslizante (mas abajo) se para encima y esta
   capa queda debajo, invisible pero como respaldo. */
.global-navbar .nav-link.active {
  color: var(--header-activo);
  background-color: color-mix(in srgb, var(--header-activo) 12%, transparent);
}

/* El icono del boton de menu en movil es un SVG de Bootstrap con el color
   quemado adentro, asi que con un header oscuro desaparecia. Se dibuja como
   mascara para que tome currentColor y siga al texto del header. */
.global-navbar .navbar-toggler {
  color: var(--header-texto);
  border-color: var(--color-borde);
}

.global-navbar .navbar-toggler-icon {
  background-image: none;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='black' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='black' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") center / 100% 100% no-repeat;
}

/* El desplegable del menu no se apoya sobre el header sino sobre el contenido,
   asi que usa los colores de caja y no los del header. */
.global-navbar .dropdown-menu {
  background-color: var(--color-fondo-alterno);
  border-color: var(--color-borde);
}

.global-navbar .dropdown-item {
  color: var(--color-texto);
}

.global-navbar .dropdown-item:hover,
.global-navbar .dropdown-item:focus {
  color: var(--color-acento);
  background-color: var(--color-acento-light);
}

/* ===== INDICADOR DE LA OPCION ACTIVA =====

   .nav-menu es el <ul>: position:relative para que el indicador (position:
   absolute) se ubique con las mismas coordenadas que usa
   /skins/page/js/menu-indicador.js (offsetLeft/offsetTop/offsetWidth de cada
   <a>, que son relativos al <ul> justamente porque es el ancestro posicionado
   mas cercano).

   Marca UNA sola cosa: en que seccion o pagina esta parado el visitante. No
   sigue al mouse — lo que responde al puntero y al teclado es el color del
   texto, mas arriba. Cuando el recuadro hacia las dos cosas, pasar el mouse
   por una opcion se veia igual que tenerla seleccionada.

   El indicador nace en 0x0 y transparente: hasta que el script no mide la
   opcion activa no tiene donde pararse, y por eso arranca invisible en vez de
   saltar desde la esquina. Si el script no llega a cargar, la opcion activa
   ya se ve por su propia clase .active (arriba), asi que no depende de esto. */
.nav-menu {
  position: relative;
}

.nav-menu-indicador {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border-radius: var(--radius-md);
  background-color: color-mix(in srgb, var(--header-activo) 12%, transparent);
  opacity: 0;
  pointer-events: none;
  z-index: 0;
  /* Solo la opacidad, y con --ease-out porque lo que hace es entrar y salir.

     Antes tambien animaba transform, width y height, y por eso el indicador
     se deslizaba de una opcion a la otra pasando por encima de las del medio:
     un clic en la ultima del menu se veia como si fuera eligiendo una por una
     las anteriores. Ahora se apaga donde esta y aparece en la nueva, que es lo
     que de verdad ocurre al saltar a una seccion.

     menu-indicador.js lee esta duracion para saber cuanto esperar antes de
     reubicarlo: si cambia aca, cambia sola alla. */
  transition: opacity var(--duration-fast) var(--ease-out);
}

.nav-menu-indicador.visible {
  opacity: 1;
}

.nav-menu-indicador.sin-transicion {
  transition: none;
}

/* Con el indicador ya inicializado, la version estatica de .active se apaga:
   el que se ve moverse es el indicador, no dos capas superpuestas. */
.nav-menu.js-listo .nav-link.active {
  background-color: transparent;
}

@media (prefers-reduced-motion: reduce) {
  .nav-menu-indicador {
    transition: none;
  }
}

/* ===== DERECHA DEL HEADER: boton de tema =====

   Es lo unico que queda de este lado; el centrado real del menu (mas abajo)
   ya no depende de su ancho. */

.header-derecha {
  margin-left: auto;
}

/* ===== CENTRADO REAL DEL MENU =====

   Con flexbox (lo que trae Bootstrap por default) el menu se centra en el
   espacio que sobra *dentro* de .navbar-collapse, y ese espacio no es el
   ancho completo del header: .navbar-collapse arranca despues del logo y
   termina donde termina su propio contenido, asi que el menu quedaba corrido
   hacia la derecha en vez de centrado en el header entero.

   La solucion es un grid de 3 columnas en el .container — logo | menu | boton
   de tema — con las columnas de los costados a `1fr` cada una: por mas que el
   logo y el boton midan distinto, las dos reciben el mismo ancho y el menu
   (columna central, `auto`) queda exactamente en el medio.

   `display:contents` en `.navbar-collapse` es lo que permite esto: sin el, el
   <ul> y `.header-derecha` seguirian anidados un nivel mas abajo y no podrian
   ser columnas del grid del `.container`. Solo aplica a partir de 992px
   porque es el mismo breakpoint de `navbar-expand-lg`: por debajo, el menu se
   despliega apilado y el grid no tiene sentido. */
@media (min-width: 992px) {
  .global-navbar .container {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    column-gap: var(--space-4);
  }

  /* !important: Bootstrap fuerza "display:flex !important" en
     .navbar-expand-lg .navbar-collapse, y sin igualar esa especificidad el
     "contents" de aca nunca ganaba — el <ul> y .header-derecha se quedaban
     adentro del flex de .navbar-collapse en vez de volverse columnas del
     grid del .container, y el boton de tema terminaba pegado al menu en vez
     de a la derecha del todo. */
  .global-navbar .navbar-collapse {
    display: contents !important;
  }

  .global-navbar .navbar-brand {
    grid-column: 1;
    justify-self: start;
  }

  .global-navbar .nav-menu {
    grid-column: 2;
    justify-self: center;
  }

  .global-navbar .header-derecha {
    grid-column: 3;
    justify-self: end;
    margin-left: 0;
  }
}

/* ===== BOTON DE MODO CLARO / OSCURO =====

   Vive en el header, a la derecha del todo.

   El markup trae los dos iconos (luna y sol) y aca se muestra uno solo: el del
   modo al que se va a cambiar. La clase .es-oscuro la pone /skins/tema.js
   cuando lo que se esta viendo es el modo oscuro — venga de la eleccion del
   usuario o de la preferencia del sistema. */
.boton-tema {
  /* Los dos iconos ocupan la misma celda del grid, asi el boton no cambia de
     tamaño al alternar y no hace falta position:absolute ni alto fijo. */
  display: inline-grid;
  grid-template-areas: "icono";
  place-items: center;
  width: 36px;
  height: 36px;
  color: var(--header-texto);
  background-color: transparent;
  border: 1px solid var(--color-borde);
  border-radius: 50%;
  font-size: var(--font-size-sm);
  transition: color var(--duration-fast) var(--ease-standard),
    background-color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard);
}

.boton-tema:hover,
.boton-tema:focus-visible {
  color: var(--header-activo);
  background-color: var(--color-acento-light);
  border-color: var(--color-acento-borde);
}

.boton-tema .icono-tema {
  grid-area: icono;
}

.boton-tema .icono-tema-claro {
  display: none;
}

.boton-tema.es-oscuro .icono-tema-oscuro {
  display: none;
}

.boton-tema.es-oscuro .icono-tema-claro {
  display: block;
}

/* ===== PIE DEL SITIO (partials/footer.php) =====

   Hasta cuatro columnas — marca, navegacion, enlaces de interes y contacto —
   y debajo una linea con el aviso legal. El parcial dibuja solo las columnas
   que tienen contenido y la grilla reparte el ancho entre las que quedaron
   (auto-fit), asi que no hace falta una clase distinta por combinacion.

   El pie ya no es una barra fija: se recorre con la pagina y cierra el
   documento. Lo separa del contenido la linea de arriba, no una sombra.

   Los colores son los tres que se administran en /administracion/paleta
   (--footer-fondo, --footer-texto, --footer-enlace). Los grises intermedios
   salen del propio texto del pie con color-mix y no de --color-texto-suave:
   el pie puede estar pintado de un color distinto al del resto del sitio, y
   un gris pensado para el fondo claro se perderia encima. La declaracion
   opaca va primero como respaldo para el navegador sin color-mix. */
.site-footer {
  background: var(--footer-fondo);
  color: var(--footer-texto);
  border-top: 1px solid var(--color-borde);
  flex-shrink: 0;
}

.site-footer-cols {
  display: grid;
  grid-template-columns: minmax(240px, 1.4fr) repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-6) var(--space-7);
  padding-top: var(--space-7);
  padding-bottom: var(--space-6);
}

.footer-col-marca {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
}

.footer-logo img {
  height: 44px;
  width: auto;
}

/* Texto que carga el administrador (Informacion, campo del pie). Va con
   richText, asi que puede traer parrafos: el margen entre ellos se resuelve
   aca porque el reset de mas arriba deja todos los <p> en cero. */
.footer-texto {
  max-width: 44ch;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
  color: var(--footer-texto);
  color: color-mix(in srgb, var(--footer-texto) 75%, transparent);
}

.footer-texto p {
  margin: 0 0 var(--space-2);
}

.footer-texto p:last-child {
  margin-bottom: 0;
}

.footer-redes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* Sin mayusculas sostenidas ni letter-spacing: el titulo de una columna se
   distingue por peso y color, que es lo que lo separa de sus enlaces sin
   convertirlo en el eyebrow que DESIGN.md descarta. */
.footer-titulo {
  margin: 0 0 var(--space-4);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--footer-texto);
}

.footer-lista,
.footer-datos {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.footer-lista a,
.footer-datos a,
.footer-datos li {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-base);
  color: var(--footer-texto);
  color: color-mix(in srgb, var(--footer-texto) 75%, transparent);
}

.footer-lista a,
.footer-datos a {
  transition: color var(--duration-fast) var(--ease-standard);
}

.footer-lista a:hover,
.footer-lista a:focus,
.footer-datos a:hover,
.footer-datos a:focus {
  color: var(--footer-enlace);
}

.footer-datos li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

/* Ancho fijo para que los textos de la columna arranquen todos en la misma
   linea vertical aunque los iconos midan distinto. */
.footer-dato-icono {
  flex-shrink: 0;
  width: 16px;
  margin-top: 3px;
  text-align: center;
  font-size: var(--font-size-xs);
  color: var(--footer-enlace);
}

.site-footer-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2) var(--space-5);
  padding-top: var(--space-4);
  padding-bottom: var(--space-4);
  border-top: 1px solid var(--color-borde);
  font-size: var(--font-size-xs);
  color: var(--footer-texto);
  color: color-mix(in srgb, var(--footer-texto) 70%, transparent);
}

.site-footer-legal a {
  color: var(--footer-enlace);
  font-weight: var(--font-weight-medium);
}

.site-footer-legal a:hover,
.site-footer-legal a:focus {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Los iconos de redes viven solo en el pie, pero la clase sigue siendo
   generica: es un boton circular de icono, no "el icono del pie". */
.social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--color-borde);
  border-radius: 50%;
  color: var(--footer-enlace);
  background: transparent;
  font-size: var(--font-size-sm);
  transition: color var(--duration-fast) var(--ease-standard),
    background-color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard);
}

.social-link:hover,
.social-link:focus {
  color: var(--footer-fondo);
  background: var(--footer-enlace);
  border-color: var(--footer-enlace);
}

@media (max-width: 991.98px) {
  html {
    --global-header-height: 68px;
  }

  /* En movil el menu queda vertical y esto pasa a la fila de abajo: separarlo
     con una linea, igual que antes hacian los iconos de redes. */
  .header-derecha {
    margin-left: 0;
    border-top: 1px solid var(--color-borde);
    margin-top: var(--space-2);
    padding-top: var(--space-3);
  }

  /* La marca deja de compartir fila con las columnas de enlaces: en tablet
     esas entran solas y la primera se quedaba sin ancho. */
  .site-footer-cols {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  }

  .footer-col-marca {
    grid-column: 1 / -1;
  }
}

@media (max-width: 575.98px) {
  .site-footer-cols {
    grid-template-columns: 1fr;
    gap: var(--space-6);
    padding-top: var(--space-6);
  }

  /* En una pantalla angosta las dos lineas del aviso legal no entran a los
     costados: una debajo de la otra en vez de dejar que la segunda se corte. */
  .site-footer-legal {
    flex-direction: column;
    gap: var(--space-1);
  }
}

/* ===== BOTONES FLOTANTES (partials/adicionales.php) ===== */
/* Columna fija abajo a la derecha. Antes se levantaba el alto del pie fijo;
   ahora el pie se va con el scroll y los botones se apoyan en el borde. */
/* Flotan de verdad sobre el contenido, asi que son de los pocos elementos que
   se ganan la sombra grande de la escala. */
.floating-btn {
  position: fixed;
  right: var(--space-5);
  bottom: var(--space-5);
  z-index: 1040;
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-end;
  gap: var(--space-3);
  pointer-events: none;
}

/* Antes era vidrio esmerilado con blancos fijos: sobre una foto clara el
   boton desaparecia, y en modo oscuro un velo blanco al 18% quedaba como una
   mancha. Ahora es una caja opaca de la paleta, que es ademas lo que hace que
   el icono se lea siempre igual. */
.floating-btn>a {
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-width: 56px;
  min-height: 56px;
  padding: 0 var(--space-4);
  border-radius: var(--radius-pill);
  background-color: var(--color-fondo-alterno);
  border: 1px solid var(--color-borde);
  color: var(--color-texto);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-tight);
  text-decoration: none;
  box-shadow: var(--shadow-lg);
  transition: border-color var(--duration-fast) var(--ease-standard),
    background-color var(--duration-fast) var(--ease-standard);
}

/* Tinte opcional con el color cargado en el admin. Va como borde y no como
   velo encima del fondo: asi el color se ve igual de nitido en los dos modos
   en vez de mezclarse con el blanco o el negro de abajo. */
.floating-btn>a[style*="--boton-flotante-tinte"] {
  border-color: var(--boton-flotante-tinte);
}

.floating-btn>a:hover,
.floating-btn>a:focus-visible {
  color: var(--color-texto);
  background-color: var(--color-fondo);
  border-color: var(--color-acento);
}

.floating-btn>a span {
  white-space: nowrap;
}

.floating-btn>a img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  flex-shrink: 0;
}

/* Solo icono (sin texto): boton circular, icono a maximo tamaño. */
.floating-btn>a:not(:has(span)) {
  width: 56px;
  padding: 0;
}



@media (max-width: 767.98px) {
  .floating-btn {
    right: var(--space-3);
    bottom: var(--space-3);
    gap: var(--space-2);
  }

  .floating-btn>a {
    min-width: 52px;
    min-height: 52px;
    padding: 0 var(--space-3);
    font-size: var(--font-size-sm);
  }

  .floating-btn>a:not(:has(span)) {
    width: 52px;
  }

  .floating-btn>a img {
    width: 28px;
    height: 28px;
  }

  .floating-btn>a:not(:has(span)) img {
    width: 32px;
    height: 32px;
  }
}

/* ===== BANNER PRINCIPAL — Full width sticky ===== */
.slider-principal {
  position: sticky;
  top: 0;
  z-index: 20;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  overflow: hidden;
}

.slider-principal .carousel,
.slider-principal .carousel-inner,
.slider-principal .carousel-item,
.slider-principal .fondo-imagen,
.slider-principal .fondo-imagen-responsive,
.slider-principal .fondo-video-youtube,
.slider-principal .banner-video-youtube {
  width: 100%;
}

.slider-principal .fondo-imagen img,
.slider-principal .fondo-imagen-responsive img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* ===== BANNER INTERNAS — Estilos específicos =====
   A diferencia del principal, este banner es una franja de alto fijo: el
   contenido de la pagina empieza siempre a la misma altura sin importar que
   imagen cargo el administrador ni cuantos slides haya. */
.slider-internas {
  /* Un solo valor gobierna el alto de toda la franja; el resto de las reglas
     solo lo leen. Para cambiar la altura se toca aca (o el override de cada
     breakpoint mas abajo) y nada mas.
     clamp() lo hace responsive sin media queries en el rango intermedio: crece
     con el ancho de la ventana pero nunca baja de 220px ni pasa de 400px. */
  --banner-internas-alto: clamp(220px, 24vw, 400px);
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  overflow: hidden;
  position: relative;
}

/* Toda la cadena carousel → item → contenedor de imagen tiene que medir lo
   mismo: si un solo eslabon queda en alto automatico, la franja vuelve a
   depender del alto del archivo subido. */
.slider-internas .carousel,
.slider-internas .carousel-inner,
.slider-internas .carousel-item,
.slider-internas .fondo-imagen,
.slider-internas .fondo-imagen-responsive,
.slider-internas .fondo-video-youtube,
.slider-internas .banner-video-youtube {
  width: 100%;
  height: var(--banner-internas-alto);
}

/* La imagen llena la franja y se recorta por el centro. Antes iba con
   height:auto, y con alto automatico object-fit no hace nada: el alto lo
   terminaba decidiendo la proporcion del archivo. */
.slider-internas .fondo-imagen img,
.slider-internas .fondo-imagen-responsive img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Carousel controls mejorados para internas.
   Los blancos y negros de aca abajo no salen de la paleta a proposito: van
   encima de las fotos del banner, donde lo unico que garantiza que se vean es
   el contraste contra la imagen, no el color de marca. */
.slider-internas .carousel-control-prev,
.slider-internas .carousel-control-next {
  width: 44px;
  height: 44px;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.4);
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.5);
  transition: background-color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard);
  display: flex;
  align-items: center;
  justify-content: center;
}

.slider-internas .carousel-control-prev {
  left: var(--space-4);
}

.slider-internas .carousel-control-next {
  right: var(--space-4);
}

/* Solo cambia el contraste. Antes ademas crecia un 10%: un control de
   navegacion que se agranda al acercarsele es movimiento sin informacion. */
.slider-internas .carousel-control-prev:hover,
.slider-internas .carousel-control-next:hover {
  background: rgba(0, 0, 0, 0.65);
  border-color: #ffffff;
}

.slider-internas .carousel-control-prev-icon,
.slider-internas .carousel-control-next-icon {
  width: 20px;
  height: 20px;
  background-size: 100%;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

/* Indicadores de carousel (dots) — internas */
.slider-internas .carousel-indicators {
  position: absolute;
  bottom: var(--space-4);
  left: 50%;
  transform: translateX(-50%);
  gap: var(--space-2);
  margin: 0;
  padding: 0;
}

.slider-internas .carousel-indicators [data-bs-target] {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  border: none;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard),
    opacity var(--duration-fast) var(--ease-standard);
  opacity: 0.7;
}

/* El punto activo se distingue por opacidad y contraste, sin agrandarse: una
   fila de puntos donde uno mide distinto se lee como un error de alineacion. */
.slider-internas .carousel-indicators .active,
.slider-internas .carousel-indicators [data-bs-target]:hover {
  background: #ffffff;
  opacity: 1;
}

/* Enlaces del banner internas */
.slider-internas .carousel-item a {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* Ajustes responsivos para bannerinternas */
@media (max-width: 767.98px) {

  /* Debajo de 768px entra la imagen responsive, que suele ser mas vertical que
     la de escritorio, asi que la franja se define aparte y no por el clamp. */
  .slider-internas {
    --banner-internas-alto: 240px;
  }

  .slider-internas .carousel-control-prev,
  .slider-internas .carousel-control-next {
    width: 40px;
    height: 40px;
  }

  .slider-internas .carousel-control-prev {
    left: var(--space-2);
  }

  .slider-internas .carousel-control-next {
    right: var(--space-2);
  }

  .slider-internas .carousel-indicators {
    bottom: var(--space-3);
    gap: var(--space-2);
  }
}

@media (max-width: 575.98px) {
  .slider-internas {
    --banner-internas-alto: 190px;
  }

  .slider-internas .carousel-control-prev,
  .slider-internas .carousel-control-next {
    width: 36px;
    height: 36px;
  }

  .slider-internas .carousel-indicators {
    bottom: var(--space-2);
    gap: var(--space-1);
  }
}

/* ===== PAGINA DE CONTACTO (page/Views/contacto) =====

   Dos paneles: a la izquierda los datos del sitio sobre el color de marca, a
   la derecha el formulario sobre una caja clara. Todo cuelga de la paleta, asi
   que cambiar la marca en el administrador repinta tambien esta pagina.

   --cnt-on-brand es el color de lo que va ENCIMA del panel de marca. Donde
   antes habia un rgba(255, 255, 255, .78) para bajarle el peso a un texto,
   ahora va color-mix sobre ese mismo color, precedido de la version opaca:
   un navegador que no entienda color-mix se queda con la primera y el texto
   sigue siendo legible, solo que sin el matiz.

   El panel de marca ya no lleva los dos circulos translucidos que tenia de
   fondo: eran decoracion sin funcion, del tipo que hace que un bloque de
   color se lea como plantilla. Un bloque de color plano es mas serio y ademas
   deja que el texto sea lo unico que se mira. */
.cnt-wrap {
  --cnt-brand: var(--color-acento);
  --cnt-brand-hover: var(--color-acento-hover);
  --cnt-on-brand: var(--color-acento-contraste);
  --cnt-text: var(--color-texto);
  --cnt-text-soft: var(--color-texto-suave);
  --cnt-border: var(--color-borde);
  --cnt-error: #c0392b;
}

.cnt-section {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  min-height: 520px;
}

/* ── Panel izquierdo ── */
.cnt-left {
  background: var(--cnt-brand);
  color: var(--cnt-on-brand);
  padding: var(--space-8) var(--space-7);
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

/* Contenido del editor (Informacion Contacto, en el panel de administracion).
   Se fuerza el color heredado porque el editor guarda parrafos con estilos
   pensados para fondo claro y aca el fondo es la marca. */
.cnt-left-info {
  margin-bottom: var(--space-7);
  position: relative;
  z-index: 1;
}

.cnt-left-info * {
  color: inherit;
}

.cnt-left-info h1,
.cnt-left-info h2,
.cnt-left-info h3 {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-4);
}

.cnt-left-info p {
  font-size: var(--font-size-base);
  color: var(--cnt-on-brand);
  color: color-mix(in srgb, var(--cnt-on-brand) 78%, transparent);
  line-height: var(--line-height-relaxed);
  max-width: 38ch;
  margin: 0 0 var(--space-2);
}

.cnt-info-list {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.cnt-info-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--font-size-sm);
  color: var(--cnt-on-brand);
  color: color-mix(in srgb, var(--cnt-on-brand) 82%, transparent);
  line-height: var(--line-height-base);
}

/* Cuadrado de esquinas suaves y no circulo: es un icono de dato, no un avatar
   ni un boton. Ese es todo el criterio para elegir el radio de un icono. */
.cnt-info-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.16);
  background: color-mix(in srgb, var(--cnt-on-brand) 16%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--cnt-on-brand);
  font-size: var(--font-size-xs);
}

.cnt-info-link {
  color: var(--cnt-on-brand);
  color: color-mix(in srgb, var(--cnt-on-brand) 82%, transparent);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  transition: color var(--duration-fast) var(--ease-standard);
}

.cnt-info-link:hover,
.cnt-info-link:focus {
  color: var(--cnt-on-brand);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── Panel derecho (formulario) ── */
.cnt-right {
  background: var(--color-fondo-alterno);
  padding: var(--space-8) var(--space-8);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.cnt-form-header {
  margin-bottom: var(--space-7);
}

/* El titulo va solo. Antes lo precedia un "FORMULARIO DE CONTACTO" en
   mayusculas sostenidas y con letter-spacing: no aportaba nada que el titulo
   de abajo no dijera, y es la primera seña de plantilla que se nota. */
.cnt-form-title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--cnt-text);
  margin: 0;
  line-height: var(--line-height-tight);
  letter-spacing: -0.01em;
}

.cnt-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.cnt-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
}

/* Honeypot: fuera de la pantalla y no display:none, porque los bots que miran
   el CSS descartan lo que esta oculto y volverian a pasar el filtro. */
.cnt-honeypot {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.cnt-field {
  position: relative;
}

.cnt-field input,
.cnt-field textarea {
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--cnt-border);
  padding: var(--space-2) 0;
  font-size: var(--font-size-base);
  color: var(--cnt-text);
  background: transparent;
  outline: none;
  transition: border-color var(--duration-fast) var(--ease-standard);
  resize: none;
}

.cnt-field textarea {
  min-height: 110px;
}

.cnt-field input:focus,
.cnt-field textarea:focus {
  border-bottom-color: var(--cnt-brand);
}

/* El campo tiene su propio anillo de foco: como el borde de abajo ya cambia
   de color, el outline general del sitio se apagaria contra el subrayado.
   :focus-visible, asi que solo aparece al tabular. */
.cnt-field input:focus-visible,
.cnt-field textarea:focus-visible {
  outline: none;
  box-shadow: 0 1px 0 0 var(--cnt-brand);
}

.cnt-field label {
  position: absolute;
  top: var(--space-2);
  left: 0;
  font-size: var(--font-size-sm);
  color: var(--cnt-text-soft);
  pointer-events: none;
  transition: top var(--duration-fast) var(--ease-standard),
    font-size var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard);
}

/* La etiqueta sube cuando el campo tiene foco o contenido. Depende de que el
   input lleve placeholder=" " (un espacio): sin el, :placeholder-shown nunca
   es falso y la etiqueta se queda encima del texto escrito.

   Arriba queda en minusculas. Antes se convertia en una etiqueta en
   mayusculas con letter-spacing, que es el mismo recurso del eyebrow: llama
   la atencion sobre el nombre del campo, que es lo que menos importa una vez
   que el campo esta lleno. */
.cnt-field input:focus~label,
.cnt-field input:not(:placeholder-shown)~label,
.cnt-field textarea:focus~label,
.cnt-field textarea:not(:placeholder-shown)~label {
  top: calc(var(--space-4) * -1);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--cnt-text-soft);
}

.cnt-field input:focus~label,
.cnt-field textarea:focus~label {
  color: var(--cnt-brand);
}

.cnt-field-line {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--cnt-brand);
  transition: width var(--duration-base) var(--ease-standard);
}

.cnt-field input:focus~.cnt-field-line,
.cnt-field textarea:focus~.cnt-field-line {
  width: 100%;
}

.cnt-required {
  color: var(--cnt-brand);
  font-size: var(--font-size-xs);
  vertical-align: super;
}

/* ── Campo de seleccion ──
   Un <select> no tiene :placeholder-shown, asi que la etiqueta flotante de los
   demas campos no se puede reutilizar: la primera opcion ya ocupa la linea
   desde el primer momento y la etiqueta se leeria encima de ella. Aca la
   etiqueta va en el flujo, arriba y fija, que es donde termina la de los otros
   campos una vez llenos; el resultado se alinea con la columna igual.

   appearance:none saca el control nativo — en cada sistema trae su propio
   ancho, fondo y radio, y era lo unico del formulario que no seguia la linea
   de abajo del resto. La flecha la dibuja ::after con pointer-events:none,
   para que el clic siga llegando al select y no se lo coma el adorno. */
.cnt-field-select>label {
  position: static;
  display: block;
  margin-bottom: var(--space-1);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--cnt-text-soft);
}

.cnt-field select {
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--cnt-border);
  padding: var(--space-2) var(--space-5) var(--space-2) 0;
  font-size: var(--font-size-base);
  font-family: inherit;
  color: var(--cnt-text);
  background: transparent;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-standard);
}

/* Mientras no se eligio nada, el unico valor posible es la opcion vacia, que
   es la que hace invalido al campo: el texto se ve como una indicacion y no
   como una respuesta ya dada. */
.cnt-field select:invalid {
  color: var(--cnt-text-soft);
}

/* La lista desplegada la pinta el sistema, no la hoja: sin estos dos colores
   en modo oscuro sale texto oscuro sobre fondo oscuro en varios navegadores. */
.cnt-field select option {
  color: var(--cnt-text);
  background: var(--color-fondo);
}

.cnt-field select:focus {
  border-bottom-color: var(--cnt-brand);
}

.cnt-field select:focus-visible {
  outline: none;
  box-shadow: 0 1px 0 0 var(--cnt-brand);
}

.cnt-field select:focus~.cnt-field-line {
  width: 100%;
}

.cnt-field-select {
  position: relative;
}

.cnt-field-select::after {
  content: "";
  position: absolute;
  right: var(--space-1);
  bottom: var(--space-4);
  width: 8px;
  height: 8px;
  border-right: 1px solid var(--cnt-text-soft);
  border-bottom: 1px solid var(--cnt-text-soft);
  transform: rotate(45deg);
  pointer-events: none;
}

.cnt-submit-row {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  margin-top: var(--space-2);
}

/* Es el mismo boton que .btn-vermas: mismo padding, mismo radio, mismo peso.
   Antes iba en mayusculas sostenidas con letter-spacing y una flecha al final,
   los tres tics que DESIGN.md marca; y era ademas el unico boton del sitio con
   esa forma, asi que el sitio tenia dos botones principales distintos. */
.cnt-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--cnt-brand);
  color: var(--cnt-on-brand);
  border: 1px solid var(--cnt-brand);
  padding: var(--space-2) var(--space-5);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-base);
  cursor: pointer;
  border-radius: var(--radius-md);
  transition: background-color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard);
}

.cnt-btn:hover {
  background: var(--cnt-brand-hover);
  border-color: var(--cnt-brand-hover);
  color: var(--cnt-on-brand);
}

.cnt-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.cnt-btn-spinner {
  display: none;
  width: 14px;
  height: 14px;
  border: 2px solid color-mix(in srgb, var(--cnt-on-brand) 35%, transparent);
  border-top-color: var(--cnt-on-brand);
  border-radius: 50%;
  animation: cntSpin 0.6s linear infinite;
}

@keyframes cntSpin {
  to {
    transform: rotate(360deg);
  }
}

.cnt-btn.loading .cnt-btn-spinner {
  display: inline-block;
}

.cnt-btn.loading .cnt-btn-text {
  opacity: 0.6;
}

.cnt-error-msg {
  display: none;
  font-size: var(--font-size-sm);
  color: var(--cnt-error);
}

.cnt-alert {
  display: none;
  align-items: flex-start;
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-base);
}

.cnt-alert.visible {
  display: flex;
}

.cnt-alert-icon {
  flex-shrink: 0;
  margin-top: 2px;
  font-size: var(--font-size-sm);
}

.cnt-alert-error {
  background: rgba(192, 57, 43, 0.08);
  border: 1px solid rgba(192, 57, 43, 0.28);
  color: var(--cnt-error);
}

/* ── Confirmacion de envio ──
   Esta si es una animacion con proposito: responde a una accion del visitante
   (mandar el formulario) y marca que la pantalla cambio de estado. */
.cnt-success {
  display: none;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-5);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--duration-base) var(--ease-standard),
    transform var(--duration-base) var(--ease-standard);
}

.cnt-success.visible {
  opacity: 1;
  transform: none;
}

.cnt-success-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--cnt-brand);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cnt-on-brand);
  font-size: var(--font-size-md);
}

.cnt-success-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--cnt-text);
  margin: 0;
}

.cnt-success-text {
  font-size: var(--font-size-base);
  color: var(--cnt-text-soft);
  line-height: var(--line-height-relaxed);
  max-width: 42ch;
  margin: 0;
}

.cnt-success-back {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--cnt-brand);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-top: var(--space-2);
}

.cnt-success-back:hover {
  color: var(--cnt-brand-hover);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── Aceptacion de politicas ── */
.cnt-check-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.cnt-check-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  user-select: none;
}

/* El checkbox nativo se oculta pero sigue en el flujo del formulario: es el
   que guarda el estado y el que recibe el foco del teclado. */
.cnt-check-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.cnt-check-box {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border: 1px solid var(--cnt-border);
  border-radius: var(--radius-sm);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard);
}

.cnt-check-input:checked~.cnt-check-box {
  background: var(--cnt-brand);
  border-color: var(--cnt-brand);
}

/* El foco de este control tiene que dibujarse sobre la caja falsa: el input
   real esta oculto, asi que el outline general del sitio no se veria. */
.cnt-check-input:focus-visible~.cnt-check-box {
  outline: 2px solid var(--color-acento);
  outline-offset: 2px;
}

/* El "tick" es media caja rotada 45 grados: dos bordes de un cuadrado. */
.cnt-check-input:checked~.cnt-check-box::after {
  content: '';
  display: block;
  width: 4px;
  height: 8px;
  border: 2px solid var(--cnt-on-brand);
  border-top: none;
  border-left: none;
  transform: rotate(45deg) translateY(-1px);
}

.cnt-check-text {
  font-size: var(--font-size-sm);
  color: var(--cnt-text-soft);
  line-height: var(--line-height-base);
}

.cnt-policy-link {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--cnt-brand);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cnt-policy-link:hover {
  color: var(--cnt-brand-hover);
}

.cnt-check-error {
  margin-left: var(--space-6);
}

/* ── Modal de politicas ──
   Flota de verdad sobre la pagina, asi que es de los pocos elementos que usan
   la sombra grande de la escala. */
.cnt-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 1050;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
}

.cnt-modal-overlay.active {
  display: flex;
}

.cnt-modal {
  background: var(--color-fondo-alterno);
  border-radius: var(--radius-lg);
  max-width: 640px;
  width: 100%;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  position: relative;
  box-shadow: var(--shadow-lg);
  animation: cntModalIn var(--duration-base) var(--ease-standard);
}

@keyframes cntModalIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.cnt-modal-close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  background: none;
  border: none;
  font-size: var(--font-size-base);
  color: var(--cnt-text-soft);
  cursor: pointer;
  padding: var(--space-1) var(--space-2);
  line-height: 1;
  transition: color var(--duration-fast) var(--ease-standard);
}

.cnt-modal-close:hover {
  color: var(--cnt-text);
}

.cnt-modal-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--cnt-text);
  margin: 0;
  padding: var(--space-6) var(--space-8) var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--cnt-border);
}

.cnt-modal-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-5) var(--space-6);
  font-size: var(--font-size-base);
  color: var(--cnt-text-soft);
  line-height: var(--line-height-relaxed);
}

.cnt-modal-body p {
  margin: 0 0 var(--space-3);
}

.cnt-modal-body p:last-child {
  margin-bottom: 0;
}

.cnt-modal-footer {
  padding: var(--space-5) var(--space-6);
  border-top: 1px solid var(--cnt-border);
  display: flex;
  justify-content: flex-end;
}

/* ── Responsive ──
   El corte iba en 900px, que no era ninguno de los tres breakpoints fijados.
   768px es el escalon de tablet y es donde la columna del formulario empieza
   a quedar angosta de verdad. */
@media (max-width: 767.98px) {
  .cnt-section {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .cnt-left,
  .cnt-right {
    padding: var(--space-7) var(--space-6);
  }

  .cnt-left-info h1,
  .cnt-left-info h2,
  .cnt-left-info h3 {
    font-size: var(--font-size-lg);
  }

  .cnt-form-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 575.98px) {

  .cnt-left,
  .cnt-right {
    padding: var(--space-6) var(--space-5);
  }

  .cnt-form-title {
    font-size: var(--font-size-lg);
  }

  .cnt-modal-title {
    padding: var(--space-5) var(--space-7) var(--space-3) var(--space-5);
    font-size: var(--font-size-md);
  }

  .cnt-modal-body,
  .cnt-modal-footer {
    padding: var(--space-4) var(--space-5);
  }
}

/* ===== MOVIMIENTO REDUCIDO =====
   Todo lo que anima en esta hoja se apaga de una sola vez. Las transiciones de
   color se dejan: no son movimiento y son las que avisan que un boton
   respondio al mouse. */
@media (prefers-reduced-motion: reduce) {

  html {
    scroll-behavior: auto;
  }

  .cnt-success,
  .cnt-field label,
  .cnt-field select,
  .cnt-field-line {
    transition: none;
  }

  .cnt-modal {
    animation: none;
  }

  .cnt-btn-spinner {
    animation-duration: 1.5s;
  }
}


/* ==========================================================================
   PESOS DE FUENTE DEL EDITOR
   ==========================================================================
   Las clases que aplica el desplegable "Estilos" de CKEditor sobre un <span>.
   Son el eje de pesos de la fuente, no un escalon de la escala tipografica del
   proyecto (por eso los numeros van sueltos y no salen de --font-weight-*):
   quien escribe el texto elige uno de los que ofrece el desplegable, 300 a 800.

   Tienen que coincidir con las de skins/administracion/css/global.css, que son
   las que se ven dentro del editor. Si aca falta una, el texto se ve de un peso
   al cargarlo y de otro al publicarlo. */

.peso-300 { font-weight: 300; }
.peso-400 { font-weight: 400; }
.peso-500 { font-weight: 500; }
.peso-600 { font-weight: 600; }
.peso-700 { font-weight: 700; }
.peso-800 { font-weight: 800; }


/* ==========================================================================
   IMAGENES Y TABLAS DEL EDITOR
   ==========================================================================
   Lo que CKEditor pinta como <figure> dentro de un texto rico. Dentro del
   panel se ve bien porque el editor carga sus propios estilos de contenido
   (.ck-content); el sitio publico no los tiene, asi que sin estas reglas una
   imagen "centrada" sale pegada a la izquierda: el <figure> es un bloque con
   ancho propio y margin 0, y la clase que la centra no significa nada.

   El centrado es el default, igual que en el editor: alinear a un costado son
   las clases image-style-*, que es lo unico que el editor guarda. */

figure.image {
  display: table;
  margin: var(--space-4) auto;
  max-width: 100%;
}

figure.image img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
}

/* Al redimensionar, el ancho queda en el style del <figure>; la imagen tiene
   que llenarlo o el arrastre no cambia nada. */
figure.image.image_resized img {
  width: 100%;
}

/* Bloque alineado a un costado: sigue ocupando su propia linea. */
figure.image.image-style-block-align-left {
  margin-left: 0;
  margin-right: auto;
}

figure.image.image-style-block-align-right {
  margin-left: auto;
  margin-right: 0;
}

/* Con texto alrededor. */
figure.image.image-style-align-left {
  float: left;
  margin: var(--space-2) var(--space-4) var(--space-3) 0;
}

figure.image.image-style-align-right,
figure.image.image-style-side {
  float: right;
  margin: var(--space-2) 0 var(--space-3) var(--space-4);
}

figure.image.image-style-side {
  max-width: 50%;
}

/* Imagen dentro del renglon, sin figure propio. */
img.image_resized,
.image-inline {
  max-width: 100%;
  height: auto;
}

figure.image figcaption,
figure.table figcaption {
  display: table-caption;
  caption-side: bottom;
  padding: var(--space-2) var(--space-1) 0;
  color: var(--color-texto-suave, #555);
  font-size: var(--font-size-sm);
  text-align: center;
}

/* La tabla del editor tiene el mismo problema: sin estas reglas sale sin
   bordes y pegada a la izquierda aunque el editor la muestre centrada. */
figure.table {
  display: table;
  margin: var(--space-4) auto;
  max-width: 100%;
  overflow-x: auto;
}

figure.table table {
  border-collapse: collapse;
  width: 100%;
}

figure.table table td,
figure.table table th {
  border: 1px solid var(--color-borde);
  padding: var(--space-2) var(--space-3);
}

/* Los flotantes no pueden desbordar el contenedor que los tiene. */
.contenedor-seccion .descripcion-seccion::after {
  content: "";
  display: block;
  clear: both;
}

@media (max-width: 575.98px) {
  /* En una columna angosta un flotante deja renglones de dos palabras. */
  figure.image.image-style-align-left,
  figure.image.image-style-align-right,
  figure.image.image-style-side {
    float: none;
    max-width: 100%;
    margin: var(--space-4) auto;
  }
}