/* pages.css — estilos de las páginas interiores (servicio, casos, sectores) y menú ampliado de la home. Fase 2 SEO. */

/* Menú con más enlaces: un poco más compacto en pantallas medianas */
@media(min-width:901px) and (max-width:1280px){.nav nav{gap:16px;font-size:12px}.nav .pill-small{gap:12px;padding-inline:14px}}
@media(min-width:901px) and (max-width:1060px){.nav nav{gap:12px;font-size:11px;letter-spacing:.08em}}

/* Enlace "ver el caso completo" dentro de cada caso (home y sectores) */
.client-copy .case-more{display:block;width:max-content;margin-top:22px;font-size:13px;letter-spacing:.12em;color:var(--red);border-color:var(--red)}
.client-copy .case-more:hover{color:var(--black);border-color:var(--black)}
.client-copy h3 a:hover,.client-copy h2 a:hover{color:var(--red)}

/* Hero interior: más corto que el de la home */
.page-hero{min-height:auto;padding:160px 5vw 70px}
.page-hero .hero-title{font-size:clamp(54px,9vw,150px)}
.page-hero .hero-script{font-size:clamp(40px,5.5vw,88px);margin:-.1em 6vw 0 auto}
.page-hero .hero-bottom{margin-top:1.4rem}
.page-hero .hero-bottom p{max-width:640px;font-size:20px}
.page-hero .hero-orbit{top:8%}
.crumbs{position:relative;z-index:3;display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 22px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;opacity:.8}
.crumbs i{font-style:normal;opacity:.6}
.crumbs a:hover{text-decoration:underline}
.crumbs span{opacity:.75}

