/* ============================================================================
   SIANCO — base.css
   Sistema visual: tokens, reset, tipografía, utilidades, botones y formularios.

   Criterio de esta versión: menos elementos compitiendo. Un solo acento (oro)
   usado con cuentagotas, superficies planas, separadores de 1px en lugar de
   cajas con sombra, y tamaños de letra más contenidos.
   ========================================================================== */

/* ----------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* --- Superficies: papel cálido, sin blanco puro --- */
  --paper: #FAF8F3;
  --paper-2: #F3EFE6;
  --white: #FFFFFF;

  /* --- Tinta --- */
  --ink: #1A1714;
  --ink-soft: #57514A;
  --ink-mute: #756E64;

  /* --- Bloques oscuros (uno por página, para dar ritmo) --- */
  --dark: #14120F;
  --dark-2: #1D1A16;
  --on-dark: #F4F0E7;
  --on-dark-soft: #A79F92;

  /* --- Acento: el oro del logo, en dos intensidades --- */
  --gold: #FAB70F;        /* sólo logotipo, foco y un botón por página */
  --gold-text: #8A6608;   /* oro legible sobre fondo claro */
  --gold-line: #D8B36A;   /* filetes finos */

  /* --- Líneas --- */
  --line: #E3DDD2;
  --line-strong: #CDC4B4;
  --line-dark: #2E2A25;

  /* --- Tipografía ---
     El logotipo es una sans geométrica bold con terminales redondeados. Los
     titulares usan Nunito, que tiene esa misma terminación suave; Manrope, más
     neutra, se queda para el texto corrido, donde se lee mejor. */
  --display: "Nunito", "Varela Round", "Trebuchet MS", system-ui, sans-serif;
  --sans: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;

  --fs-h1: clamp(2.05rem, 1.4rem + 2.5vw, 3.4rem);
  --fs-h2: clamp(1.7rem, 1.28rem + 1.6vw, 2.6rem);
  --fs-h3: clamp(1.12rem, 1.02rem + 0.4vw, 1.32rem);
  --fs-lead: clamp(1.02rem, 0.98rem + 0.3vw, 1.18rem);
  --fs-body: clamp(1rem, 0.97rem + 0.14vw, 1.08rem);
  --fs-sm: 0.9rem;
  --fs-xs: 0.8rem;

  /* --- Espaciado --- */
  --shell: 1140px;
  --shell-narrow: 700px;
  --gutter: clamp(1.25rem, 0.7rem + 2.4vw, 3rem);
  /* Relleno vertical de las secciones. El de arriba es menor que el de abajo
     a propósito: al empezar un bloque, el ojo ya viene con el aire del bloque
     anterior y sumar los dos completos dejaba una franja vacía demasiado alta. */
  --section-t: clamp(1.5rem, 0.9rem + 1.6vw, 2.6rem);
  --section-y: clamp(4rem, 2.2rem + 4.8vw, 6.5rem);
  --gap: clamp(1.5rem, 1rem + 2vw, 3rem);

  /* Altura del pico de transición entre secciones */
  --curve: clamp(24px, 3.2vw, 56px);

  /* --- Radios --- */
  --r: 4px;
  --r-lg: 10px;
  --r-pill: 999px;

  /* --- Movimiento --- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 260ms;

  --head-h: 78px;
  --topbar-h: 38px;
}

/* ----------------------------------------------------------------------------
   2. RESET
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--head-h) + 1.5rem);
}

body {
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.72;
  color: var(--ink-soft);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

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

img {
  height: auto;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: 0;
  cursor: pointer;
}

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

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

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

::selection {
  background: var(--gold);
  color: var(--dark);
}

/* ----------------------------------------------------------------------------
   3. TIPOGRAFÍA
   -------------------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.015em;
  color: var(--ink);
  text-wrap: balance;
}

h1 {
  font-size: var(--fs-h1);
  font-weight: 800;
  letter-spacing: -0.02em;
}

h2 {
  font-size: var(--fs-h2);
  font-weight: 800;
  letter-spacing: -0.016em;
  line-height: 1.14;
}

h3 {
  font-size: var(--fs-h3);
  letter-spacing: -0.008em;
}

p {
  text-wrap: pretty;
}

/* Entradilla: un escalón por encima del cuerpo y algo más clara */
.lead {
  font-size: var(--fs-lead);
  line-height: 1.62;
  color: var(--ink-soft);
  max-width: 58ch;
}

.dark .lead,
.dark p {
  color: var(--on-dark-soft);
}

/* Etiqueta superior: sin repetición, sólo cuando aporta contexto */
.tag {
  display: block;
  font-family: var(--sans);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-text);
  margin-bottom: 0.7rem;
}

/* ----------------------------------------------------------------------------
   4. UTILIDADES
   -------------------------------------------------------------------------- */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.shell--narrow {
  max-width: var(--shell-narrow);
}

