/* ============================================================
   Forrate — páginas internas (rediseño 4 nov 2026)
   Se carga DESPUÉS del <style> propio de cada página y lo afina.
   La portada no lo usa: tiene su propio diseño.
   Cubre: servicios (.svc-*), páginas por industria y artículos
   (<article>, .art-*), y componentes comunes (recuadros, preguntas,
   tablas, testimonios, relacionados y el cierre amarillo).
   Tokens base (colores y fuentes) en base.css.
   ============================================================ */
:root{
  --s-surface:#27231D; --s-surface-2:#302B24;
  --s-line:rgba(240,237,230,.1); --s-line-2:rgba(240,237,230,.18);
  --read:#E4E0D7; --soft:rgba(240,237,230,.64);
  --ink:#1C1915;
  --wide:1120px; --gutter:24px;
  --ease:cubic-bezier(.22,1,.36,1);
}
body{font-weight:400}
::selection{background:rgba(232,200,64,.35);color:var(--text)}

/* ---------- Rótulos (mismo sistema que la portada) ---------- */
.svc-tag,.art-tag{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-mono);font-size:12px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;color:var(--soft)}
.svc-tag::before,.art-tag::before{content:"";flex:none;width:7px;height:7px;border-radius:2px;background:var(--gold)}

/* ============================================================
   SERVICIOS
   ============================================================ */
.svc-hero{max-width:var(--wide);margin:0 auto;padding:148px var(--gutter) 56px;text-align:left}
.svc-hero h1{font-weight:700;font-size:clamp(44px,6.6vw,88px);line-height:.98;letter-spacing:-.05em;max-width:19ch;margin:22px 0 26px}
.svc-hero h1 span{color:var(--gold)}
.svc-hero p{font-size:clamp(17px,1.5vw,19.5px);line-height:1.6;color:var(--read);max-width:58ch;margin:0 0 34px}
.hero-actions{justify-content:flex-start;gap:12px}

/* Ficha de datos bajo el hero: tabla fina, no números gigantes */
.proof-bar{max-width:calc(var(--wide) - var(--gutter) * 2);margin:0 auto;padding:0;gap:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));border:1px solid var(--s-line);border-radius:18px;overflow:hidden;background:var(--s-surface)}
.proof-item{text-align:left;padding:20px 22px;border-left:1px solid var(--s-line)}
.proof-item:first-child{border-left:0}
.proof-num{font-family:var(--font-head);font-weight:700;font-size:30px;letter-spacing:-.04em;color:var(--text);font-variant-numeric:tabular-nums}
.proof-lbl{font-size:13.5px;letter-spacing:0;color:var(--soft);margin-top:6px;line-height:1.4}

/* Cuerpo en dos columnas: título de sección a la izquierda, contenido a la derecha */
.svc-body{max-width:var(--wide);padding:24px var(--gutter) 120px;display:grid;grid-template-columns:minmax(200px,300px) minmax(0,1fr);column-gap:clamp(40px,6vw,88px);align-items:start}
.svc-body>*{grid-column:2;min-width:0}
.svc-body>h2{grid-column:1;margin:0;padding-top:88px;font-weight:700;font-size:clamp(26px,2.6vw,34px);line-height:1.05;letter-spacing:-.04em;text-wrap:balance}
.svc-body>h2+*{margin-top:88px}
.svc-body>h2:first-child{padding-top:40px}
.svc-body>h2:first-child+*{margin-top:40px}
.svc-body>.cta-box{grid-column:1/-1}
.svc-body p,.svc-body li{font-size:17.5px;line-height:1.7;color:var(--read);text-wrap:pretty}
.svc-body p{margin-bottom:20px}
.svc-body h3{font-family:var(--font-head);font-weight:600;font-size:20px;letter-spacing:-.02em;color:var(--text);margin:36px 0 10px}
.svc-body strong{font-weight:600}
.svc-body :is(p,li) a{color:var(--text);text-decoration:underline;text-decoration-color:rgba(232,200,64,.6);text-decoration-thickness:1.5px;text-underline-offset:4px}
.svc-body :is(p,li) a:hover{text-decoration-color:var(--gold)}

