/* lucumatech.lat — según el manual de identidad de Lúcuma Technologies:
   una sola tipografía (Plus Jakarta Sans, Regular/Medium/SemiBold), verde noche
   #17231D como principal, lúcuma #D9922E como acento (claro #E8A548 solo sobre
   verde noche), hueso #FBFAF7 de fondo, texto secundario #3E4A44 y etiquetas
   en mayúsculas espaciadas (+0.24em). Las fuentes se sirven desde este sitio. */
/* Un solo archivo variable (SIL OFL, f/OFL-PlusJakartaSans.txt) cubre Regular, Medium y SemiBold. */
@font-face { font-family: 'Plus Jakarta Sans'; src: url('f/plus-jakarta-sans.woff2') format('woff2'); font-weight: 200 800; font-display: swap; }

:root {
  color-scheme: light;
  --noche: #17231D;
  --noche-2: #1F2E27;
  --hueso: #FBFAF7;
  --blanco: #FFFFFF;
  --tinta: #17231D;
  --texto-2: #3E4A44;
  --etiqueta: #56615B;
  --raya: #DEDAD0;
  --raya-2: #E4E1D9;
  --lucuma: #D9922E;
  --lucuma-claro: #E8A548;
  --lucuma-tinta: #B07420;
  --sobre-noche: #F4F1EA;
  --sobre-noche-2: rgba(244, 241, 234, .72);
  --g: max(18px, 5vw);
  --ancho: 1180px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--noche); }
body { margin: 0; background: var(--hueso); color: var(--tinta); font: 400 16px/1.65 'Plus Jakarta Sans', Arial, Helvetica, sans-serif; -webkit-font-smoothing: antialiased; overflow-x: clip; }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, p, dl, dd, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--lucuma); outline-offset: 3px; border-radius: 6px; }
.etiqueta { font: 500 12px/1.4 'Plus Jakarta Sans', Arial, sans-serif; letter-spacing: .24em; text-transform: uppercase; color: var(--etiqueta); }

/* ── El logotipo, como lo dibuja el manual: la hoja en la ú y el punto final ── */
.logo { display: inline-flex; flex-direction: column; align-items: center; gap: 0; color: inherit; text-decoration: none; }
.logo__nombre { font-weight: 600; line-height: 1; letter-spacing: -.04em; white-space: nowrap; }
.logo__u { position: relative; display: inline-block; }
.logo__u svg { position: absolute; left: .2em; top: .02em; width: .265em; height: .265em; }
.logo__punto { color: var(--lucuma); }
.logo__desc { font-weight: 500; letter-spacing: .6em; padding-left: .6em; text-transform: uppercase; }
.firma { display: inline-flex; align-items: center; gap: 14px; color: inherit; text-decoration: none; }
.firma .iso { width: 40px; height: 40px; border-radius: 10px; background: var(--noche); display: grid; place-items: center; flex: none; }
.firma .iso svg { width: 32px; height: 32px; }
.firma .logo__nombre { font-size: 26px; }
.firma .logo__desc { font-size: 6px; margin-top: 3px; }
.sobre-noche .firma .iso { background: var(--sobre-noche); }

/* ── La portada: verde noche, el isotipo en puntos y el titular grande ── */
.portada { position: relative; background: var(--noche); color: var(--sobre-noche); overflow: hidden; }
.portada::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(244, 241, 234, .07) 1px, transparent 1.2px); background-size: 22px 22px; pointer-events: none; }
.trama { position: absolute; right: -4vw; top: 40px; width: clamp(360px, 46vw, 680px); height: auto; opacity: .9; pointer-events: none; }
.cab { position: relative; z-index: 2; max-width: var(--ancho); margin: 0 auto; padding: 22px var(--g); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
nav { display: flex; align-items: center; gap: 26px; }
nav a { color: var(--sobre-noche-2); text-decoration: none; font: 500 14px/1 'Plus Jakarta Sans', Arial, sans-serif; }
nav a:hover { color: var(--sobre-noche); }
.boton { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 48px; padding: 0 22px; border-radius: 10px; background: var(--lucuma); color: var(--noche); text-decoration: none; font: 600 14px/1 'Plus Jakarta Sans', Arial, sans-serif; white-space: nowrap; transition: background .2s, transform .2s; }
.boton:hover { background: var(--lucuma-claro); transform: translateY(-1px); }
.boton--borde { background: transparent; color: var(--sobre-noche); box-shadow: inset 0 0 0 1px rgba(244, 241, 234, .35); }
.boton--borde:hover { background: rgba(244, 241, 234, .08); transform: none; }
nav .boton { height: 40px; padding: 0 16px; }

.hero { position: relative; z-index: 1; max-width: var(--ancho); margin: 0 auto; padding: clamp(96px, 16vw, 200px) var(--g) clamp(72px, 9vw, 120px); }
.hero .etiqueta { display: flex; align-items: center; gap: 10px; color: var(--lucuma-claro); }
.hero .etiqueta::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--lucuma-claro); }
h1 { margin-top: 26px; max-width: 13ch; font: 600 clamp(2.8rem, 7.4vw, 6.2rem)/.98 'Plus Jakarta Sans', Arial, sans-serif; letter-spacing: -.045em; text-wrap: balance; }
h1 em { font-style: normal; color: var(--lucuma-claro); }
.bajada { margin-top: 30px; max-width: 52ch; font-size: clamp(1.05rem, 1.35vw, 1.2rem); color: var(--sobre-noche-2); }
.acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }

/* ── Las partes, sobre hueso ── */
.parte { max-width: var(--ancho); margin: 0 auto; padding: clamp(64px, 9vw, 120px) var(--g); border-top: 1px solid var(--raya); }
.parte:first-of-type { border-top: 0; }
.cabecera { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 20px clamp(32px, 6vw, 96px); align-items: end; }
.cabecera h2 { margin-top: 14px; font: 600 clamp(2rem, 3.6vw, 2.9rem)/1.12 'Plus Jakarta Sans', Arial, sans-serif; letter-spacing: -.03em; text-wrap: balance; }
.cabecera p { max-width: 54ch; font-size: 1.05rem; color: var(--texto-2); }

/* Servicios: cuatro tarjetas blancas con el filo del manual */
.servicios { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 48px; }
.servicio { display: grid; gap: 14px; align-content: start; padding: 32px 30px 34px; border-radius: 16px; background: var(--blanco); box-shadow: inset 0 0 0 1px var(--raya-2); }
.servicio .etiqueta { color: var(--lucuma-tinta); }
.servicio h3 { font: 600 22px/1.3 'Plus Jakarta Sans', Arial, sans-serif; letter-spacing: -.02em; }
.servicio p { color: var(--texto-2); font-size: 15.5px; }
.servicio ul { display: grid; gap: 9px; margin-top: 6px; padding-top: 16px; border-top: 1px solid var(--raya-2); }
.servicio li { display: grid; grid-template-columns: 8px 1fr; gap: 12px; align-items: baseline; font-size: 15px; }
.servicio li::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--lucuma); transform: translateY(-1px); }

/* Cómo trabajamos: una secuencia, con sus números en lúcuma */
.pasos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-top: 48px; border-top: 1px solid var(--raya); }
.paso { display: grid; gap: 12px; align-content: start; padding: 28px 24px 32px 0; border-bottom: 1px solid var(--raya); }
.paso + .paso { padding-left: 24px; border-left: 1px solid var(--raya); }
.paso b { font: 600 13px/1 'Plus Jakarta Sans', Arial, sans-serif; letter-spacing: .24em; color: var(--lucuma-tinta); }
.paso h3 { font: 600 20px/1.3 'Plus Jakarta Sans', Arial, sans-serif; letter-spacing: -.02em; }
.paso p { color: var(--texto-2); font-size: 15px; }