/* ----------------------------------------------------------------------------
   TRANSICIÓN EN PICO ENTRE SECCIONES
   Cada bloque sube --curve píxeles sobre el anterior y recupera ese alto en el
   relleno superior, de modo que el contenido no se mueve. Encima se recorta la
   parte de arriba con un polígono: los extremos bajan --curve píxeles y el
   centro llega hasta el borde, así que el borde superior queda en forma de
   tejado (V invertida) de lados rectos. Por las dos esquinas recortadas se ve
   el color del bloque de atrás, siempre el correcto, sin emparejar secciones.
   -------------------------------------------------------------------------- */
.section,
.cta,
.dark {
  --pad-t: var(--section-t);
  --pad-b: var(--section-y);
  margin-top: calc(var(--curve) * -1);
  padding-block: calc(var(--pad-t) + var(--curve)) var(--pad-b);

  -webkit-clip-path: polygon(
    0 var(--curve), 50% 0, 100% var(--curve), 100% 100%, 0 100%
  );
  clip-path: polygon(
    0 var(--curve), 50% 0, 100% var(--curve), 100% 100%, 0 100%
  );
}

/* El primer bloque tras el héroe o tras la cabecera de página arranca más
   cerca: esos bloques ya dejan aire propio (el héroe, por centrar su texto
   verticalmente) y sumar el relleno completo abría un hueco excesivo. */
.hero + .section,
.page-head + .section {
  padding-top: calc(var(--curve) + clamp(1.5rem, 1rem + 1.4vw, 2.75rem));
}

.section {
  background: var(--paper);
}

.section--alt {
  background: var(--paper-2);
}

/* Sección con el amarillo de la marca a plena intensidad. Sobre este fondo el
   texto atenuado y el ornamento del titular necesitan más peso para no perderse. */
.section--gold {
  background: var(--gold);
  /* Menos aire arriba: la placa con tejado sube y no queda flotando */
  --pad-t: clamp(1rem, 0.55rem + 1.1vw, 1.9rem);
}

.section--gold .lead {
  color: #47380F;
}

/* El titular va dentro de una placa blanca con forma de casa: pentágono con
   clip-path, vértice arriba y faldones que bajan hasta --roof.
   El relleno superior es apenas el alto del tejado más un pelín: el texto se
   apoya justo debajo de los faldones y queda centrado en la casa en lugar de
   caer hacia el pie. El relleno inferior es mayor para empujarlo hacia arriba. */
.section--gold .sec-head h2 {
  --roof: clamp(42px, 6.8vw, 74px);
  display: inline-block;
  padding: calc(var(--roof) + 0.2rem) 2.9rem 1.9rem;
  background: #fff;
  clip-path: polygon(
    50% 0,
    100% var(--roof),
    100% 100%,
    0 100%,
    0 var(--roof)
  );
}

.section--gold .sec-head h2::before,
.section--gold .sec-head h2::after {
  display: none; /* el tejado ahora es la forma de la propia placa */
}

.section--tight {
  --pad-t: clamp(1.75rem, 1rem + 2vw, 2.75rem);
  --pad-b: clamp(2rem, 1.2rem + 2.2vw, 3rem);
}

/* Sección con más aire al pie. Para bloques que quedan justo antes de una
   transición marcada y se veían apretados contra el siguiente. */
.section--roomy {
  --pad-b: clamp(6rem, 3.5rem + 6.5vw, 10rem);
}

/* Un solo bloque oscuro por página */
.dark {
  background: var(--dark);
  color: var(--on-dark-soft);
}

.dark h1,
.dark h2,
.dark h3,
.dark h4 {
  color: var(--on-dark);
}

/* Encabezado de sección: título centrado y, debajo, la entradilla */
.sec-head {
  margin-bottom: clamp(1.75rem, 1.2rem + 1.6vw, 2.75rem);
  text-align: center;
}

/* El tejado del logotipo como señal de marca, encima del titular, en oro */
.sec-head h2::before {
  content: "";
  display: block;
  width: 46px;
  height: 27px;
  margin: 0 auto 1.05rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 26'%3E%3Cpath d='M4 16L22 4l18 12' fill='none' stroke='%23C9990C' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='22' cy='21' r='2.8' fill='%23C9990C'/%3E%3C/svg%3E") no-repeat center / contain;
}

.sec-head h2 {
  max-width: 24ch;
  margin-inline: auto;
}

.sec-head .lead {
  margin-top: 0.9rem;
  margin-inline: auto;
  max-width: 56ch;
}

.hair {
  height: 1px;
  background: var(--line);
}

.dark .hair {
  background: var(--line-dark);
}

/* Dos y tres columnas de texto, sin cajas */
.cols-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap);
}

.cols-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap);
  text-align: center;
}

/* Ancho de lectura acotado y centrado en cada columna */
.cols-3 p {
  max-width: 32ch;
  margin-inline: auto;
}

