/* AGO WORKS — landing (§8.4 del manual de marca)
 *
 * Modo oscuro como base. El sistema claro esta definido en las variables por si
 * algun dia se agrega el conmutador, tal y como pide la nota tecnica del §8.4.
 *
 * Las reglas que gobiernan este archivo:
 *   §7.5  vino <= 8% de la superficie · nunca texto vino sobre fondo oscuro
 *   §7.6  dos familias, maximo dos pesos por pieza mas el mono
 *   §7.7  esquinas vivas, un solo radio de 2px, escala de 8px, cero degradados
 * =========================================================================== */

/* --- Tipografia ----------------------------------------------------------- */

@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-variable.woff2") format("woff2-variations");
  font-weight: 400 800;
  font-stretch: 100%;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/ibm-plex-mono-medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/ibm-plex-mono-semibold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* --- Fichas --------------------------------------------------------------- */

:root {
  /* Paleta oficial §7.5. Identica a marca/paleta.css: si un color no esta
   * aqui, no existe. */
  --tinta: #0e1a2b;
  --vino: #8c2a38;
  --hueso: #ede8e0;
  --tinta-alta: #1b2c42;
  --grafito: #26313f;
  --acero: #7a899c;
  --acero-oscuro: #4a5568;
  --hueso-puro: #f7f4ef;
  --vino-oscuro: #6e1f2b;
  --vino-claro: #c2515f;

  /* Roles del modo oscuro, que es el de esta pagina */
  --fondo: var(--tinta);
  --fondo-elevado: var(--tinta-alta);
  --texto: var(--hueso);
  --texto-secundario: var(--acero);
  --linea: rgba(122, 137, 156, 0.28);
  --reticula: rgba(122, 137, 156, 0.2); /* §7.7: Acero al 20% */

  /* Escala de 8px §7.7 */
  --e1: 8px;
  --e2: 16px;
  --e3: 24px;
  --e4: 32px;
  --e5: 48px;
  --e6: 64px;
  --e7: 96px;

  --radio: 2px; /* el unico permitido */
  --ancho: 1200px;
  --prosa: 68ch; /* §7.6 regla 4: 60-75 caracteres */

  --archivo: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

/* --- Base ----------------------------------------------------------------- */

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

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

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

body {
  margin: 0;
  overflow-wrap: break-word;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--archivo);
  font-weight: 400;
  font-size: 17px;
  line-height: 28px; /* §7.6 cuerpo */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, p, ul, ol, figure, blockquote {
  margin: 0;
}

ul {
  padding: 0;
  list-style: none;
}

img, svg {
  max-width: 100%;
  height: auto;
  display: block;
}

::selection {
  background: var(--vino);
  color: var(--hueso); /* 6,88:1 — la unica combinacion admitida sobre vino */
}

:focus-visible {
  outline: 2px solid var(--hueso);
  outline-offset: 3px;
}

.salta-al-contenido {
  position: absolute;
  left: -9999px;
}

.salta-al-contenido:focus {
  left: var(--e3);
  top: var(--e3);
  z-index: 10;
  padding: var(--e2) var(--e3);
  background: var(--hueso);
  color: var(--tinta);
  font-weight: 600;
}

/* --- Jerarquia tipografica §7.6 ------------------------------------------- */

.display {
  font-size: clamp(40px, 7vw, 56px);
  line-height: 1.07;
  font-weight: 800;
  letter-spacing: -0.02em;
}

h1, .h1 {
  font-size: clamp(32px, 5vw, 40px);
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.015em;
}

h2, .h2 {
  font-size: clamp(26px, 3.6vw, 30px);
  line-height: 36px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

h3, .h3 {
  font-size: 24px;
  line-height: 32px;
  font-weight: 600;
  letter-spacing: -0.005em;
}

.entradilla {
  font-size: clamp(18px, 2.4vw, 20px);
  line-height: 30px;
  font-weight: 500;
  max-width: var(--prosa);
}

.pequeno {
  font-size: 15px;
  line-height: 24px;
}

.pie {
  font-size: 13px;
  line-height: 20px;
  color: var(--texto-secundario);
}

/* Antetitulo. §7.6: IBM Plex Mono SemiBold 12/16, mayusculas, tracking +8% */
.etiqueta {
  font-family: var(--mono);
  font-weight: 600;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--texto-secundario);
  margin: 0 0 var(--e3);
}

/* Sobre Tinta Alta el Acero da 3,96:1 y solo pasa a >=24px, asi que dentro de
 * una tarjeta la etiqueta va en Hueso. §7.5. */
.tarjeta .etiqueta,
.tarjeta .pie {
  color: var(--texto);
}

/* §7.6 regla 1: todo numero que sea un compromiso va en mono */
.cifra {
  font-family: var(--mono);
  font-weight: 500;
  font-feature-settings: "tnum" 1;
}

p + p {
  margin-top: var(--e3);
}

.prosa {
  max-width: var(--prosa);
}

em {
  font-style: italic; /* §7.6 regla 5: cursiva solo para citas literales */
}

/* --- Enlaces -------------------------------------------------------------- */
/* El vino falla sobre fondo oscuro (2,08:1), asi que el enlace se distingue por
 * subrayado y no por color. §7.5, regla dura. */

a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: text-decoration-color 150ms linear;
}

