/* ============================================================
   Reserve Noble · tokens de marca
   v2.1 · 1 de octubre de 2026
   Un solo archivo. Nada aquí depende de JavaScript.
   ============================================================ */

/* Las dos fuentes del ecosistema. Archivo es variable: un solo archivo
   cubre los anchos 62–125 % y los pesos 100–900.
   Para producción conviene autoalojarlas en /fonts/ con woff2 y
   font-display:swap; el @import queda para prototipo. */
@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wdth,wght@0,62..125,100..900;1,62..125,100..900&family=Instrument+Serif:ital@0;1&display=swap');

:root {
  /* ---------- COLOR · primitivas ---------- */
  /* Propias de Reserve Noble */
  --rn-ocre:          #8E6518;  /* color de marca. La muralla al sol */
  --rn-ocre-honda:    #6B4A10;  /* hover, presionado, titulares en color */
  --rn-tinta:         #1C1814;  /* texto principal */
  --rn-tinta-media:   #554E44;  /* texto de apoyo. 7,25:1 sobre espuma */

  /* Compartidas, con el mismo valor, por las cuatro empresas del grupo */
  --rn-sol:           #F2B441;  /* la bóveda encendida y el botón de acción */
  --rn-espuma:        #F2F1EC;  /* el fondo de todo. Nunca blanco puro */
  --rn-arena:         #E4D8C4;  /* papel cálido: tarjetas, zócalos, bloques */
  --rn-bruma:         #5B7075;  /* texto secundario y líneas finas */

  /* ---------- COLOR · papeles ---------- */
  /* Use siempre estos, no las primitivas: cambiar un papel aquí
     cambia el sitio entero sin tocar un componente. */
  --rn-fondo:         var(--rn-espuma);
  --rn-superficie:    var(--rn-arena);
  --rn-superficie-alta: var(--rn-tinta);
  --rn-texto:         var(--rn-tinta);
  --rn-texto-2:       var(--rn-tinta-media);  /* texto de apoyo */
  --rn-texto-3:       var(--rn-bruma);        /* secundario y líneas */
  --rn-texto-inverso: var(--rn-espuma);
  --rn-marca:         var(--rn-ocre);
  --rn-enlace:        var(--rn-ocre-honda);
  --rn-accion:        var(--rn-sol);        /* el botón. Nada más */
  --rn-accion-texto:  var(--rn-tinta);      /* 9,56:1 · AAA */
  --rn-borde:         #DCD3C2;              /* arena a 1 px, nunca sombra */
  --rn-foco:          var(--rn-ocre-honda);

  /* Niveles de verificación · Plan Rector, sección 7 */
  --rn-nivel-selection:  var(--rn-ocre);     /* Selection Reserve Noble */
  --rn-nivel-operacion:  var(--rn-arena);    /* Disponible para reserva */
  --rn-nivel-indice:     transparent;        /* Índice: sin sello. La ausencia es la señal */

  /* ---------- TIPOGRAFÍA ---------- */
  --rn-serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --rn-sans:  "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --rn-peso-titular: 600;
  --rn-peso-texto:   400;
  --rn-peso-cifra:   500;
  --rn-ancho-titular: 125;   /* eje wdth de Archivo */
  --rn-ancho-texto:   100;
  --rn-ancho-cifra:   112;

  --rn-t-hero:  clamp(2.25rem, 1.65rem + 2.6vw, 3.6rem);
  --rn-t-h1:    clamp(2rem,   1.62rem + 1.6vw, 2.6rem);
  --rn-t-h2:    clamp(1.5rem, 1.15rem + 1.4vw, 2.1rem);
  --rn-t-h3:    clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem);
  --rn-t-texto:  1.0625rem;   /* 17 px */
  --rn-t-cifra: clamp(1rem,   0.9rem + 0.5vw, 1.5rem);
  --rn-t-micro:  0.75rem;     /* 12 px, versales */

  --rn-interlinea-texto:   1.5;
  --rn-interlinea-titular: 1.05;
  --rn-medida: 70ch;          /* máximo 75 caracteres por línea */

  /* ---------- RADIOS · la escala del ecosistema ---------- */
  --rn-r-etiqueta: 8px;
  --rn-r-bloque:  12px;
  --rn-r-tarjeta: 16px;
  --rn-r-barra:   18px;
  --rn-r-pastilla: 999px;

  /* ---------- ESPACIO ---------- */
  --rn-e-1: 4px;   --rn-e-2: 8px;   --rn-e-3: 12px;  --rn-e-4: 16px;
  --rn-e-5: 24px;  --rn-e-6: 32px;  --rn-e-7: 48px;  --rn-e-8: 64px;
  --rn-e-9: 96px;  --rn-e-10: 128px;

  --rn-ancho-max: 1200px;
  --rn-transicion: 160ms ease-out;
}

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

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

