/* ==========================================================
   Capa «moderno» (se carga al final de todo)
   Misma tipografía oficial (Bebas Neue + DIN Pro) y mismos colores de marca
   (verde #003721, dorado #f7b100, negro #141414 y blanco), con un trato más
   fino y editorial: menos peso en la letra, etiquetas sin cápsulas, botones
   y tarjetas más limpios, líneas finas en lugar de bloques.
   Los tamaños de texto NO cambian (se mantienen los pedidos por el cliente).
   ========================================================== */

/* ---------- 1. Pesos de DIN Pro más finos (mismos archivos de la fuente oficial) ----------
   Lo que estaba en 600–700 ahora usa DIN Pro Medium; Bold solo queda para 800–900.
   Un solo cambio aquí aligera todo el sitio. */
@font-face { font-family: "DIN Pro"; src: url("../fonts/DINPro-Medium.ttf") format("truetype"); font-weight: 500 700; font-style: normal; font-display: swap; }
@font-face { font-family: "DIN Pro"; src: url("../fonts/DINPro-Bold.ttf") format("truetype"); font-weight: 800 900; font-style: normal; font-display: swap; }

:root {
  --text: #2f2f2b;          /* un poco más oscuro: compensa la letra más fina */
  --muted: #55554f;
  --line: #e3e5e4;
  --hair: rgba(20, 20, 20, .09);
}
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-kerning: normal; }
strong, b { font-weight: 600; }

/* ---------- 2. Títulos: Bebas Neue con más aire entre letras ---------- */
h1, h2, h3, .h2, .h3 { letter-spacing: .018em; }
.h2 { line-height: 1.02; }
.head .lead, .lead { letter-spacing: .002em; }
h3 { letter-spacing: .022em; }