a:hover {
  text-decoration-thickness: 2px;
}

/* --- Estructura ----------------------------------------------------------- */

.contenedor {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: var(--e3);
}

@media (min-width: 768px) {
  .contenedor { padding-inline: var(--e5); }
}

.bloque {
  padding-block: var(--e6);
  border-top: 1px solid var(--linea);
}

@media (min-width: 768px) {
  .bloque { padding-block: var(--e7); }
}

.bloque > .contenedor > * + * {
  margin-top: var(--e5);
}

.bloque__cabecera {
  max-width: var(--prosa);
}

.bloque__cabecera > * + * {
  margin-top: var(--e3);
}

/* --- Reticula de plano §7.7 ----------------------------------------------- */
/* Lineas de 1px en Acero al 20%, celda de 8px. Se desvanece hacia abajo para
 * que sea textura de fondo y no un tablero. */

.reticula {
  position: relative;
  isolation: isolate;
}

.reticula::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(to right, var(--reticula) 0 1px, transparent 1px 8px),
    repeating-linear-gradient(to bottom, var(--reticula) 0 1px, transparent 1px 8px);
  opacity: 0.55;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 78%);
  mask-image: linear-gradient(to bottom, #000 0%, transparent 78%);
}

/* --- Linea de cota §7.7 --------------------------------------------------- */
/* Una linea horizontal de 1px con terminaciones perpendiculares, y la cifra en
 * mono encima. Es el recurso grafico distintivo de la marca. */

.cota {
  /* La linea de cota mide algo: se ajusta a la cifra, no a un ancho inventado */
  display: block;
  width: fit-content;
  max-width: 100%;
}

.cota .etiqueta {
  margin-bottom: var(--e1);
}

.cota__valor {
  font-family: var(--mono);
  font-weight: 500;
  font-size: clamp(32px, 5.5vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  display: block;
  margin: 0 0 var(--e2);
  white-space: nowrap;
}

.cota__linea {
  display: block; /* es un <span>: sin esto ignora height y no se dibuja */
  position: relative;
  height: 9px;
  border-top: 1px solid var(--acero);
}

.cota__linea::before,
.cota__linea::after {
  content: "";
  position: absolute;
  top: -1px;
  width: 1px;
  height: 9px;
  background: var(--acero);
}

.cota__linea::before { left: 0; }
.cota__linea::after  { right: 0; }

.cota__nota {
  display: block;
  margin-top: var(--e1);
  font-family: var(--mono);
  font-weight: 500;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.04em;
  color: var(--texto-secundario);
}

/* Dos cotas: el piso y el proyecto tipico. El §8.4 pide el «desde» y el §3.1
 * habla del ticket tipico: son dos cantidades distintas y se miden por
 * separado. Dos columnas solo desde 1080px, que es donde la cifra del rango
 * cabe holgada en media columna. */

.cotas {
  display: grid;
  gap: var(--e5);
  grid-template-columns: 1fr;
}

@media (min-width: 1080px) {
  .cotas { grid-template-columns: 1fr 1fr; gap: var(--e6); }
}

.cotas .cota {
  width: 100%; /* las dos lineas miden lo mismo: son comparables */
}

/* La cifra del rango lleva una palabra y no cabe en una linea en movil */
.cotas .cota__valor {
  white-space: normal;
}

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

.boton {
  display: inline-block;
  padding: var(--e2) var(--e4);
  border: 1px solid transparent;
  border-radius: var(--radio);
  font-family: var(--archivo);
  font-weight: 600;
  font-size: 17px;
  line-height: 24px;
  text-decoration: none;
  transition: background-color 150ms linear, border-color 150ms linear;
}

/* Un boton en vino por pantalla. §7.5. Hueso encima, 6,88:1. */
.boton--vino {
  background: var(--vino);
  color: var(--hueso);
}

.boton--vino:hover {
  background: var(--vino-oscuro);
}

.boton--linea {
  border-color: var(--acero);
  color: var(--texto);
}

.boton--linea:hover {
  border-color: var(--hueso);
}

/* --- Cabecera ------------------------------------------------------------- */

.cabecera {
  padding-block: var(--e4);
}

.cabecera__fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e3);
}

