/* La barra, el hero y cada sección. Sólo maquetación: los colores salen de las
   variables de base.css, así el modo oscuro no necesita ni una regla acá. */

/* ---- barra de navegación ---------------------------------------------- */

.barra {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--fondo);
  background: color-mix(in srgb, var(--fondo) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--borde);
}

.barra__interior {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  min-height: var(--alto-barra);
}

/* El nombre en mayúsculas y espaciado, como en el logo. */
.barra__marca {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--texto);
  text-decoration: none;
  white-space: nowrap;
}

.barra__logo {
  width: 2rem;
  height: 2rem;
  flex: none;
}

/* El botón que abre el menú. Lo crea navegacion.js, así que sin JavaScript no
   existe y la lista queda como antes: desplazándose de costado. */
.barra__boton {
  display: none;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-inline-start: auto;
  padding: 0;
  border: 1px solid var(--borde);
  border-radius: 999px;
  background: var(--fondo-alto);
  color: var(--texto);
  cursor: pointer;
}

.barra__nav {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  margin-inline-start: auto;
}

.barra__nav::-webkit-scrollbar {
  display: none;
}

.barra__lista {
  display: flex;
  gap: var(--e-1);
}

.barra__lista a {
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  padding-inline: var(--e-3);
  border-radius: 999px;
  color: var(--texto-suave);
  text-decoration: none;
  white-space: nowrap;
}

.barra__lista a:hover {
  color: var(--acento-fuerte);
  background: var(--fondo-alto);
}

/* La sección que se está viendo. La marca navegacion.js; sin JavaScript no se
   pierde nada, sólo esta ayuda visual. */
.barra__lista a[aria-current="true"] {
  background: var(--acento);
  color: var(--acento-contraste);
}

/* En el celular la barra se despliega para abajo. El desplegable cuelga de la
   barra, que al ser pegajosa ya es el ancla de lo que va posicionado adentro. */
@media (max-width: 47.99em) {
  .barra--desplegable .barra__boton {
    display: inline-flex;
  }

  .barra--desplegable .barra__nav {
    position: absolute;
    inset-inline: 0;
    top: 100%;
    display: none;
    margin: 0;
    /* Si alguna vez son muchos enlaces, el menú se desplaza en vez de tapar
       la pantalla entera. `svh` y no `vh`: en el celular `vh` miente. */
    max-height: calc(100svh - var(--alto-barra));
    overflow-y: auto;
    background: var(--fondo);
    border-bottom: 1px solid var(--borde);
    box-shadow: var(--sombra);
  }

  .barra--desplegable[data-menu="abierto"] .barra__nav {
    display: block;
  }

  .barra--desplegable .barra__lista {
    flex-direction: column;
    gap: var(--e-1);
    padding: var(--e-2) var(--margen) var(--e-3);
  }

  .barra--desplegable .barra__lista a {
    min-height: 3rem;
  }
}

/* ---- secciones --------------------------------------------------------- */

.seccion {
  padding-block: var(--e-6);
  scroll-margin-top: calc(var(--alto-barra) + var(--e-3));
}

/* La franja verde hoja de los posteos. Adentro el texto pasa a oscuro, y los
   controles que no son lámina se acomodan solos con las variables. */
.seccion--banda {
  --texto: var(--banda-texto);
  --texto-suave: var(--banda-texto);
  --foco: var(--banda-texto);
  background: var(--banda);
  color: var(--texto);
}

/* Cuando la sección es una lámina con arco, la franja sólo asoma alrededor:
   el aire de adentro lo pone la lámina. */
.seccion--lamina {
  padding-block: var(--e-5);
}

.seccion__bajada {
  color: var(--texto-suave);
  max-width: 60ch;
}

/* ---- lámina con arco --------------------------------------------------- */

/* La forma de los posteos: pegada a un borde de la pantalla y terminada en
   curva del otro lado, con la franja verde asomando alrededor. */
