/* =========================================================================
   VERDEA v3 — capa puente para las páginas interiores.
   Aplica la identidad oscura (tipografía, texturas, cabecera, pie y botones)
   sobre los estilos existentes sin cambiar el funcionamiento de cada página.
   Se carga al final de cada página interior. Ver docs/DISENO-V3.md.
   ========================================================================= */

@font-face { font-family: "Fraunces"; src: url("/assets/fonts/fraunces-variable.woff2") format("woff2"); font-weight: 300 700; font-style: normal italic; font-display: swap; }
@font-face { font-family: "Plex Sans"; src: url("/assets/fonts/plex-sans-variable.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }
@font-face { font-family: "Plex Mono"; src: url("/assets/fonts/plex-mono-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root {
  --display: "Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --body: "Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --bg: #07130d; --bg-soft: #091711; --surface: #142c20; --surface-raised: #193d2b;
  --ink: #f1f5ef; --muted: #a3b0a6; --muted-strong: #c0ccc2;
  --forest: #a5d66b; --forest-2: #b8e083; --leaf: #76b85b; --sage: #142c20;
  --line: rgba(193, 214, 197, .13); --line-strong: rgba(193, 214, 197, .24);
  --sand: #76b85b; --white: #f1f5ef;
  --v3-grano: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  color-scheme: dark;
}

html { background: #07130d; }
body {
  font-family: var(--body) !important;
  color: #c0ccc2;
  background: radial-gradient(1100px 520px at 85% -120px, rgba(40, 107, 69, .30), transparent 65%), var(--v3-grano), #07130d !important;
  background-attachment: scroll;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: var(--display) !important; color: #f1f5ef; letter-spacing: -.025em; }
h1 { font-weight: 600 !important; letter-spacing: -.035em !important; }
h1 em, h2 em, h3 em { font-family: "Fraunces", Georgia, serif !important; font-style: italic; font-weight: 400; color: #a5d66b; letter-spacing: -.01em; }
::selection { background: #76b85b; color: #07130d; }
:focus-visible { outline: 2px solid #a5d66b !important; outline-offset: 3px; }

/* Etiquetas pequeñas en mayúsculas: sin rayita decorativa */
.eyebrow::before, .eyebrow::after, .kicker::before, .kicker::after { display: none !important; }
.eyebrow { color: #76b85b !important; letter-spacing: .12em; }

/* Cabecera compartida (navigation.js) con la misma apariencia que la portada */
.site-nav { background: rgba(7, 19, 13, .7) !important; border-bottom: 1px solid rgba(193, 214, 197, .1) !important; }
@supports (backdrop-filter: blur(12px)) { .site-nav { background: rgba(7, 19, 13, .58) !important; backdrop-filter: blur(14px) saturate(140%) !important; } }
.lnk { color: #c0ccc2 !important; font-size: .9rem !important; }
.lnk:hover, .lnk[aria-current="page"] { color: #f1f5ef !important; }
.lnk[aria-current="page"] { text-decoration: none !important; }
.lnk[aria-current="page"]::after { content: ""; position: absolute; left: 50%; bottom: 4px; width: 4px; height: 4px; border-radius: 50%; background: #a5d66b; transform: translateX(-50%); }
.nav-book, .btn-primary {
  border: 0 !important; border-radius: 999px !important; background: #a5d66b !important; color: #07130d !important;
  font-weight: 600 !important; box-shadow: 0 0 0 1px rgba(165, 214, 107, .4), 0 10px 36px -14px rgba(165, 214, 107, .6);
  transition: transform .3s cubic-bezier(.2, .7, .2, 1), box-shadow .3s !important;
}
.nav-book { padding: 0 18px !important; font-size: .88rem !important; }
.nav-book:hover, .btn-primary:hover { background: #b8e083 !important; transform: translateY(-2px); }
.nav-login { color: #c0ccc2 !important; font-size: .9rem !important; }
.btn-text { color: #f1f5ef !important; text-decoration-color: #a5d66b !important; }
.btn-text:hover { color: #a5d66b !important; }

/* Pie compartido */
.site-foot { background: #091711 !important; border-top: 1px solid rgba(193, 214, 197, .12) !important; color: #89978d !important; }
.footer-link { color: #a3b0a6 !important; font-size: .86rem !important; }
.footer-link:hover { color: #a5d66b !important; }
.footer-brand p { color: #89978d !important; font-size: .9rem !important; }
.footer-bottom { color: #89978d !important; font-family: "Plex Mono", ui-monospace, monospace; letter-spacing: .03em; }

/* Formularios con la paleta nueva */
input, select, textarea { font-family: var(--body); }
input:focus, select:focus, textarea:focus { border-color: #76b85b !important; box-shadow: 0 0 0 3px rgba(118, 184, 91, .18) !important; }

@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }

/* Encabezado de cada página: sin círculo decorativo; textura topográfica propia de la marca */
body:not(.admin-page) .page-hero::after {
  top: 0 !important; right: 0 !important; bottom: 0; left: auto; width: min(760px, 70vw) !important; height: auto; aspect-ratio: auto !important;
  border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  background: url("/assets/graficos/topografia.svg") 70% 40% / 1300px auto no-repeat; opacity: .13;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 55%); mask-image: linear-gradient(90deg, transparent, #000 55%);
}
/* Títulos con presencia, sin ocupar toda la pantalla */
.page-hero h1 { font-size: clamp(2.2rem, 4.6vw, 3.7rem) !important; line-height: 1.05 !important; max-width: 17ch; }

/* Sin dibujos de relleno: se quitan las "pantallas" decorativas hechas con degradados */
body:not(.admin-page) .service-item::after,
body:not(.admin-page) .home-service::after,
body:not(.admin-page) .home-process::after,
body:not(.admin-page) .auth-visual::after { display: none !important; }
body:not(.admin-page) .service-item { grid-template-columns: 55px minmax(0, 1fr) !important; grid-template-areas: "no title" ". copy" !important; }
@media (max-width: 760px) { body:not(.admin-page) .service-item { grid-template-columns: 35px minmax(0, 1fr) !important; } }

/* Nosotros: el recuadro con la palabra "Verdea" pasa a mostrar la hoja-circuito de la marca */
.about-profile-visual { position: relative; color: transparent !important; font-size: 0 !important; overflow: hidden;
  background: url("/assets/graficos/hoja-circuito.svg") 55% 50% / 58% auto no-repeat, radial-gradient(420px 300px at 40% 30%, rgba(52, 135, 90, .28), transparent 70%), #10271b !important;
  border: 1px solid rgba(193, 214, 197, .16) !important; border-radius: 12px !important; min-height: 300px; }
.about-profile-visual * { display: none !important; }

/* Reseñas: estado vacío honesto y aire entre el título y el formulario */
.reviews-empty { margin: 0; padding: 28px 30px; border: 1px dashed rgba(193, 214, 197, .22); border-radius: 12px; color: #a3b0a6; max-width: 46em; }
.review-form-stage h2 { margin-bottom: 26px !important; }