.cabecera__logo img {
  width: 168px; /* §9.2: minimo 120px de ancho */
}

.idiomas {
  display: flex;
  align-items: center;
  gap: var(--e1);
  font-family: var(--mono);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.idiomas a {
  color: var(--texto-secundario);
  text-decoration: none;
  padding: 4px var(--e1);
  border: 1px solid transparent;
  border-radius: var(--radio);
}

.idiomas a:hover {
  color: var(--texto);
}

.idiomas [aria-current="true"] {
  color: var(--texto);
  border-color: var(--linea);
}

.idiomas span[aria-hidden] {
  color: var(--acero-oscuro);
}

/* --- 1. Titular ----------------------------------------------------------- */

.portada {
  padding-block: var(--e6) var(--e7);
  border-top: 0;
}

@media (min-width: 768px) {
  .portada { padding-block: var(--e7) 128px; }
}

.portada__contenido > * + * {
  margin-top: var(--e4);
}

.portada .display {
  max-width: 15ch;
}

.portada__acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e3);
  margin-top: var(--e5);
}

.portada__tagline {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--texto-secundario);
}

/* --- Rejillas ------------------------------------------------------------- */

.columnas {
  display: grid;
  gap: var(--e5);
  grid-template-columns: 1fr;
}

@media (min-width: 720px) {
  .columnas--2 { grid-template-columns: repeat(2, 1fr); }
}

/* Las tres tarjetas no bajan de 900px: a 768 quedaban de 192px con 48 de
 * margen interno a cada lado, y apretar la composicion es la forma mas rapida
 * de verse barato (§7.7). */
@media (min-width: 900px) {
  .columnas--3 { grid-template-columns: repeat(3, 1fr); }
}

.columna > * + * {
  margin-top: var(--e2);
}

.columna__regla {
  width: 100%;
  height: 1px;
  background: var(--linea);
  margin-bottom: var(--e3);
}

/* --- Tarjetas ------------------------------------------------------------- */

.tarjeta {
  background: var(--fondo-elevado);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: var(--e4);
}

.tarjeta > * + * {
  margin-top: var(--e2);
}

@media (min-width: 1024px) {
  .tarjeta { padding: var(--e5); }
}

/* --- 3. Como funciona ----------------------------------------------------- */

.paso__numero {
  font-family: var(--mono);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--texto-secundario);
}

.paso__icono {
  width: 40px;
  height: 40px;
  margin-bottom: var(--e3);
  color: var(--texto);
}

/* §7.7: linea de 2px, grosor uniforme, esquinas vivas, sin relleno */
.paso__icono svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: butt;
  stroke-linejoin: miter;
}

.paso h3 {
  margin-top: var(--e1);
}

/* --- 4. Prueba ------------------------------------------------------------ */

.prueba {
  display: grid;
  gap: var(--e5);
  grid-template-columns: 1fr;
  align-items: start;
}

/* Las dos columnas no bajan de 1100px: por debajo, la galeria queda tan
 * estrecha que sus pestañas se parten en dos filas. */
@media (min-width: 1100px) {
  .prueba { grid-template-columns: 1fr 1.1fr; gap: var(--e6); }
}

.captura {
  margin: 0;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: var(--fondo-elevado);
  overflow: hidden;
}

.captura img {
  width: 100%;
}

.captura figcaption {
  border-top: 1px solid var(--linea);
}

/* --- Galeria de la prueba -------------------------------------------------
 * Cuatro vistas de la misma aplicacion, conmutadas con radios: sin una linea
 * de JavaScript y sin transicion, porque el §7.7 prohibe la animacion
 * decorativa. Las cuatro imagenes miden lo mismo, asi que el marco no salta al
 * cambiar de vista. Los radios conservan la navegacion con flechas del
 * teclado, que es gratis y correcta. */

.galeria__radio {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.galeria__vistas {
  aspect-ratio: 1400 / 1186;
  background: var(--hueso-puro);
}

.galeria__vista,
.galeria__pie {
  display: none;
}

.galeria__vista {
  width: 100%;
}

#vista-1:checked ~ .galeria__vistas .galeria__vista:nth-child(1),
#vista-1:checked ~ .galeria__pies .galeria__pie:nth-child(1) { display: block; }

#vista-2:checked ~ .galeria__vistas .galeria__vista:nth-child(2),
#vista-2:checked ~ .galeria__pies .galeria__pie:nth-child(2) { display: block; }

#vista-3:checked ~ .galeria__vistas .galeria__vista:nth-child(3),
#vista-3:checked ~ .galeria__pies .galeria__pie:nth-child(3) { display: block; }

#vista-4:checked ~ .galeria__vistas .galeria__vista:nth-child(4),
#vista-4:checked ~ .galeria__pies .galeria__pie:nth-child(4) { display: block; }

.galeria__pestanas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e1);
  padding: var(--e2) var(--e3);
  border-top: 1px solid var(--linea);
}