.lamina {
  --hueco: clamp(1.25rem, 5vw, 4rem);
  padding-block: var(--e-6);
  margin-inline-end: var(--hueco);
  border-radius: 0 var(--curva) var(--curva) 0;
}

.lamina--desde-derecha {
  margin-inline: var(--hueco) 0;
  border-radius: var(--curva) 0 0 var(--curva);
}

/* La lámina es más angosta que la página, así que centrar el contenido adentro
   lo correría de la columna de las otras secciones. Se calcula el ancho y el
   margen como si la lámina ocupara toda la página, sin salirse de ella. */
.lamina > .contenedor {
  --ancho: min(100% + var(--hueco) - 2 * var(--margen), var(--ancho-max));
  width: min(var(--ancho), 100% - 2 * var(--margen));
  margin-inline: calc((100% + var(--hueco) - var(--ancho)) / 2) 0;
}

.lamina--desde-derecha > .contenedor {
  margin-inline-start: max(var(--margen), (100% - var(--hueco) - var(--ancho)) / 2);
}

/* ---- hero -------------------------------------------------------------- */

.hero {
  display: flex;
  flex-direction: column;
  gap: var(--e-5);
  align-items: flex-start;
}

/* El título del hero es el <h1> de la página, pero se muestra del tamaño de un
   <h2>: manda lo que se lee, no lo que mide. */
.hero h1 {
  font-size: clamp(1.5rem, 1.25rem + 1.2vw, 2.1rem);
}

.hero__nombre {
  margin-bottom: var(--e-2);
  color: var(--acento);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.hero__bajada {
  font-size: 1.15rem;
  color: var(--texto-suave);
  max-width: 55ch;
}

.hero__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-3);
  margin: var(--e-4) 0 0;
}

/* Recortado en círculo con un aro, como la foto de perfil y el logo. En el
   celular va primero: la cara es lo que dice «hay una persona detrás». La
   imagen no se enfoca ni se lee distinto, así que moverla no cambia nada para
   el teclado ni el lector de pantalla. */
.hero__retrato {
  order: -1;
  width: min(60%, 13rem);
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
  box-shadow:
    0 0 0 0.4rem var(--panel),
    0 0 0 0.55rem var(--acento),
    var(--sombra);
}