/* Qué incluye: tabla de celdas con líneas finas */
.includes-grid{gap:1px;background:var(--s-line);border:1px solid var(--s-line);border-radius:18px;overflow:hidden;margin:8px 0 28px}
.inc-item{background:var(--s-surface);padding:22px 24px;gap:14px;transition:background-color .25s var(--ease)}
.inc-item:hover{background:var(--s-surface-2)}
.inc-icon{font-size:15px;margin-top:3px}
.inc-label{font-size:16.5px;font-weight:600;margin-bottom:4px;letter-spacing:-.01em}
.inc-desc{font-size:14.5px;line-height:1.55;color:var(--soft)}

/* Proceso */
.process-list{margin:4px 0 28px}
.process-list li{grid-template-columns:56px 1fr;gap:18px;padding:22px 0;border-bottom:1px solid var(--s-line)}
.process-list li::before{font-family:var(--font-head);font-weight:700;font-size:30px;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.step-content h3{font-family:var(--font-head);font-weight:600;font-size:19px;letter-spacing:-.02em;margin:0 0 6px}
.step-content p{font-size:15.5px;line-height:1.6;color:var(--soft);margin:0}

/* ============================================================
   PÁGINAS POR INDUSTRIA Y ARTÍCULOS (<article>)
   ============================================================ */
article{max-width:760px;padding:148px var(--gutter) 120px}
article h1,.art-hero h1{font-family:var(--font-head);font-weight:700;font-size:clamp(38px,5.4vw,64px);line-height:1;letter-spacing:-.05em;margin:22px 0 24px;text-wrap:balance}
article .sub{font-size:clamp(17px,1.5vw,19px);line-height:1.6;color:var(--read);padding-bottom:36px;margin-bottom:40px;border-bottom:1px solid var(--s-line)}
.art-meta{font-size:14.5px;color:var(--soft)}
:is(article,.art-body) h2{font-family:var(--font-head);font-weight:700;font-size:clamp(28px,3.2vw,38px);line-height:1.06;letter-spacing:-.04em;color:var(--text);margin:80px 0 20px;text-wrap:balance}
:is(article,.art-body) h3{font-family:var(--font-head);font-weight:600;font-size:21px;line-height:1.25;letter-spacing:-.02em;color:var(--text);margin:44px 0 12px}
:is(article,.art-body) p,:is(article,.art-body) li{font-size:18.5px;line-height:1.72;color:var(--read);text-wrap:pretty}
:is(article,.art-body) p{margin-bottom:22px}
:is(article,.art-body) li{margin-bottom:10px}
:is(article,.art-body) li::marker{color:var(--gold)}
:is(article,.art-body) strong{font-weight:600;color:var(--text)}
:is(article,.art-body) :is(p,li) a{color:var(--text);text-decoration:underline;text-decoration-color:rgba(232,200,64,.6);text-decoration-thickness:1.5px;text-underline-offset:4px;transition:text-decoration-color .2s}
:is(article,.art-body) :is(p,li) a:hover{text-decoration-color:var(--gold)}

/* Lista de lo que incluye (industria): dos columnas con marca amarilla */
.feat{gap:0 32px;margin:12px 0 32px;border-top:1px solid var(--s-line)}
.feat div{font-size:16px;line-height:1.55;color:var(--soft);padding:16px 0 16px 28px;border-bottom:1px solid var(--s-line)}
.feat div::before{top:16px;width:16px;height:16px;border-radius:5px;background:rgba(232,200,64,.16);color:var(--gold);font-size:11px;display:grid;place-items:center}
.feat strong{font-size:16px;color:var(--text)}

/* Qué cambia (industria): celdas con líneas, no tarjetas sueltas */
.valor{gap:1px;background:var(--s-line);border:1px solid var(--s-line);border-radius:18px;overflow:hidden;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.valor-item{border:0;border-radius:0;background:var(--s-surface);padding:24px}
.valor-item .vn{font-family:var(--font-head);font-weight:600;font-size:18.5px;letter-spacing:-.02em;line-height:1.25;margin:0 0 8px}
.valor-item .vd{font-size:15px;line-height:1.6;color:var(--soft)}

/* Pasos (industria) */
.step{margin:0;padding:18px 0;border-bottom:1px solid var(--s-line)}
.step:last-of-type{border-bottom:0}
.step p{margin:0}
.step b{display:inline-block;min-width:34px;font-family:var(--font-head);font-weight:700;font-size:22px;letter-spacing:-.03em;color:var(--gold)}

/* ============================================================
   COMPONENTES COMUNES
   ============================================================ */
/* Recuadro destacado: borde completo y fondo tenue (sin raya lateral) */
.highlight{border:1px solid rgba(232,200,64,.28);border-left:1px solid rgba(232,200,64,.28);background:rgba(232,200,64,.07);border-radius:16px;padding:22px 26px;margin:32px 0}
.highlight p{font-size:17.5px;line-height:1.65;color:var(--text)}

/* Tablas de precios */
.table-wrap{border:1px solid var(--s-line);border-radius:16px;margin:28px 0}
.price-table{font-size:15.5px;font-variant-numeric:tabular-nums}
:not(.table-wrap)>.price-table{border:1px solid var(--s-line);border-radius:16px;border-collapse:separate;border-spacing:0;overflow:hidden}
.price-table th{font-family:var(--font-body);font-size:12.5px;font-weight:600;letter-spacing:.06em;padding:14px 18px;background:var(--s-surface)}
.price-table td{color:var(--read);padding:15px 18px;line-height:1.5;border-bottom:1px solid var(--s-line)}
.price-table td:first-child{color:var(--text);font-weight:500}

/* Testimonios */
.testi-mini{background:var(--s-surface);border:1px solid var(--s-line);border-top:2px solid var(--gold);border-radius:22px;padding:28px 32px 24px;margin:20px 0 28px}
.testi-mini blockquote{font-family:var(--font-head);font-style:normal;font-weight:500;font-size:clamp(19px,1.8vw,23px);line-height:1.4;letter-spacing:-.015em;color:var(--text);margin:0 0 18px}
.testi-meta{font-size:14px;color:var(--soft)}

/* Preguntas frecuentes */
.faq-list{margin:4px 0 24px;border-top:1px solid var(--s-line)}
.faq-item{padding:22px 0;border-bottom:1px solid var(--s-line)}
.faq-item:last-child{border-bottom:1px solid var(--s-line)}
.faq-q{font-family:var(--font-head);font-weight:600;font-size:19px;line-height:1.3;letter-spacing:-.02em;color:var(--text);margin-bottom:8px}
.faq-a{font-size:16.5px;line-height:1.7;color:var(--read)}

/* Relacionados */
.related{margin-top:72px;padding-top:0;border-top:0}
.related-title,.related-t{display:block;font-family:var(--font-mono);font-size:12px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;color:var(--soft);margin-bottom:12px}
.related-links{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--s-line)}
.related-link,.related>a{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0;padding:15px 2px;font-size:16.5px;font-weight:500;color:var(--text);text-decoration:none;border-bottom:1px solid var(--s-line);transition:color .2s,padding .3s var(--ease)}
.related>.related-t+a{border-top:1px solid var(--s-line)}
.related-link:hover,.related>a:hover{color:var(--gold);opacity:1;padding-left:8px}

/* Cierre: el único bloque llamativo de cada página, en amarillo de marca */
.cta-box{position:relative;overflow:hidden;background:var(--gold);color:var(--ink);border:0;border-radius:28px;padding:clamp(32px,5vw,56px);margin-top:72px;text-align:left}
.cta-box::after{content:"";position:absolute;right:-60px;top:-60px;width:260px;height:260px;border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.35),transparent);pointer-events:none}
.cta-box h3,.cta-box h2{font-family:var(--font-head);font-weight:700;font-size:clamp(28px,3.6vw,44px);line-height:1.02;letter-spacing:-.045em;color:var(--ink);margin:0 0 14px;max-width:18ch;text-wrap:balance}
.cta-box p{font-size:17px;line-height:1.55;color:rgba(28,25,21,.78);max-width:52ch;margin:0 0 28px}
:root .cta-box :is(.btn,.btn-gold){background:var(--ink);color:#F0EDE6;box-shadow:none;margin-right:10px}
:root .cta-box :is(.btn,.btn-gold):hover{box-shadow:0 14px 30px -12px rgba(28,25,21,.6)}
:root .cta-box .btn-ghost{border-color:rgba(28,25,21,.35);color:var(--ink);background:transparent}
:root .cta-box .btn-ghost:hover{background:rgba(28,25,21,.08);color:var(--ink)}
.cta-box br{display:none}
.cta-box :is(.btn,.btn-gold,.btn-ghost){margin-bottom:10px!important}

/* Autor del artículo */
.author-card{background:var(--s-surface);border:1px solid var(--s-line);border-radius:20px;padding:22px 24px;margin-top:56px}
.author-card img{border-radius:16px}
.author-card .ac-name{font-family:var(--font-head);font-weight:600;font-size:18px;letter-spacing:-.02em}
.author-card .ac-bio{font-size:14.5px;line-height:1.6;color:var(--soft)}

/* Pasos numerados dentro de artículos */
.step-list li{padding-left:48px}
.step-list li::before{width:30px;height:30px;top:1px;border-radius:9px;font-size:14px}
.src{font-size:14px;color:var(--soft)}

/* Botones: respuesta al pulsar */
:root :is(.btn,.btn-gold,.btn-ghost,.btn-dark):active{transform:translateY(1px) scale(.99)}


/* ============================================================
   ÍNDICE DE SERVICIOS (/servicios/)
   ============================================================ */
.page-tag{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-mono);font-size:12px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;color:var(--soft)}
.page-tag::before{content:"";flex:none;width:7px;height:7px;border-radius:2px;background:var(--gold)}
.page-hero{max-width:var(--wide);padding:148px var(--gutter) 64px}
.page-hero h1{font-weight:700;font-size:clamp(44px,6.6vw,88px);line-height:.98;letter-spacing:-.05em;margin:22px 0 26px}
.page-hero p{font-size:clamp(17px,1.5vw,19.5px);line-height:1.6;color:var(--read);max-width:58ch}
/* Los servicios como índice: una fila por servicio, sin emojis ni números de adorno */
.svc-grid{max-width:calc(var(--wide) - var(--gutter) * 2);margin:0 auto;grid-template-columns:1fr;gap:0;background:none;border-top:1px solid var(--s-line)}
.svc-icon,.svc-num{display:none}
.svc-card,.svc-card--full{grid-column:auto;background:none;padding:30px 4px;border-bottom:1px solid var(--s-line);display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1.3fr) auto;grid-template-areas:"name desc arrow" "name tags arrow";gap:10px 48px;align-items:start;transition:background-color .3s var(--ease),padding .4s var(--ease)}
.svc-card::after{display:none}
.svc-card:hover{background:var(--s-surface);padding-left:20px;padding-right:20px}
.svc-name{grid-area:name;font-weight:700;font-size:clamp(24px,2.6vw,34px);line-height:1.05;letter-spacing:-.04em;text-wrap:balance}
.svc-desc{grid-area:desc;font-size:16px;line-height:1.6;color:var(--soft)}
.svc-tags{grid-area:tags;gap:6px}
.svc-tag-pill{font-size:12.5px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--soft);border:1px solid var(--s-line-2);border-radius:8px;padding:4px 9px}
.svc-tag-pill[data-p]{color:var(--gold);border-color:rgba(232,200,64,.4);font-variant-numeric:tabular-nums}
.svc-arrow{grid-area:arrow;align-self:center;margin:0;width:48px;height:48px;border-radius:14px;border:1px solid var(--s-line-2);display:grid;place-items:center;font-size:0;color:var(--text);transition:background-color .25s,color .25s,border-color .25s}
.svc-arrow::before{content:"→";font-size:18px;letter-spacing:0}
.svc-card:hover .svc-arrow{background:var(--gold);border-color:var(--gold);color:var(--ink)}
/* Por qué Forrate */
.diff-section{max-width:var(--wide);padding:120px var(--gutter) 40px;display:grid;grid-template-columns:minmax(200px,300px) minmax(0,1fr);gap:clamp(40px,6vw,88px)}
.diff-section h2{font-weight:700;font-size:clamp(28px,3vw,40px);line-height:1.04;letter-spacing:-.045em;margin:0}
.diff-section h2 br{display:none}
.diff-list{gap:0 40px;border-top:1px solid var(--s-line)}
.diff-item{padding:22px 0;border-bottom:1px solid var(--s-line);gap:14px}
.diff-dot{width:8px;height:8px;border-radius:2px;margin-top:8px}
.diff-text h3{font-family:var(--font-head);font-weight:600;font-size:19px;letter-spacing:-.02em;margin-bottom:6px}
.diff-text p{font-size:15.5px;line-height:1.6;color:var(--soft)}
/* Cierre amarillo de los índices (mismo bloque que .cta-box) */
.cta-strip{max-width:calc(var(--wide) - var(--gutter) * 2);margin:96px auto 120px;border-radius:28px;padding:clamp(36px,5vw,64px);text-align:left;position:relative;overflow:hidden}
.cta-strip::after{content:"";position:absolute;right:-60px;top:-60px;width:260px;height:260px;border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.35),transparent);pointer-events:none}
.cta-strip h2{font-weight:700;font-size:clamp(30px,4vw,52px);letter-spacing:-.045em;color:var(--ink);line-height:1}
.cta-strip p{font-size:17px;color:rgba(28,25,21,.78);max-width:52ch}
:root .cta-strip .btn-dark{background:var(--ink);color:#F0EDE6}

/* ============================================================
   SOBRE MÍ
   ============================================================ */
.about-hero{max-width:var(--wide);padding:148px var(--gutter) 72px;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(40px,6vw,88px)}
.hero-tag{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-mono);font-size:12px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;color:var(--soft)}
.hero-tag::before{content:"";flex:none;width:7px;height:7px;border-radius:2px;background:var(--gold)}
.hero-h1{font-weight:700;font-size:clamp(52px,8vw,112px);line-height:.92;letter-spacing:-.055em;margin:22px 0 28px}
.hero-h1 span{color:var(--gold)}
.hero-lead{font-size:clamp(17px,1.5vw,19.5px);line-height:1.6;color:var(--read);max-width:46ch}
.hero-photo{flex-direction:column;align-items:stretch}
.hero-photo-circle{width:100%;aspect-ratio:4/5;border-radius:32px;border:1px solid var(--s-line-2)}
.hero-photo-circle img{filter:none;object-position:center 30%}
.hero-photo-badge{position:absolute;left:16px;bottom:16px;margin:0;padding:8px 12px;border-radius:10px;background:rgba(28,25,21,.82);color:var(--text);font-family:var(--font-mono);font-weight:500;font-size:11.5px;letter-spacing:.08em;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.about-stats{max-width:calc(var(--wide) - var(--gutter) * 2);margin:0 auto;border:1px solid var(--s-line);border-radius:18px;overflow:hidden;background:var(--s-surface)}
.astat{padding:22px 24px;text-align:left;border-right:1px solid var(--s-line)}
.astat-num{font-family:var(--font-head);font-weight:700;font-size:34px;letter-spacing:-.04em;color:var(--text)}
.astat-num em{font-size:inherit;color:var(--gold)}
.astat-lbl{font-size:13.5px;letter-spacing:0;color:var(--soft);margin-top:6px}
.about-body{max-width:760px;padding:40px var(--gutter) 120px}
.about-body h2{font-weight:700;font-size:clamp(28px,3.2vw,38px);line-height:1.06;letter-spacing:-.04em;margin:80px 0 20px}
.about-body p{font-size:18.5px;line-height:1.72;color:var(--read)}
.results-grid{border:1px solid var(--s-line);border-radius:18px;overflow:hidden;background:var(--s-line)}
.result-card{background:var(--s-surface);padding:26px 24px}
.result-num{font-family:var(--font-head);font-weight:700;font-size:40px;letter-spacing:-.045em;color:var(--gold);font-variant-numeric:tabular-nums}
.result-label{font-size:14.5px;line-height:1.5;color:var(--soft)}
.svc-list{border-top:1px solid var(--s-line)}
.svc-list li{display:block;position:relative;padding:16px 0 16px 30px;font-size:16.5px;line-height:1.6;color:var(--read);border-bottom:1px solid var(--s-line)}
.svc-list li::before{position:absolute;left:2px;top:16px}
.svc-list li:last-child{border-bottom:1px solid var(--s-line)}
.social-links{gap:10px}
.social-link{border-radius:12px}

/* ============================================================
   ÍNDICE DE INDUSTRIAS Y CASOS
   ============================================================ */
article:has(> .grid){max-width:var(--wide)}
article>.grid{gap:1px;background:var(--s-line);border:1px solid var(--s-line);border-radius:22px;overflow:hidden;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
article>.grid .card{border:0;border-radius:0;background:var(--bg);padding:26px 26px 24px;transition:background-color .25s var(--ease)}
article>.grid .card:hover{background:var(--s-surface);transform:none}
article>.grid .card .k{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--soft)}
article>.grid .card h2{font-size:24px;font-weight:700;letter-spacing:-.035em;margin:10px 0 8px}
article>.grid .card p{font-size:15.5px;line-height:1.55;color:var(--soft);margin:0 0 14px}
article>.grid .card .arrow{font-size:14px;font-weight:600;color:var(--gold)}
.page-title{font-weight:700;letter-spacing:-.05em;line-height:.98}
.page-sub{color:var(--read)}
.caso{border-radius:24px;border-color:var(--s-line);background:var(--s-surface)}
.caso h2{font-weight:700;letter-spacing:-.035em}
.caso p{color:var(--soft)}


/* ============================================================
   ÍNDICE DEL BLOG Y TARJETAS DE CASOS
   ============================================================ */
main:has(.blog-grid),main:has(.casos){max-width:var(--wide);padding:148px var(--gutter) 120px}
.page-title{font-size:clamp(44px,6.4vw,84px);margin:22px 0 18px}
.page-sub{font-size:clamp(17px,1.5vw,19px);line-height:1.6;max-width:58ch}
.filter-chip{font-size:14px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--soft);border-color:var(--s-line-2);border-radius:12px;padding:8px 14px;transition:color .2s,border-color .2s,background-color .2s}
.filter-chip:hover{color:var(--text);border-color:rgba(240,237,230,.4)}
.filter-chip.active{color:var(--ink);background:var(--gold);border-color:var(--gold)}
.blog-count{font-size:13.5px;color:var(--soft);letter-spacing:0}
.blog-grid{gap:1px;background:var(--s-line);border:1px solid var(--s-line);border-radius:22px;overflow:hidden;grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}
.blog-card{background:var(--bg);border:0;border-radius:0;padding:28px 28px 22px;gap:12px;transition:background-color .25s var(--ease)}
.blog-card:hover{background:var(--s-surface);border-color:transparent;transform:none}
.card-tag{font-family:var(--font-mono);font-size:11.5px;font-weight:500;letter-spacing:.08em;color:var(--soft)}
.card-title{font-weight:700;font-size:22px;line-height:1.15;letter-spacing:-.035em;text-wrap:balance}
.card-desc{font-size:15.5px;line-height:1.55;color:var(--soft)}
.card-meta{font-size:13px;color:var(--soft);border-top:0;padding-top:6px}
.card-read{font-size:13.5px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--gold)}
.blog-card.featured{background:var(--s-surface);border:0;padding:clamp(28px,4vw,44px)}
.blog-card.featured .card-title{font-size:clamp(28px,3.4vw,42px);letter-spacing:-.045em}
.blog-card.featured .card-desc{font-size:17px}
.featured-label{font-family:var(--font-mono);font-size:11.5px;font-weight:500;letter-spacing:.08em}
.badge-new{font-family:var(--font-body);font-size:11.5px;letter-spacing:0;text-transform:none;border-radius:7px;padding:3px 8px;color:var(--ink)}
.caso{border-radius:24px;overflow:hidden}
.caso-leer{color:var(--gold)}