.galeria__pestanas label {
  display: inline-flex;
  align-items: baseline;
  gap: var(--e1);
  padding: 6px 12px;
  border: 1px solid transparent;
  border-radius: var(--radio);
  font-family: var(--mono);
  font-weight: 600;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--texto-secundario);
  cursor: pointer;
  transition: color 150ms linear, border-color 150ms linear;
}

.galeria__pestanas label:hover {
  color: var(--texto);
}

.galeria__num {
  color: var(--acero-oscuro);
}

#vista-1:checked ~ .galeria__pestanas [for="vista-1"] {
  color: var(--texto);
  border-color: var(--acero);
}
#vista-2:checked ~ .galeria__pestanas [for="vista-2"] {
  color: var(--texto);
  border-color: var(--acero);
}
#vista-3:checked ~ .galeria__pestanas [for="vista-3"] {
  color: var(--texto);
  border-color: var(--acero);
}
#vista-4:checked ~ .galeria__pestanas [for="vista-4"] {
  color: var(--texto);
  border-color: var(--acero);
}

/* El radio esta oculto: el foco tiene que verse en su etiqueta */
#vista-1:focus-visible ~ .galeria__pestanas [for="vista-1"],
#vista-2:focus-visible ~ .galeria__pestanas [for="vista-2"],
#vista-3:focus-visible ~ .galeria__pestanas [for="vista-3"],
#vista-4:focus-visible ~ .galeria__pestanas [for="vista-4"] {
  outline: 2px solid var(--hueso);
  outline-offset: 3px;
}

.galeria__pies {
  padding: var(--e2) var(--e3);
}

.captura .galeria__pies {
  border-top: 1px solid var(--linea);
  font-family: var(--mono);
  font-weight: 500;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.04em;
  color: var(--texto);
}

/* --- 5. Precio ------------------------------------------------------------ */

.listas {
  display: grid;
  gap: var(--e5);
  grid-template-columns: 1fr;
}

@media (min-width: 720px) {
  .listas { grid-template-columns: repeat(2, 1fr); }
}

.lista li {
  padding: var(--e2) 0;
  border-top: 1px solid var(--linea);
}

.lista li:first-child {
  border-top: 0;
  padding-top: 0;
}

/* Bloque destacado de propiedad. Es el otro uso del vino en la pagina: borde,
 * no superficie, para no pasar del 8%. §8.3 seccion 6. */
.destacado {
  border-left: 2px solid var(--vino);
  padding: var(--e1) 0 var(--e1) var(--e3);
  max-width: var(--prosa);
}

/* --- 7. Contacto ---------------------------------------------------------- */

.contacto__correo {
  display: inline-block;
  max-width: 100%;
  font-family: var(--mono);
  font-weight: 500;
  /* La direccion son 30 caracteres en mono y no lleva un solo espacio donde
   * partir: a 390px de ancho estiraba el documento entero. */
  font-size: clamp(15px, 4.4vw, 28px);
  line-height: 1.3;
  letter-spacing: -0.01em;
  text-underline-offset: 6px;
  overflow-wrap: anywhere;
}

/* --- Pie ------------------------------------------------------------------ */

.pie-pagina {
  padding-block: var(--e6);
  border-top: 1px solid var(--linea);
}

.pie-pagina__fila {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e5);
  justify-content: space-between;
  align-items: flex-end;
}

.pie-pagina__logo img {
  width: 260px;
}

.pie-pagina__datos {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 13px;
  line-height: 22px;
  color: var(--texto-secundario);
}

/* --- Impresion ------------------------------------------------------------ */
/* El modo claro del §7.5, que es el que aplica al papel. */

@media print {
  :root {
    --fondo: var(--hueso-puro);
    --fondo-elevado: var(--hueso);
    --texto: var(--tinta);
    --texto-secundario: var(--acero-oscuro);
    --linea: rgba(74, 85, 104, 0.35);
  }

  body { font-size: 10.5pt; line-height: 15pt; }
  .reticula::before { background-image: none; }
  .idiomas, .portada__acciones { display: none; }
  .boton--vino { background: none; color: var(--tinta); border-color: var(--vino-oscuro); }
}