/* ---------- 3. Etiquetas superiores: de cápsula a línea editorial ---------- */
.eyebrow, .red-esal__pill, .blog-pill { display: inline-flex !important; align-items: center; gap: 12px; padding: 0 !important; margin-bottom: 18px; border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; font-size: 13px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: #003721 !important; }
.eyebrow::before, .red-esal__pill::before { content: ""; flex: none; width: 28px; height: 1.5px; border-radius: 0; background: #f7b100; animation: none; transform: none; }
.head--center .eyebrow { justify-content: center; }
#metodo .eyebrow, .stats-sec .eyebrow, .faq-sec .faq-dark .eyebrow { color: #fff !important; }
.stats-sec .eyebrow::before, #metodo .eyebrow::before { background: #f7b100; }
.hf__tag, .slide__tag { border-radius: 4px !important; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; font-size: 12px; padding: 7px 12px; }

/* ---------- 4. Botones: más finos y sin brillos exagerados ---------- */
.btn { font-weight: 500; letter-spacing: .02em; border-radius: 999px; }
.btn--grad { background: #f7b100; box-shadow: none; }
.btn--grad:hover { background: #ffc21a; box-shadow: 0 10px 22px -14px rgba(247, 177, 0, .9); }
.btn--grad::after { display: none; }
.btn--dark { background: #141414; }
.btn--dark:hover { background: #003721; }
.btn--ghost { background: transparent; border-color: rgba(20, 20, 20, .22); backdrop-filter: none; }
.btn--ghost:hover { border-color: #141414; background: #fff; }
.nav a:not(.btn) { font-weight: 500; letter-spacing: .01em; }

/* ---------- 5. Tarjetas: radios coherentes, borde fino, sombra solo al pasar el cursor ---------- */
.why-card, .plan, .way, .info, .rowc, .post-card, .ucard, .tl__card, .tile, .nums > div, .faq-cta, .lead-sec .form, .route-box, .cta-card { border-radius: 20px; }
.why-card, .plan, .way, .info, .rowc, .post-card, .ucard { border: 1px solid var(--hair); box-shadow: none; background: #fff; }
.why-card:hover, .plan:hover, .way:hover, .info:hover, .rowc:hover, .post-card:hover, .ucard:hover { box-shadow: 0 22px 44px -30px rgba(20, 20, 20, .35); border-color: rgba(20, 20, 20, .16); transform: translateY(-3px); }
.why-card__ic { border-radius: 12px; background: #003721; }
.why-card h3, .plan h3, .way h3, .info h3 { font-weight: 400; }
.why-card p, .way p, .info p { color: var(--muted); }
.plan--pop { border: 1.5px solid #f7b100; box-shadow: none; }
.plan__badge { border-radius: 4px; letter-spacing: .1em; text-transform: uppercase; font-size: 11.5px; font-weight: 500; padding: 5px 10px; }
.tag { border-radius: 4px; letter-spacing: .08em; text-transform: uppercase; font-size: 11.5px; font-weight: 500; }

/* ---------- 6. Bloques grandes: esquinas más sobrias ---------- */
#metodo, .stats-sec, .lead-sec, .finale { border-radius: 28px; }
.slider, .svc-panel { border-radius: 24px; }
.split__media, .split__media > img { border-radius: 22px; }
.split__media::after { border-radius: 22px; }

/* ---------- 7. Listas y filas con líneas finas ---------- */
.checks li { font-weight: 400; }
.feats b, .svc button b, .svc__name { font-weight: 500; }
.post-card__more, .more-link, .plans-more, .plan__pay { font-weight: 500; letter-spacing: .02em; }
.footer h4, .footer .footer__h { font-weight: 400; letter-spacing: .08em; }
.footer a { font-weight: 400; }

/* ---------- 8. Formularios: campos limpios ---------- */
.field span { font-weight: 500; letter-spacing: .02em; font-size: 14px; color: #4a4a45; }
.field input, .field select, .field textarea { border-radius: 12px; border-color: #d9d9d3; font-weight: 400; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: #003721; box-shadow: 0 0 0 3px rgba(0, 55, 33, .12); }

/* ---------- 9. Enlaces de texto: subrayado fino que se dibuja ---------- */
.prose a, .article__body a, .lead a { text-decoration-thickness: 1px; text-underline-offset: 4px; }

@media (max-width: 760px) {
  .why-card, .plan, .way, .info, .rowc, .post-card, .ucard { border-radius: 18px; }
  #metodo, .stats-sec, .lead-sec, .finale { border-radius: 22px; }
}

/* ==========================================================
   Lenguaje visual «Moderna Pro» en colores de marca
   (sin degradados dorado→verde ni fondos amarillos pálidos)
   ========================================================== */

/* Etiquetas en cápsula blanca con punto dorado, como en la propuesta Moderna Pro */
.eyebrow, .red-esal__pill, .blog-pill { padding: 7px 16px 7px 12px !important; border: 1px solid var(--hair) !important; border-radius: 999px !important; background: #fff !important; box-shadow: 0 6px 18px -12px rgba(20, 20, 20, .25) !important; font-size: 12.5px; letter-spacing: .12em; }
.eyebrow::before, .red-esal__pill::before { width: 7px; height: 7px; border-radius: 50%; }
#metodo .eyebrow, .stats-sec .eyebrow { background: rgba(255, 255, 255, .1) !important; border-color: rgba(255, 255, 255, .22) !important; box-shadow: none !important; }

/* Tarjetas flotantes de interfaz sobre el banner (decorativas) */
.hf__chips { position: absolute; z-index: 4; inset: 0; pointer-events: none; }
.hfc { position: absolute; display: flex; align-items: center; gap: 12px; padding: 12px 16px 12px 12px; border-radius: 16px; background: rgba(255, 255, 255, .94); color: #141414; box-shadow: 0 24px 50px -20px rgba(0, 0, 0, .55); animation: flota 7s ease-in-out infinite; }
.hfc b { display: block; font-size: 14.5px; font-weight: 600; line-height: 1.2; }
.hfc small { display: block; font-size: 12.5px; color: #5c5c56; line-height: 1.3; }
.hfc__ic { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; font-size: 16px; font-weight: 700; flex: none; }
.hfc__ic--g { background: #003721; color: #fff; }
.hfc__ic--k { background: #141414; color: #f7b100; }
.hfc__ic--y { background: #f7b100; color: #141414; }
.hfc__bars { display: flex; align-items: flex-end; gap: 4px; width: 36px; height: 36px; padding: 4px; border-radius: 11px; background: #003721; flex: none; }
.hfc__bars i { flex: 1; height: var(--h); border-radius: 2px; background: #f7b100; }
.hfc--1 { right: 22%; top: 24%; animation-delay: -1s; }
.hfc--2 { right: 5%; top: 40%; animation-delay: -3s; }
.hfc--3 { right: 19%; top: 58%; animation-delay: -5s; }
.hfc--4 { right: 4%; top: 72%; animation-delay: -2s; }
@media (max-width: 1180px) { .hf__chips { display: none; } }

/* Collage de dos fotos superpuestas con tarjeta flotante */
.split__media--collage { overflow: visible; }
.split__media--collage::after { display: none; }
.split__media--collage > img:first-child { width: 82%; height: 100%; position: absolute; left: 0; top: 0; }
.split__media--collage { aspect-ratio: 5 / 4.4; }
.split__img2 { position: absolute !important; right: 0; bottom: -4%; width: 52%; height: 52%; object-fit: cover; border: 6px solid #fff; border-radius: 24px !important; box-shadow: 0 30px 60px -28px rgba(0, 0, 0, .45); clip-path: none !important; z-index: 2; }
.split__media--collage .chip--a { right: 10%; top: 6%; left: auto; bottom: auto; }
.split__media--collage .chip--b { left: 4%; bottom: 8%; }
@media (max-width: 900px) { .split__media--collage { width: 100%; } }

/* Tres tarjetas con mini interfaz: base clara, ilustración en color de marca */
.cards3--sep { margin-top: clamp(56px, 7vw, 96px); gap: 22px; }
.ucard { background: #f6f6f6; border: 0 !important; border-radius: 28px; padding: 14px 14px 28px; }
.ucard:hover { background: #f1f1ef; }
.ucard__ui { border-radius: 20px; }
.ucard h3 { font-size: 26px; margin: 22px 14px 8px; font-weight: 400; }
.ucard p { margin: 0 14px; }
.ui-win { border-radius: 14px; box-shadow: 0 24px 44px -20px rgba(0, 0, 0, .4); }
.split__media--collage > .split__img2 { width: 52%; height: 52%; right: 0; left: auto; top: auto; bottom: -4%; }
.split__media--collage > img:first-child { width: 82%; height: 88%; }
.split__media--collage { background: none; box-shadow: none; }
.split__media--collage .chip--b { left: 3%; bottom: 14%; max-width: 40%; white-space: normal; line-height: 1.25; }
.ucard__ui { aspect-ratio: auto; min-height: 238px; }
.ui-plan .ui-grid span { padding-block: 6px; font-size: 12.5px; line-height: 1.25; }

/* ---------- Ritmo sobrio (guiado por la propuesta Sobria Plus): fondos neutros alternados, sin halos de color ---------- */
.sec::before, .sec::after { display: none !important; }

/* ---------- Tarjetas simples (estilo Sobria Plus): blancas, borde fino, sin colores de relleno ---------- */
.tile--txt, .tile--amber, .tile--mint { background: #fff !important; color: #323c36 !important; border: 1px solid var(--hair); box-shadow: none; }
.tile--txt h3 { color: #141414 !important; }
.tile--txt li, .tile--txt p { color: #4d5750 !important; }
.tile--txt .tag, .tile--txt .tag--green { background: none !important; padding: 0 !important; border-radius: 0; color: #9a6a00 !important; font-size: 12.5px; letter-spacing: .14em; }
.tile--txt .tile__foot { color: #003721 !important; font-weight: 500; }
.tile--txt li::marker, .tile--txt li::before { color: #003721 !important; }
.tile--txt:hover { border-color: rgba(20, 20, 20, .2); box-shadow: 0 22px 44px -30px rgba(20, 20, 20, .35); }
.tile { border-radius: 20px; }
.why-card, .plan, .way, .rowc, .info { background: #fff; border: 1px solid var(--hair); box-shadow: none; }
.ucard { background: #fff; border: 1px solid var(--hair) !important; }
.ucard:hover { background: #fff; }
.plan--pop { border: 1.5px solid #003721; }
.tile--photo .tag, .tile--big .tag { background: rgba(255, 255, 255, .92) !important; color: #141414 !important; }

/* ---------- Noticias de la home: idéntico a Sobria Plus (colores de marca) ---------- */
#blog.blog-sec { background: #e9ebea; --b-accent: #003721; --b-soft: #e4ebe6; --b-btn: #003721; --b-btn-ink: #fff; --b-title-size: clamp(28px, 3.2vw, 38px); --b-line: rgba(20, 20, 19, .1); padding-block: clamp(80px, 10vw, 140px); }
#blog .blog-pill { padding: 8px 18px !important; border: 0 !important; border-radius: 999px !important; background: var(--b-soft) !important; box-shadow: none !important; color: var(--b-accent) !important; font-size: 13px; font-weight: 700; letter-spacing: .14em; }
#blog .blog-pill::before { display: none; }
#blog .blog-title { font-size: var(--b-title-size); line-height: 1.06; }
#blog .blog-lead { font-size: clamp(16px, 1.3vw, 18px); }
#blog .blog-more { background: var(--b-btn); font-size: 15px; font-weight: 700; padding: 14px 22px; }
#blog .blog-more:hover { background: #0b4a30; }
#blog .post-card { border-radius: 18px; border: 1px solid var(--b-line); background: #fff; }
#blog .post-card__img { aspect-ratio: 16 / 10; }
#blog .post-card__body { padding: 20px 22px 24px; gap: 10px; }
#blog .post-card .post-meta { font-size: 13px; flex-wrap: wrap; gap: 8px; }
#blog .post-card .post-meta span:nth-child(n+4) { display: none; }
#blog .post-card h3 { font-size: 21px; line-height: 1.25; -webkit-line-clamp: unset; display: block; overflow: visible; letter-spacing: -.01em; }
#blog .post-card p { font-size: 15.5px; line-height: 1.6; -webkit-line-clamp: unset; display: block; overflow: visible; }
#blog .post-card__more { font-size: 14.5px; font-weight: 700; color: var(--b-accent); }

/* ---------- Alternancia blanco / gris por sección (nunca dos iguales seguidas) ---------- */
:root { --gris: #eeefee; }
#servicios, #nosotros, #ruta, #faq, #contacto { background: #fff; }
#lineas, #por-que-elegirnos, #membresias, #red, #blog.blog-sec { background: var(--gris); }
#red .red-org--real { background: #fff; }
#red .red-org--soon { background: #fff; }
#red .red-org--join { background: var(--r-join-bg); color: var(--r-join-ink); }
/* tarjetas: blancas sobre gris, grises suaves sobre blanco */
#por-que-elegirnos .why-card, #membresias .plan, #lineas .tile--txt { background: #fff; }
#ruta .route-box, #ruta .way, #ruta .rowc, #ruta .info { background: var(--gris); border-color: transparent; }
#contacto .form { background: var(--gris); }