/* Soporte: verde noche, el segundo bloque oscuro de la página */
.soporte { margin-top: 48px; padding: clamp(28px, 4vw, 48px); border-radius: 20px; background: var(--noche); color: var(--sobre-noche); display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 28px clamp(28px, 5vw, 80px); align-items: start; }
.soporte .etiqueta { color: var(--lucuma-claro); }
.soporte h3 { margin-top: 14px; font: 600 clamp(1.5rem, 2.6vw, 2.1rem)/1.2 'Plus Jakarta Sans', Arial, sans-serif; letter-spacing: -.03em; text-wrap: balance; }
.soporte h3 em { font-style: normal; color: var(--lucuma-claro); }
.soporte > div > p { margin-top: 14px; color: var(--sobre-noche-2); }
.soporte ul { display: grid; }
.soporte li { display: grid; grid-template-columns: 22px 1fr; gap: 14px; padding: 14px 0; border-top: 1px solid rgba(244, 241, 234, .16); font-size: 15.5px; }
.soporte li:first-child { border-top: 0; padding-top: 0; }
.soporte li svg { width: 22px; height: 22px; margin-top: 2px; fill: none; stroke: var(--lucuma-claro); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.soporte li b { display: block; font-weight: 600; }
.soporte li span { color: var(--sobre-noche-2); font-size: 14.5px; }
.soporte .canales { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }

/* Casos: dos fichas iguales con captura real */
.casos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 48px; }
.caso { display: grid; grid-template-columns: 120px 1fr; gap: 24px; align-items: start; padding: 26px; border-radius: 16px; background: var(--blanco); box-shadow: inset 0 0 0 1px var(--raya-2); }
.caso__vista { width: 120px; border-radius: 12px; overflow: hidden; background: var(--hueso); box-shadow: inset 0 0 0 1px var(--raya-2); }
.caso__vista img { aspect-ratio: 600 / 900; object-fit: cover; object-position: top; }
.caso__c { display: grid; gap: 8px; }
.caso__c > img { height: 24px; width: auto; }
.caso__nombre { font: 600 22px/1.2 'Plus Jakarta Sans', Arial, sans-serif; letter-spacing: -.03em; }
.caso__c .etiqueta { color: var(--lucuma-tinta); }
.caso__c p { color: var(--texto-2); font-size: 15px; }
.caso__c a { justify-self: start; margin-top: 4px; font: 600 14px/1 'Plus Jakarta Sans', Arial, sans-serif; color: var(--tinta); text-decoration: none; border-bottom: 1.5px solid var(--lucuma); padding-bottom: 3px; }

/* Empresa y contacto */
.dos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 6vw, 80px); }
.dos h2 { margin-top: 14px; font: 600 clamp(1.7rem, 3vw, 2.3rem)/1.15 'Plus Jakarta Sans', Arial, sans-serif; letter-spacing: -.03em; }
.datos { display: grid; margin-top: 28px; border-top: 1px solid var(--raya); }
.datos div { display: grid; grid-template-columns: minmax(130px, 170px) 1fr; gap: 16px; padding: 15px 0; border-bottom: 1px solid var(--raya); }
.datos dt { color: var(--etiqueta); font-size: 14.5px; }
.datos dd { font-weight: 600; overflow-wrap: anywhere; }
.datos dd a { color: var(--tinta); }
.datos dd small { display: block; margin-top: 2px; font-weight: 400; color: var(--texto-2); font-size: 14px; }

/* El pie: verde noche, con el logotipo principal */
.pie { background: var(--noche); color: var(--sobre-noche-2); }
.pie__c { max-width: var(--ancho); margin: 0 auto; padding: 48px var(--g) 56px; display: grid; grid-template-columns: auto 1fr; gap: 24px 48px; align-items: end; }
.pie .logo { color: var(--sobre-noche); }
.pie .logo__nombre { font-size: 44px; }
.pie .logo__desc { font-size: 8px; margin-top: 8px; }
.pie__textos { display: grid; gap: 6px; justify-items: end; text-align: right; font-size: 13.5px; }
.pie__textos a { color: var(--sobre-noche-2); }

/* La página legal */
.legal { max-width: 700px; margin: 0 auto; padding: clamp(48px, 8vw, 96px) var(--g); }
.legal h1 { margin: 12px 0 24px; max-width: none; font-size: clamp(1.9rem, 4.5vw, 2.8rem); line-height: 1.15; letter-spacing: -.03em; }
.legal h2 { font: 600 1.2rem/1.3 'Plus Jakarta Sans', Arial, sans-serif; margin: 32px 0 8px; }
.legal p { color: var(--texto-2); }
.legal p + p { margin-top: 10px; }
.portada--corta .cab { padding-bottom: 22px; }

@media (max-width: 960px) {
  .pasos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .paso:nth-child(3) { padding-left: 0; border-left: 0; }
  .soporte, .casos, .cabecera { grid-template-columns: minmax(0, 1fr); }
  .cabecera { align-items: start; }
  .trama { right: -12vw; top: 90px; width: 64vw; opacity: .55; }
}
@media (max-width: 720px) {
  .servicios, .dos { grid-template-columns: minmax(0, 1fr); }
  .caso { grid-template-columns: 92px 1fr; gap: 18px; padding: 20px; }
  .caso__vista { width: 92px; }
  .pie__c { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .pie__textos { justify-items: start; text-align: left; }
}
@media (max-width: 560px) {
  nav a:not(.boton) { display: none; }
  .hero { padding-top: 72px; }
  .pasos { grid-template-columns: minmax(0, 1fr); }
  .paso + .paso { padding-left: 0; border-left: 0; }
  .datos div { grid-template-columns: 1fr; gap: 2px; }
  .trama { display: none; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .boton { transition: none; } }