body {
  margin: 0;
  background: var(--rn-fondo);
  color: var(--rn-texto);
  font-family: var(--rn-sans);
  font-size: var(--rn-t-texto);
  line-height: var(--rn-interlinea-texto);
  font-variation-settings: 'wdth' var(--rn-ancho-texto), 'wght' var(--rn-peso-texto);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--rn-sans);
  font-variation-settings: 'wdth' var(--rn-ancho-titular), 'wght' var(--rn-peso-titular);
  line-height: var(--rn-interlinea-titular);
  text-wrap: balance;
  margin: 0 0 var(--rn-e-4);
  text-transform: none;   /* titulares en caja baja, nunca en versales sostenidas */
}
h1 { font-size: var(--rn-t-h1); }
h2 { font-size: var(--rn-t-h2); }
h3 { font-size: var(--rn-t-h3); }

p { max-width: var(--rn-medida); margin: 0 0 var(--rn-e-4); }

a { color: var(--rn-enlace); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--rn-ocre); }

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--rn-foco);
  outline-offset: 2px;
  border-radius: var(--rn-r-etiqueta);
}

hr { border: 0; border-top: 1px solid var(--rn-borde); margin: var(--rn-e-7) 0; }

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

/* ============================================================
   COMPONENTES
   ============================================================ */

/* El logotipo se compone en serif. Es la única pieza que usa la serif
   como voz principal: el resto del sitio va en Archivo. */
.rn-logotipo {
  font-family: var(--rn-serif);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--rn-marca);
}

/* La voz: citas y frases de marca. Con moderación. */
.rn-voz {
  font-family: var(--rn-serif);
  font-style: italic;
  font-size: clamp(1.25rem, 1rem + 1.2vw, 2rem);
  color: var(--rn-ocre-honda);
}

/* LA REGLA DE LA CIFRA
   Todo número que sea una medición lleva esta clase: precio, canon,
   tarifa, ocupación, metros, estancia mínima, rendimiento y periodo.
   La tabular hace que la columna alinee y que el número parezca una
   medición tomada, no un argumento de venta. */
.rn-cifra {
  font-family: var(--rn-sans);
  font-variation-settings: 'wdth' var(--rn-ancho-cifra), 'wght' var(--rn-peso-cifra);
  font-variant-numeric: tabular-nums;
  font-size: var(--rn-t-cifra);
  letter-spacing: -0.01em;
}