.cols-2 h3,
.cols-3 h3 {
  margin-bottom: 0.6rem;
}

.cols-3 h3 {
  max-width: 20ch;
  margin-inline: auto;
}

@media (max-width: 860px) {
  .cols-2,
  .cols-3 {
    grid-template-columns: minmax(0, 1fr);
  }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: 1rem;
  z-index: 999;
  padding: 0.6rem 1.1rem;
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--r);
  font-size: var(--fs-sm);
  font-weight: 600;
  transition: top var(--dur) var(--ease);
}

.skip-link:focus {
  top: 0.8rem;
}

/* Aviso discreto */
.note {
  display: flex;
  gap: 0.75rem;
  padding: 1rem 1.15rem;
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--ink-soft);
  background: var(--paper-2);
  border-left: 2px solid var(--gold-line);
  border-radius: 0 var(--r) var(--r) 0;
}

.note svg {
  width: 16px;
  height: 16px;
  flex: none;
  margin-top: 3px;
  color: var(--gold-text);
}

/* ----------------------------------------------------------------------------
   5. BOTONES Y ENLACES
   -------------------------------------------------------------------------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 1.65rem;
  font-family: var(--display);
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.005em;
  line-height: 1.2;
  color: var(--paper);
  background: var(--ink);
  border: 1px solid var(--ink);
  border-radius: var(--r-pill);
  cursor: pointer;
  transition:
    background-color var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    color var(--dur) var(--ease),
    transform var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}

/* Animación sutil al pasar el ratón: se eleva dos píxeles y gana una sombra */
.btn:hover {
  background: #000;
  border-color: #000;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(20, 19, 15, 0.16);
}

/* Al pulsar vuelve a su sitio, como un botón físico */
.btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(20, 19, 15, 0.14);
  transition-duration: 90ms;
}

.btn svg {
  width: 1em;
  height: 1em;
  flex: none;
  transition: transform var(--dur) var(--ease);
}

.btn:hover svg {
  transform: scale(1.1);
}

/* Único botón dorado: la llamada a la acción principal de la página */
.btn--gold {
  background: var(--gold);
  border-color: var(--gold);
  color: #2A2103;
}

.btn--gold:hover {
  background: #E9A70A;
  border-color: #E9A70A;
}

.btn--ghost {
  background: transparent;
  border-color: var(--line-strong);
  color: var(--ink);
}

.btn--ghost:hover {
  background: var(--paper-2);
  border-color: var(--ink-mute);
  box-shadow: 0 4px 14px rgba(20, 19, 15, 0.1);
}

.btn--light {
  background: transparent;
  border-color: rgba(244, 240, 231, 0.34);
  color: var(--on-dark);
}

.btn--light:hover {
  background: var(--on-dark);
  border-color: var(--on-dark);
  color: var(--ink);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}

.btn--sm {
  padding: 0.6rem 1.2rem;
  font-size: 0.85rem;
}

/* Botón principal de un héroe: más grande y legible */
.btn--lg {
  padding: 1.05rem 2.1rem;
  font-size: 1.02rem;
  gap: 0.6rem;
}

.btn--lg svg {
  width: 1.15em;
  height: 1.15em;
}

.btn--block {
  width: 100%;
}

/* Cierre de una rejilla o galería: botón centrado con aire arriba */
.center-cta {
  margin-top: clamp(1.75rem, 2.5vw, 2.5rem);
  text-align: center;
}

/* Enlace de texto: el patrón principal para "seguir leyendo" */
.link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ink);
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: 2px;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.link:hover {
  color: var(--gold-text);
  border-color: var(--gold);
}

.link svg {
  width: 0.85em;
  height: 0.85em;
  transition: transform var(--dur) var(--ease);
}

.link:hover svg {
  transform: translateX(3px);
}

.link--light {
  color: var(--on-dark);
  border-color: rgba(244, 240, 231, 0.3);
}

.link--light:hover {
  color: var(--gold);
  border-color: var(--gold);
}

/* ----------------------------------------------------------------------------
   6. FORMULARIOS
   -------------------------------------------------------------------------- */
.field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.field label {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--ink-mute);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.75rem 0.85rem;
  font-size: 0.95rem;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  transition: border-color var(--dur) var(--ease);
}

.field textarea {
  resize: vertical;
  min-height: 120px;
  line-height: 1.6;
}

.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23756E64' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.7rem center;
  background-size: 15px;
  padding-right: 2.2rem;
  cursor: pointer;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: 0;
  border-color: var(--gold-text);
}

.field input::placeholder,
.field textarea::placeholder {
  color: #A89F92;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.1rem;
}

.form-grid .field--full {
  grid-column: 1 / -1;
}

/* ----------------------------------------------------------------------------
   7. MOVIMIENTO REDUCIDO
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  /* Sin desplazamientos: con el cambio de color ya se entiende el estado */
  .btn:hover,
  .btn:hover svg {
    transform: none;
  }
}