* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: #F3F2EF; color: #1C1B1A; font-family: 'Space Grotesk', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
input, textarea { font-family: inherit; }
::selection { background: #F73600; color: #F7F6F3; }
@keyframes pg-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes pg-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes pg-rise { from { opacity:0; transform: translateY(26px); } to { opacity:1; transform: translateY(0); } }
@keyframes pg-blink { 0%,49% { opacity:1; } 50%,100% { opacity:0; } }
[data-mchips]::-webkit-scrollbar{ display:none; }
[data-mchips] > a{ flex:none; }
/* La casilla de consentimiento queda fuera: es un input, pero no es un campo.
Con el 100% se comía los 420 px de la fila, dejaba al texto legal en cero de
ancho y lo empujaba fuera de la tarjeta, partido en una palabra por línea.
Y como este selector lleva id, ganaba a cualquier regla del componente. */
#contacto form input:not([type="checkbox"]), #contacto form textarea, #contacto form button{ min-width:0; width:100%; }
@media (max-width:519px){ [style*="0 40px"]{ padding-left:20px !important; padding-right:20px !important; } }
@keyframes pg-slideR { from { opacity:0; transform: translateX(46px); } to { opacity:1; transform: translateX(0); } }
/* ===== Responsive: móvil 320-500 / tablet 501-1022 / desktop 1023+ ===== */
@media (max-width:519px){
[style*="grid-template-columns"]{ grid-template-columns:1fr !important; }
section{ padding-left:20px !important; padding-right:20px !important; }
[style*="padding: 0px 40px"], [style*="padding: 0 40px"]{ padding-left:0 !important; padding-right:0 !important; }
h1{ font-size:clamp(32px,10.2vw,48px) !important; word-spacing:0.04em !important; }
h2{ font-size:clamp(24px,7.8vw,34px) !important; }
h3{ font-size:20px !important; }
p, li{ text-wrap:pretty; }
[style*="border-radius: 32px"]{ border-radius:20px !important; }
[style*="padding: clamp(36px, 5vw, 72px)"]{ padding:26px !important; }
div[style*="position: sticky"]:not(header){ position:static !important; }
}
@media (min-width:520px) and (max-width:1023px){
[style*="repeat(3,1fr)"], [style*="repeat(3, 1fr)"], [style*="repeat(5"], [style*="repeat(4"]{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
[style*="0.85fr"], [style*="1.15fr"], [style*="1fr 1fr"], [style*="minmax(0,1fr) minmax(0,1fr)"], [style*="1.7fr"]{ grid-template-columns:minmax(0,1fr) !important; }
h1{ font-size:clamp(40px,7.4vw,68px) !important; }
div[style*="position: sticky"]:not(header){ position:static !important; }
}
/* hero móvil */
@media (max-width:519px){
[style*="letter-spacing: 0.14em"][style*="uppercase"]{ font-size:10px !important; gap:6px 12px !important; letter-spacing:0.1em !important; margin-bottom:10px !important; }
[style*="letter-spacing: 0.14em"][style*="uppercase"] > span{ white-space:nowrap !important; }
section h1{ font-size:clamp(32px,10.2vw,48px) !important; line-height:0.94 !important; word-spacing:0.04em !important; letter-spacing:-0.04em !important; }
section h1 [data-l1]{ display:block !important; }
section h1 [data-l1] br{ display:inline !important; }
section h1 span[style*="white-space:nowrap"]{ white-space:normal !important; }
section:nth-of-type(1), section:nth-of-type(2){ padding-top:28px !important; padding-bottom:28px !important; }
a[style*="padding:16px 30px"], a[style*="padding: 16px 30px"]{ padding:14px 22px !important; font-size:16px !important; width:100%; justify-content:center; }
}
@media (max-width:519px){
[style*="flex-wrap: nowrap"]{ flex-wrap:wrap !important; }
[style*="justify-content: flex-end"]{ justify-content:flex-start !important; }
[style*="text-align: right"]{ text-align:left !important; }
[style*="margin-left: auto"]{ margin-left:0 !important; }
}
/* ===== Ajustes móviles: tarjetas, espaciado y carruseles ===== */
@media (max-width:519px){
/* hero: partner debajo del H1 */
[data-hero-head]{ grid-template-columns:1fr !important; grid-template-areas:'tech' !important; margin-bottom:18px !important; }
[data-eb="partner"]{ display:none !important; }
[data-hero-partner]{ display:inline-flex !important; }
/* espaciados */
section{ padding-top:40px !important; padding-bottom:40px !important; }
[style*="padding: clamp(72px, 9vw, 128px) 0"]{ padding-top:44px !important; padding-bottom:44px !important; }
[style*="margin-top: 72px"], [style*="margin-top:72px"]{ margin-top:32px !important; }
[style*="margin-top: 56px"], [style*="margin-top:56px"]{ margin-top:28px !important; }
[style*="margin-bottom: 44px"], [style*="margin-bottom:44px"]{ margin-bottom:20px !important; }
/* tarjetas */
[style*="border-radius: 20px"], [style*="border-radius:20px"], [style*="border-radius:18px"], [style*="border-radius: 18px"], [style*="border-radius:24px"], [style*="border-radius: 24px"]{ border-radius:16px !important; }
[style*="padding: 32px"], [style*="padding:32px"]{ padding:22px !important; }
[style*="padding: 26px 28px"], [style*="padding:26px 28px"]{ padding:20px 22px !important; }
[style*="gap: 56px"], [style*="gap:56px"]{ gap:28px !important; }
/* botones dentro de listas */
[style*="justify-self: end"], [style*="justify-self:end"]{ justify-self:start !important; }
/* manifiesto */
[style*="pg-slideR"]{ text-align:left !important; margin-left:0 !important; font-size:18px !important; line-height:1.25 !important; }
[style*="pg-slideR"] span[style*="font-size: 36px"], [style*="pg-slideR"] strong{ font-size:22px !important; }
/* carruseles horizontales */
[data-mcar]{ display:flex !important; grid-template-columns:none !important; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; gap:14px !important; margin-left:-20px; margin-right:-20px; padding:2px 20px 8px; }
[data-mcar]::-webkit-scrollbar{ display:none; }
[data-mcar] > *{ flex:0 0 76%; min-width:76%; scroll-snap-align:start; }
}
/* ===== Ajustes móviles v2 ===== */
@media (max-width:519px){
/* chips del hero en scroll horizontal */
[data-mchips]{ flex-wrap:nowrap !important; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; margin-top:22px !important; margin-left:-20px; margin-right:-20px; padding:2px 20px 6px; scroll-snap-type:x proximity; }
[data-mchips] > a{ flex:none; scroll-snap-align:start; font-size:12px !important; padding:8px 13px !important; }
/* paddings verticales más cortos en todas las secciones */
section{ padding-top:30px !important; padding-bottom:30px !important; }
[style*="padding: 72px 40px 40px"]{ padding-top:24px !important; padding-bottom:24px !important; }
[style*="padding: 64px 0"]{ padding-top:26px !important; padding-bottom:26px !important; }
[style*="padding: clamp(72px, 9vw, 128px) 0"]{ padding-top:34px !important; padding-bottom:34px !important; }
[style*="margin-top: 44px"], [style*="margin-top:44px"]{ margin-top:24px !important; }
[style*="padding-top: 36px"], [style*="padding-top:36px"]{ padding-top:22px !important; }
[style*="margin-top: 28px"]{ margin-top:16px !important; }
/* manifiesto: aún más pequeño */
[style*="pg-slideR"]{ font-size:16px !important; line-height:1.3 !important; }
[style*="pg-slideR"] span[style*="font-size: 36px"], [style*="pg-slideR"] strong{ font-size:20px !important; }
/* chips del stack (marquees) */
[style*="pg-marquee"] span[style*="font-size:24px"], [style*="pg-marquee"] span[style*="font-size: 24px"]{ font-size:16px !important; }
[style*="pg-marquee"] span[style*="width:11px"]{ width:7px !important; height:7px !important; margin:0 12px !important; }
[style*="pg-marquee"] span[style*="width:9px"]{ width:6px !important; height:6px !important; }
}
/* reseñas legibles desde 320px */
@media (max-width:519px){
[style*="clamp(280px, 85vw, 380px)"], [style*="width:clamp(280px,85vw,380px)"]{ width:82vw !important; min-width:0 !important; padding:22px !important; }
[style*="clamp(280px, 85vw, 380px)"], [style*="width:clamp(280px,85vw,380px)"] p{ font-size:14px !important; line-height:1.5 !important; }
[style*="clamp(280px, 85vw, 380px)"] [style*="font-size: 44px"], [style*="clamp(280px, 85vw, 380px)"] [style*="font-size:44px"]{ font-size:32px !important; }
}
@media (max-width:519px){
/* Red para palabras larguisimas, no guion de imprenta. `hyphens:auto`
partia palabras normales en un titular de palo seco enorme: se leia
PREGUNTAS QUE NOS HA-CEN. Y `anywhere` corta a mitad de palabra aunque
la palabra entera cupiera en la linea siguiente. `break-word` solo
parte cuando una palabra sola no cabe, que era lo que se queria. */
h1, h2, h3{ overflow-wrap:break-word; min-width:0 !important; }
h2{ font-size:clamp(22px,7vw,32px) !important; }
[style*="display:flex"] > h2, [style*="display: flex"] > h2{ min-width:0 !important; flex:1 1 100% !important; }
}
@media (max-width:519px){
/* lista de servicios: menos aire */
[style*="40px 4px"]{ padding-top:24px !important; padding-bottom:28px !important; row-gap:22px !important; }
[style*="40px 4px"] > div:first-child{ line-height:0.85 !important; }
[style*="40px 4px"] h3{ margin:4px 0 10px !important; }
[style*="40px 4px"] > a{ margin-top:6px !important; }
[style*="margin-bottom: 24px"], [style*="margin-bottom:24px"]{ margin-bottom:12px !important; }
/* formulario: nunca desborda a 320px */
form{ padding:18px !important; width:100% !important; max-width:100% !important; }
form > div[style*="grid-template-columns"]{ grid-template-columns:1fr !important; }
/* Misma excepción que arriba, y aquí importa más: con !important la casilla
rompía el consentimiento de los cinco formularios en cualquier móvil. */
form input:not([type="checkbox"]), form textarea, form button{ width:100% !important; min-width:0 !important; padding:13px !important; font-size:14px !important; }
#contacto > div{ padding:20px !important; }
}
@media (max-width:519px){
section h1 [data-nl]{ display:inline !important; }
section h1 > span{ white-space:normal !important; }
}
@media (max-width:1023px){
#contacto > div{ grid-template-columns:minmax(0,1fr) !important; }
}
@media (max-width:519px){
#contacto{ padding-left:16px !important; padding-right:16px !important; }
#contacto > div{ padding:20px !important; gap:22px !important; }
#contacto p, #contacto div{ max-width:100% !important; }
#contacto a[href^="mailto"]{ overflow-wrap:anywhere; }
#contacto form{ padding:16px !important; }
[data-contact-mail]{ display:grid !important; grid-template-columns:auto 1fr !important; row-gap:2px !important; }
[data-contact-mail] > a{ grid-column:2 !important; }
}
/* padding lateral unificado (los marquees a sangre) */
@media (max-width:519px){
section, #contacto{ padding-left:20px !important; padding-right:20px !important; }
section > div{ padding-left:0 !important; padding-right:0 !important; }
[style*="4.8vw"]{ overflow-wrap:break-word; font-size:clamp(24px,7.6vw,38px) !important; }
[data-mcar], [data-mchips]{ padding-left:0 !important; margin-left:0 !important; padding-right:20px !important; margin-right:-20px !important; }
[style*="overflow: hidden"] [style*="pg-marquee"], [style*="overflow:hidden"] [style*="pg-marquee"]{ padding-left:0 !important; padding-right:0 !important; }
}
/* migración: 3 cards en scroll horizontal mientras no caben en una fila */
@media (max-width:1023px){
[data-mcar]{ display:flex !important; grid-template-columns:none !important; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; gap:16px !important; padding-bottom:8px; }
[data-mcar] > *{ flex:0 0 clamp(240px,62%,340px); scroll-snap-align:start; }
[data-mcar]::-webkit-scrollbar{ display:none; }
}
/* marquees (partners y stack): tipografía fluida en tablet y desktop */
@media (min-width:520px){
[style*="pg-marquee"] span[style*="font-size: 24px"], [style*="pg-marquee"] span[style*="font-size:24px"]{ font-size:clamp(16px,1.55vw,26px) !important; }
[style*="pg-marquee"] span[style*="width: 11px"], [style*="pg-marquee"] span[style*="width:11px"]{ width:clamp(8px,0.75vw,12px) !important; height:clamp(8px,0.75vw,12px) !important; margin:0 clamp(14px,1.8vw,30px) !important; }
}
/* desktop ancho: los tamaños fijos acompañan al ancho */
@media (min-width:1200px){
[style*="font-size: 16px"], [style*="font-size:16px"]{ font-size:clamp(16px,1.15vw,20px) !important; }
[style*="font-size: 14px"], [style*="font-size:14px"]{ font-size:clamp(14px,1vw,16px) !important; }
[style*="font-size: 14px"], [style*="font-size:14px"]{ font-size:clamp(16px,1.05vw,18px) !important; }
[style*="font-size: 14px"], [style*="font-size:14px"]{ font-size:clamp(14px,1vw,18px) !important; }
}
/* modal de contacto */
@media (max-width:1023px){
[data-modal-card]{ grid-template-columns:minmax(0,1fr) !important; }
}
@media (max-width:519px){
[data-modal-card]{ padding:22px 18px !important; border-radius:22px !important; }
[data-modal-row]{ grid-template-columns:minmax(0,1fr) !important; }
}
/* chips del hero: escala por resolución — una sola fila desde 1024px */
@media (min-width:1024px){
[data-mchips]{ flex-wrap:nowrap !important; overflow-x:visible !important; gap:6px !important; }
[data-mchips] > a{ font-size:clamp(12px,1.06vw,16px) !important; padding:clamp(9px,0.7vw,12px) clamp(8px,1vw,18px) !important; gap:5px !important; letter-spacing:0 !important; white-space:nowrap; }
[data-mchips] > a > span{ width:7px !important; height:7px !important; }
}
@media (min-width:520px) and (max-width:1023px){
[data-mchips]{ flex-wrap:nowrap !important; overflow-x:auto; scrollbar-width:none; }
[data-mchips]::-webkit-scrollbar{ display:none; }
[data-mchips] > a{ font-size:14px !important; padding:9px 14px !important; white-space:nowrap; }
}