.rn-micro {
  font-size: var(--rn-t-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-variation-settings: 'wdth' var(--rn-ancho-cifra), 'wght' 500;
  color: var(--rn-texto-2);
}

/* ---------- BOTÓN ----------
   UN SOLO SOL POR PANTALLA ES LA OPCIÓN PRINCIPAL, NO UNA REGLA CERRADA.
   El Sol es el color de acción de las cuatro empresas y es el elemento
   más llamativo del campo visual: esa propiedad no se divide, se gasta.
   Lo normal es un botón en Sol por vista; si el diseño pide otra cosa,
   se decide ahí.
   Lo que sí es regla, porque es medición:
   nunca texto claro sobre Sol — espuma sobre Sol da 1,63:1;
   nunca un botón Sol sobre banda ocre — Sol sobre ocre da 2,83:1;
   nunca ocre como texto sobre arena — 3,71:1. */
.rn-boton {
  display: inline-flex; align-items: center; gap: var(--rn-e-2);
  padding: 14px 28px;
  background: var(--rn-accion);
  color: var(--rn-accion-texto);
  border: 0; border-radius: var(--rn-r-pastilla);
  font-family: var(--rn-sans);
  font-variation-settings: 'wdth' 112, 'wght' 600;
  font-size: 1rem; line-height: 1;
  cursor: pointer; text-decoration: none;
  transition: background var(--rn-transicion), transform var(--rn-transicion);
}
.rn-boton:hover { background: #E5A832; color: var(--rn-accion-texto); }
.rn-boton:active { transform: translateY(1px); }

.rn-boton--contorno {
  background: transparent;
  color: var(--rn-ocre-honda);
  border: 1px solid var(--rn-ocre);
}
.rn-boton--contorno:hover { background: var(--rn-arena); color: var(--rn-ocre-honda); }

/* ---------- TARJETA ---------- */
.rn-tarjeta {
  background: var(--rn-fondo);
  border: 1px solid var(--rn-borde);   /* bordes, nunca sombras */
  border-radius: var(--rn-r-tarjeta);
  overflow: hidden;
}
.rn-tarjeta__cuerpo { padding: var(--rn-e-5); }
.rn-tarjeta--calida { background: var(--rn-superficie); border-color: transparent; }

/* ---------- NIVELES DE VERIFICACIÓN ----------
   Tres niveles, con el texto literal del Plan Rector:
   Selection Reserve Noble · Operación · Índice.
   El nivel se declara en la tarjeta del listado, no solo en la ficha.
   El Índice no lleva sello: la ausencia es la señal. */
.rn-nivel {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px;
  border-radius: var(--rn-r-etiqueta);
  font-size: var(--rn-t-micro);
  letter-spacing: 0.08em; text-transform: uppercase;
  font-variation-settings: 'wdth' 112, 'wght' 600;
}
.rn-nivel--selection { background: var(--rn-nivel-selection); color: var(--rn-espuma); }
.rn-nivel--operacion { background: var(--rn-nivel-operacion); color: var(--rn-ocre-honda); }
.rn-nivel--indice    { background: transparent; color: var(--rn-texto-3);
                       border: 1px solid var(--rn-borde); }

/* ---------- EL SELLO SELECTION ----------
   Marca de estado, no botón: sin hover, sin enlace, sin cursor.
   Solo en inmuebles del nivel Selection. Nunca en inventario de hotel. */
.rn-sello {
  display: block;
  width: 44px; height: 44px;          /* tarjeta de listado */
  pointer-events: none;
  user-select: none;
}
.rn-sello--ficha { width: 64px; height: 64px; }
.rn-sello--sobre-foto {
  position: absolute; top: var(--rn-e-3); right: var(--rn-e-3);
  filter: drop-shadow(0 0 1px var(--rn-espuma));
}

/* ---------- LA CENEFA ----------
   El friso de bóvedas, con el mismo ritmo de la arcada del símbolo.
   Zócalo, separador y fondo. Nunca compite con el logo. */
.rn-cenefa {
  height: 48px;
  background-color: var(--rn-fondo);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='37' height='48' viewBox='0 0 37 48'%3E%3Cpath d='M5 48V18.5a13 13 0 0 1 26 0V48Z' fill='%23E4D8C4'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-position: bottom left;
}
.rn-cenefa--ocre {
  background-color: var(--rn-ocre);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='37' height='48' viewBox='0 0 37 48'%3E%3Cpath d='M5 48V18.5a13 13 0 0 1 26 0V48Z' fill='%236B4A10'/%3E%3C/svg%3E");
}

/* ---------- ESTRUCTURA ---------- */
.rn-contenedor { width: 100%; max-width: var(--rn-ancho-max);
                 margin-inline: auto; padding-inline: var(--rn-e-5); }
.rn-seccion { padding-block: var(--rn-e-9); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}