/* ============================================================
   TELÉFONO Y TABLET
   ============================================================ */

/* ============================================================
   BREADCRUMBS (4 nov 2026): salen del BreadcrumbList de cada página
   ============================================================ */
.migas{margin:0 0 30px}
.migas ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;row-gap:6px}
.migas ol li{display:inline-flex;align-items:center;min-width:0;margin:0;font-size:14px;line-height:1.4;color:var(--soft)}
.migas ol li::marker{content:none}
.migas ol li+li::before{content:"";flex:none;width:5px;height:5px;margin:0 12px 0 9px;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;transform:rotate(45deg);opacity:.55}
.migas ol li a{color:var(--soft);text-decoration:none;border-radius:4px;transition:color .2s}
.migas ol li a:hover{color:var(--text);text-decoration:underline;text-decoration-color:rgba(232,200,64,.6);text-underline-offset:4px}
.migas [aria-current="page"]{color:var(--text);font-weight:500;max-width:48ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.about-hero .migas,.svc-hero .migas,.page-hero .migas{margin-bottom:26px}

/* Bloques a todo el ancho del contenedor: margen lateral cuando la pantalla es más angosta */
@media (max-width:1168px){
  .proof-bar,.about-stats,.svc-grid,.cta-strip{margin-left:var(--gutter);margin-right:var(--gutter)}
}
@media (max-width:900px){
  .svc-card,.svc-card--full{grid-template-columns:1fr auto;grid-template-areas:"name arrow" "desc desc" "tags tags";gap:12px 16px;padding:26px 2px}
  .svc-card:hover{padding-left:2px;padding-right:2px;background:none}
  .diff-section{grid-template-columns:1fr;gap:28px;padding-top:80px}
  .about-hero{grid-template-columns:1fr;padding-top:118px}
  .hero-photo-circle{aspect-ratio:1/1}
  .about-stats{grid-template-columns:1fr 1fr}
  .astat:nth-child(2){border-right:0}
  .astat:nth-child(-n+2){border-bottom:1px solid var(--s-line)}
  .svc-body{grid-template-columns:1fr}
  .svc-body>h2,.svc-body>*{grid-column:1}
  .svc-body>h2{padding-top:64px;margin-bottom:18px}
  .svc-body>h2+*,.svc-body>h2:first-child+*{margin-top:0}
  .svc-body>h2:first-child{padding-top:40px}
}
@media (max-width:640px){
  .migas{margin-bottom:22px}
  .migas ol li{font-size:13.5px}
  .migas [aria-current="page"]{max-width:58vw}
  main:has(.blog-grid),main:has(.casos){padding-top:116px}
  .blog-grid{grid-template-columns:1fr}
  :root{--gutter:20px}
  .svc-hero{padding-top:118px}
  .hero-actions :is(.btn-gold,.btn-ghost){flex:1 1 100%}
  .proof-bar{grid-template-columns:1fr 1fr;border-radius:16px}
  .proof-item{border-left:0;border-top:1px solid var(--s-line)}
  .proof-item:nth-child(-n+2){border-top:0}
  .proof-item:nth-child(even){border-left:1px solid var(--s-line)}
  .proof-num{font-size:26px}
  .svc-body p,.svc-body li{font-size:17px}
  article{padding-top:116px}
  :is(article,.art-body) p,:is(article,.art-body) li{font-size:17.5px;line-height:1.68}
  :is(article,.art-body) h2{margin-top:60px}
  .feat{grid-template-columns:1fr}
  .cta-box{border-radius:22px}
  :root .cta-box :is(.btn,.btn-gold,.btn-ghost){width:100%;margin-right:0}
}
@media (prefers-reduced-motion:reduce){
  .inc-item,.related-link,.related>a{transition:none}
}