@media (min-width: 40em) {
  .hero {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .hero__texto {
    flex: 1 1 28rem;
  }

  .hero__retrato {
    order: 0;
    width: min(40%, 20rem);
    /* Lejos del arco: si no, la curva le muerde el aro. */
    margin-inline-end: clamp(0rem, 6vw, 5rem);
  }
}

/* ---- dónde trabajo ----------------------------------------------------- */

.zona {
  display: grid;
  gap: var(--e-4);
}

.zona__caso {
  padding: var(--e-4);
  background: var(--fondo-alto);
  border: 1px solid var(--borde);
  border-radius: var(--radio-grande);
  /* El borde grueso de un solo lado repite el arco de las láminas en chico. */
  border-top: 0.4rem solid var(--acento);
}

.zona__caso h3 {
  margin-bottom: var(--e-2);
}

.zona__caso p {
  margin: 0;
  color: var(--texto-suave);
}

@media (min-width: 40em) {
  .zona {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ---- presupuesto y descuentos ------------------------------------------ */

/* Dos sub-secciones al lado: la calculadora y los descuentos de temporada. */
.dupla {
  display: grid;
  gap: var(--e-5);
  align-items: start;
}

.dupla__columna h2 {
  margin-bottom: var(--e-3);
}

/* El nombre de la temporada, arriba del texto, como el nombre en el hero. */
.temporada__nombre {
  margin-bottom: var(--e-2);
  color: var(--acento);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

@media (min-width: 48em) {
  .dupla {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--e-6);
  }
}

/* La advertencia de que el número es orientativo. Se despega del resto con el
   borde al costado, porque es lo único que no se puede pasar por alto. */
.aviso {
  max-width: 60ch;
  margin-block: var(--e-4);
  padding: var(--e-3) var(--e-4);
  border-inline-start: 0.25rem solid var(--acento);
  border-radius: 0 var(--radio) var(--radio) 0;
  background: var(--fondo-alto);
  color: var(--texto-suave);
}

/* ---- contacto ---------------------------------------------------------- */

/* Dos columnas: los datos, como en la tarjeta personal de Luca, y al lado los
   mismos destinos en botones grandes. En el celular van uno abajo del otro. */
.contacto {
  display: grid;
  gap: var(--e-5);
  align-items: start;
  margin-top: var(--e-4);
}

.datos {
  display: grid;
  gap: var(--e-1);
}

/* La fila entera es el enlace: en el celular, acertarle a una línea de texto
   suelta es mucho más difícil que a una franja de 52 px. */
.dato__cuerpo {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  min-height: 3.25rem;
  padding: var(--e-2) var(--e-3) var(--e-2) var(--e-2);
  border-radius: 999px;
  color: var(--texto);
  text-decoration: none;
}

/* Un velo del acento y no `--fondo-alto`: adentro del panel esa variable es el
   color del panel, así que el hover no se veía. */
.dato__cuerpo--enlace:hover {
  background: var(--borde);
  background: color-mix(in srgb, var(--acento) 16%, transparent);
  color: var(--acento-fuerte);
}

.dato__icono {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--acento);
  color: var(--acento-contraste);
}

.dato__dibujo {
  width: 1.35rem;
  height: 1.35rem;
}

.dato__texto {
  min-width: 0;
  word-break: break-word;
}

.dato__etiqueta {
  font-weight: 700;
}

/* En vertical: quedan como una columna de atajos al costado de los datos. */
.atajos {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
}

/* En el celular flotan en el borde de abajo a la derecha, a mano en cualquier
   parte de la página: escribir tiene que ser un solo toque. */
@media (max-width: 47.99em) {
  .atajos {
    position: fixed;
    right: max(var(--e-3), env(safe-area-inset-right));
    bottom: max(var(--e-3), env(safe-area-inset-bottom));
    z-index: 60;
    /* Los mismos colores estén adentro o afuera de una lámina oscura. */
    --acento: var(--panel-acento);
    --acento-contraste: var(--panel-contraste);
    --borde: var(--panel-borde);
  }

  /* Un poco más chicos que en la sección: flotando tapan texto, y lo que se
     toca sigue arriba de los 44 px. */
  .atajos {
    gap: var(--e-2);
  }

  .atajos .boton {
    width: 3rem;
    height: 3rem;
    min-height: 3rem;
    box-shadow: var(--sombra);
  }

  /* Para que los botones flotantes no tapen el final de la página ni el
     renglón del pie que les queda justo al lado. */
  body {
    padding-bottom: 5rem;
  }

  .pie__interior {
    padding-inline-end: 3.75rem;
  }
}

/* En las otras páginas los atajos existen sólo para flotar. */
@media (min-width: 48em) {
  .atajos--solo-celular {
    display: none;
  }
}

@media (min-width: 40em) {
  .contacto {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--e-6);
  }
}

/* ---- pie --------------------------------------------------------------- */

/* El verde casi negro del logo, en los dos temas: cierra la página igual que
   el fondo del logo cierra el círculo. */
.pie {
  --panel: var(--pie);
  padding-block: var(--e-5);
  font-size: 0.95rem;
}

.pie__interior {
  display: grid;
  gap: var(--e-3);
}

.pie p {
  margin: 0;
  color: var(--texto-suave);
}

.pie__atajos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-4);
}

.pie__nota {
  font-size: 0.9rem;
  opacity: 0.85;
}

@media (min-width: 40em) {
  .pie__interior {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }

  /* La nota ocupa el ancho entero, debajo de las dos columnas. */
  .pie__nota {
    grid-column: 1 / -1;
  }
}