/* Títulos de sección en páginas interiores, un punto más contenidos */
.page-section .section-head h2{font:clamp(48px,7vw,112px)/.85 var(--anton);letter-spacing:-.03em;margin:22px 0 0}
.page-section .section-head h2 .script{font-size:1.05em;color:var(--red)}
.page-section.black .section-head h2 .script,.page-section.red .section-head h2 .script{color:var(--cream);text-shadow:0 0 18px #f8f8f255}
.page-section .section-head{margin-bottom:60px}
.page-section .case-intro-side{min-height:auto;font-size:clamp(20px,1.7vw,26px);padding:26px 26px 22px}
.page-section .case-intro-side.light{border-color:var(--cream)}
.page-section .case-intro-side .text-link{margin-top:18px;font-size:13px;letter-spacing:.12em}
.case-intro-side .text-link{display:inline-block}

/* Statement de la página de servicio */
.page-statement{min-height:auto;padding-block:120px}
.page-statement:before{content:"12";right:-2vw}
.page-statement .mega{font-size:clamp(44px,6.5vw,110px)}

/* Carril de servicios con 6 bloques (servicio) */
.services-lede{max-width:620px;font-size:21px;margin:-40px 0 50px;color:#f8f8f2cc}
.service-rail.rail-6 article{min-height:340px;border-bottom:1px solid #ffffff60}
.service-rail.rail-6 article:nth-child(3n){border-right:0}
.service-rail.rail-6 article:nth-last-child(-n+3){border-bottom:0}
.service-rail.rail-6 article:last-child{border-right:0}
.service-rail.rail-6 h3{font-size:32px;margin-top:28px}
.service-rail.rail-6 p{font-size:19px}
@media(max-width:900px){.service-rail.rail-6 article{border-right:0;border-bottom:1px solid #ffffff60;min-height:auto}.service-rail.rail-6 article:nth-last-child(-n+3){border-bottom:1px solid #ffffff60}.service-rail.rail-6 article:last-child{border-bottom:0}.services-lede{margin-top:-30px}}

/* Por qué orgánico (servicio) */
.why-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:26px}
.why-grid article{position:relative;padding:34px 34px 30px 110px;border:1px solid var(--black);background:#fff;box-shadow:10px 10px 0 var(--black);transition:.35s}
.why-grid article b{position:absolute;left:30px;top:26px;font:58px/1 var(--anton);color:transparent;-webkit-text-stroke:1px var(--red)}
.why-grid article h3{font:30px/1 var(--anton);text-transform:uppercase;margin:0 0 12px}
.why-grid article p{margin:0;font-size:19px;color:#141414b8;line-height:1.4}
.why-grid article:nth-child(even){background:var(--black);color:var(--cream)}
.why-grid article:nth-child(even) p{color:#f8f8f2c0}
.why-grid article:nth-child(even){box-shadow:10px 10px 0 var(--red)}
.why-grid article:hover{transform:translate(-4px,-5px)}
@media(max-width:900px){.why-grid{grid-template-columns:1fr}}
@media(max-width:560px){.why-grid article{padding:28px 20px 24px}.why-grid article b{position:static;display:block;margin-bottom:10px;font-size:44px}}

/* Reto / enfoque (casos) */
.story-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:30px}
.story-grid article{padding:40px 36px;border:1px solid #ffffff45;position:relative}
.story-grid article:first-child{background:var(--red)}
.story-grid article:last-child{background:var(--cream);color:var(--black);box-shadow:14px 14px 0 var(--red);transform:rotate(.6deg)}
.story-grid h3{font:38px/1 var(--anton);text-transform:uppercase;margin:0 0 18px}
.story-grid p{margin:0;font-size:clamp(19px,1.5vw,23px);line-height:1.4}
@media(max-width:900px){.story-grid{grid-template-columns:1fr}.story-grid article:last-child{transform:none}}

/* Rejilla de carátulas de reels (casos) */
.reels-section{padding-inline:5vw}
.cover-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:28px 24px;padding:20px 0 50px}
.cover-grid .cover-card{width:270px;height:480px}
.cover-grid .cover-card>div strong{font-size:50px}
@media(max-width:560px){.cover-grid{gap:20px 14px}.cover-grid .cover-card{width:calc(50% - 7px);height:auto;aspect-ratio:9/16}.cover-grid .cover-card>div strong{font-size:34px}.cover-grid .cover-card>div{left:12px;bottom:12px}.cover-grid .cover-card>b{width:30px;height:30px;right:10px;bottom:12px;font-size:14px}}

/* Testimonio único (casos) */
.single-voice .section-head{grid-template-columns:1fr}
.voice-grid.single{display:grid;grid-template-columns:minmax(260px,420px);justify-content:center;padding-bottom:50px}
.voice-grid.single article{transform:rotate(-1.2deg)}
.voice-grid.single .testimonial-video{aspect-ratio:9/12}

/* Bloque de texto "¿y tu empresa?" */
.how-link{padding-block:90px}
.prose{max-width:960px;margin:0 auto}
.prose .big{font-size:clamp(24px,2.6vw,38px);line-height:1.25;font-family:var(--anton);text-transform:uppercase;letter-spacing:-.01em;margin:18px 0 0}
.prose .big a{color:var(--red);border-bottom:3px solid}
.prose .big a:hover{color:var(--black)}

/* Tarjetas de casos */
.case-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.case-card{display:grid;grid-template-columns:104px 1fr;gap:20px;align-items:start;padding:22px;border:1px solid var(--black);background:#fff;box-shadow:8px 8px 0 var(--black);color:var(--black);transition:.3s}
.case-card img{width:104px;aspect-ratio:9/17;object-fit:cover;object-position:top;border:5px solid var(--black);border-radius:16px;background:var(--black)}
.case-card small{display:block;font-size:11px;letter-spacing:.14em;color:var(--red);font-weight:700}
.case-card h3{font:28px/1 var(--anton);text-transform:uppercase;margin:8px 0 10px}
.case-card p{margin:0 0 14px;font-size:17px;line-height:1.35;color:#141414b0}
.case-card b{font-size:12px;letter-spacing:.14em}
.case-card:hover{transform:translate(-4px,-5px);box-shadow:13px 13px 0 var(--red)}
.cases-list .section-head{grid-template-columns:1fr minmax(280px,450px)}
@media(max-width:1100px){.case-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.case-grid{grid-template-columns:1fr}}
@media(max-width:560px){.case-card{grid-template-columns:84px 1fr;gap:14px;padding:16px}.case-card img{width:84px}.case-card h3{font-size:24px}}

/* Tarjetas de sectores */
.sector-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.sector-card{display:flex;flex-direction:column;min-height:320px;padding:36px 32px;border:1px solid #ffffff60;color:var(--cream);transition:.35s}
.sector-card span{font:76px/1 var(--anton);color:transparent;-webkit-text-stroke:1px currentColor}
.sector-card h3{font:34px/1 var(--anton);text-transform:uppercase;margin:26px 0 12px}
.sector-card p{font-size:18px;line-height:1.4;opacity:.8;margin:0 0 26px}
.sector-card b{margin-top:auto;font-size:12px;letter-spacing:.15em}
.sector-card:hover{background:var(--cream);color:var(--black);transform:translateY(-10px) rotate(-.6deg);box-shadow:0 20px 40px #0008}
.sectors-list .section-head{grid-template-columns:1fr}
.light-note{margin-top:50px;color:#f8f8f2a8;font-size:15px;text-align:center}
.light-note a{border-bottom:1px solid;color:var(--cream)}
.score .light-note{margin-top:0}
@media(max-width:900px){.sector-grid{grid-template-columns:1fr}.sector-card{min-height:auto}}

/* Lista "qué incluye" (sectores) */
.include-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:16px 30px}
.include-list li{display:grid;grid-template-columns:54px 1fr;gap:14px;align-items:start;padding:20px 22px;border:1px solid #ffffff45;font-size:19px;line-height:1.35;color:#f8f8f2d0}
.include-list li b{font:40px/1 var(--anton);color:var(--red)}
.include-list li strong{color:var(--cream);text-transform:uppercase;font-family:var(--anton);font-weight:400;letter-spacing:.03em}
@media(max-width:900px){.include-list{grid-template-columns:1fr}}

/* Banda de CTA final */
.cta-band{text-align:center;display:flex;flex-direction:column;align-items:center;padding-block:120px}
.cta-band h2{font:clamp(54px,8.5vw,140px)/.85 var(--anton);letter-spacing:-.035em;margin:24px 0 40px;max-width:1200px}
.cta-band .cta-text{max-width:640px;font-size:21px;margin:-14px 0 36px}
.cta-band .cta-note{margin:22px 0 0;font-size:13px;letter-spacing:.06em;opacity:.75;max-width:520px}

/* Caso en página de caso: el título es h2 pero se ve como en la home */
.client-copy h2{position:relative;font:clamp(46px,6vw,94px)/.9 var(--anton);text-transform:uppercase;margin:22px 0 28px;max-width:820px}
.client-copy h2:after{content:"↘";display:inline-block;margin-left:.16em;color:var(--red);font-size:.48em;vertical-align:top;transform:rotate(-12deg)}
@media(max-width:560px){.client-copy h2{font-size:14vw}.client-copy h2:after{font-size:.36em}}

/* Ajustes móviles del hero interior */
@media(max-width:900px){.page-hero{padding-top:130px}.page-hero .hero-title{font-size:clamp(56px,15vw,120px)}}
@media(max-width:560px){.page-hero{padding:110px 22px 50px}.page-hero .hero-title{font-size:17vw}.page-hero .hero-script{font-size:12vw}.page-hero .hero-bottom .pill{margin-top:20px}.crumbs{font-size:10px}.page-section .section-head h2{font-size:15vw}.cta-band h2{font-size:15vw}.cta-band{padding-block:90px}.prose .big{font-size:26px}}

/* ---- Blog (v2) ---- */
.post-section{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(260px,.6fr);gap:6vw;align-items:start}
.post-body{max-width:760px}
.post-body h2{font:clamp(30px,3.2vw,46px)/1 var(--anton);text-transform:uppercase;letter-spacing:-.01em;margin:54px 0 18px}
.post-body h2:first-child{margin-top:0}
.post-body p,.post-body li{font-size:clamp(18px,1.4vw,21px);line-height:1.5;color:#141414d0}
.post-body p{margin:0 0 18px}
.post-body a{color:var(--red);border-bottom:2px solid #c1272d55}
.post-body a:hover{border-color:var(--red)}
.post-body ol,.post-body ul{padding-left:26px;margin:0 0 22px}
.post-body li{margin-bottom:12px}
.post-body li strong{color:var(--black)}
.post-aside{position:sticky;top:110px;display:grid;gap:22px}
.post-box{padding:28px 26px;border:1px solid var(--black);background:#fff;box-shadow:10px 10px 0 var(--black)}
.post-box.dark{background:var(--black);color:var(--cream);box-shadow:10px 10px 0 var(--red)}
.post-box p{font-size:18px;line-height:1.4;margin:10px 0 20px}
.post-box .kicker{margin:0;color:var(--red)}
.post-box .pill{gap:14px;padding:13px 16px;font-size:12px}
.post-box .pill:hover{background:var(--black);color:var(--cream)}
.post-box .text-link{font-size:12px;letter-spacing:.14em}
.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.post-card{display:flex;flex-direction:column;padding:32px 30px;border:1px solid #ffffff60;color:var(--cream);transition:.35s}
.post-card small{font-size:11px;letter-spacing:.14em;text-transform:uppercase;opacity:.65}
.post-card h3{font:30px/1 var(--anton);text-transform:uppercase;margin:16px 0 12px}
.post-card p{font-size:17px;line-height:1.4;opacity:.8;margin:0 0 24px}
.post-card b{margin-top:auto;font-size:12px;letter-spacing:.15em}
.post-card:hover{background:var(--cream);color:var(--black);transform:translateY(-8px)}
.light-posts .post-card{border-color:var(--black);color:var(--black);background:#fff;box-shadow:8px 8px 0 var(--black)}
.light-posts .post-card:hover{background:var(--cream);box-shadow:13px 13px 0 var(--red)}
.posts-list .section-head{grid-template-columns:1fr}
@media(max-width:1000px){.post-grid{grid-template-columns:1fr}.post-section{grid-template-columns:1fr}.post-aside{position:static}}

/* Pie compacto en páginas interiores (la llamada a la acción grande ya va justo antes) */
.footer.footer-compact{min-height:auto;padding:48px 5vw 28px;background:var(--black);display:block}
.footer.footer-compact .footer-bottom{margin-top:0;border-top:0;padding-top:0}
@media(max-width:560px){.footer.footer-compact{padding:40px 22px 22px}}

/* ---- Tira de clientes (fondo negro, fotos limpias, sin pausa) ---- */
.brand-marquee.black{color:var(--cream);border-color:#ffffff22;padding:70px 0 60px}
.brand-marquee-head{justify-content:center;padding-bottom:40px}
.brand-marquee-head>span{color:var(--cream);transform:none}
.brand-group figure a{display:block;text-align:center;color:inherit}
.brand-group img{border:0;box-shadow:none;filter:none;width:clamp(96px,9vw,136px);height:clamp(96px,9vw,136px);background:#222}
.brand-group figure:hover img{transform:scale(1.06) rotate(0)}
.brand-group figcaption{display:inline-block;background:transparent;color:var(--cream);font:14px var(--anton);letter-spacing:.06em;padding:0;margin-top:14px;transform:none}
.brand-group small{display:block;margin-top:5px;font-size:12px;letter-spacing:.04em;color:#f8f8f288}
.brand-track{animation-duration:48s}
.brand-track:hover{animation-play-state:running}
@media(max-width:560px){.brand-marquee.black{padding:50px 0 40px}.brand-group img{width:88px;height:88px}}
@media(prefers-reduced-motion:reduce){.brand-track{animation:none}.brand-window{overflow-x:auto}}

/* ---- Página YouTube ---- */
.yt-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.yt-card{display:grid;grid-template-columns:96px 1fr;gap:20px;align-items:start;padding:22px;border:1px solid var(--black);background:#fff;box-shadow:8px 8px 0 var(--black);transition:.3s}
.yt-card img{width:96px;height:96px;object-fit:cover;border-radius:50%;border:5px solid var(--black);box-shadow:6px 6px 0 var(--red)}
.yt-tag{display:inline-block;font:11px var(--anton);letter-spacing:.14em;padding:5px 9px;background:#14141414;color:#141414b0}
.yt-tag.live{background:var(--red);color:var(--cream)}
.yt-card h3{font:28px/1 var(--anton);text-transform:uppercase;margin:10px 0 8px}
.yt-card p{margin:0 0 10px;font-size:17px;color:#141414b0}
.yt-card .yt-link{display:block;font-size:12px;letter-spacing:.08em;color:var(--red);margin-bottom:8px;word-break:break-all}
.yt-card .text-link{font-size:12px;letter-spacing:.12em;margin-top:4px}
.yt-card:hover{transform:translate(-4px,-5px);box-shadow:13px 13px 0 var(--red)}
@media(max-width:1100px){.yt-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.yt-grid{grid-template-columns:1fr}.yt-card{grid-template-columns:80px 1fr;gap:14px;padding:16px}.yt-card img{width:80px;height:80px}}
.brand-marquee.black .brand-window{padding-bottom:22px}
.brand-marquee.black .brand-group figure:nth-child(even){transform:none}

/* ---- Aviso de cookies ---- */
.cookie-bar{position:fixed;z-index:120;left:16px;right:16px;bottom:16px;margin:0 auto;max-width:720px;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:16px 20px;background:var(--cream);color:var(--black);border:1px solid var(--black);box-shadow:8px 8px 0 var(--black);font-size:15px}
.cookie-bar[hidden]{display:none}
.cookie-bar p{margin:0;line-height:1.35}
.cookie-bar a{color:var(--red);border-bottom:1px solid}
.cookie-bar div{display:flex;gap:8px;flex:none}
.cookie-bar button{font:700 12px var(--body);letter-spacing:.08em;text-transform:uppercase;padding:10px 14px;border:1px solid var(--black);background:transparent;color:var(--black);cursor:pointer;border-radius:99px}
.cookie-bar #cookie-si{background:var(--red);color:var(--cream);border-color:var(--red)}
@media(max-width:560px){.cookie-bar{flex-direction:column;align-items:stretch;text-align:center;font-size:14px}.cookie-bar div{justify-content:center}}