:root {
  --blue: #0537d8;
  --blue-2: #2f65f5;
  --navy: #101d35;
  --navy-2: #172746;
  --text: #4c5870;
  --muted: #738099;
  --line: #e4e9f2;
  --ice: #f1f4ff;
  --ice-2: #f8fbff;
  --white: #ffffff;
  --shadow: 0 20px 60px rgba(16, 29, 53, .08);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--white);
  color: var(--text);
  font-family: "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  font-size: 18px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
svg { display: block; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.container { width: min(1180px, calc(100% - 48px)); margin-inline: auto; }

.siteHeader {
  height: 84px;
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(255,255,255,.96);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(14px);
}
.headerInner { width: min(1180px, calc(100% - 48px)); height: 100%; margin: auto; display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--navy); font-size: 25px; font-weight: 800; letter-spacing: -1.3px; }
.brand > span:last-child > span { color: var(--blue); }
.brandMark { width: 40px; height: 40px; display: grid; place-items: center; color: var(--white); background: var(--blue); border-radius: 12px; box-shadow: 0 10px 24px rgba(5,55,216,.22); }
.brandMark svg { width: 23px; height: 23px; }
.siteHeader nav { display: flex; align-items: center; gap: 34px; color: var(--navy); font-size: 15px; font-weight: 650; }
.siteHeader nav a { position: relative; }
.siteHeader nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -12px; height: 2px; background: var(--blue); transition: right .2s ease; }
.siteHeader nav a:hover::after { right: 0; }
.headerButton, .button { min-height: 52px; padding: 0 24px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; font-size: 16px; font-weight: 800; }
.headerButton { min-height: 48px; color: var(--white); background: linear-gradient(135deg, var(--blue), var(--blue-2)); box-shadow: 0 12px 28px rgba(5,55,216,.22); }

.hero {
  min-height: 720px;
  padding: 78px 0 70px;
  overflow: hidden;
  background:
    radial-gradient(circle at 82% 19%, rgba(224, 228, 255, .82), transparent 33%),
    radial-gradient(circle at 65% 74%, rgba(231, 245, 255, .72), transparent 34%),
    linear-gradient(180deg, #fff 0%, #fbfdff 100%);
}
.heroInner { display: grid; grid-template-columns: .92fr 1.08fr; gap: 60px; align-items: center; }
.eyebrow { margin: 0 0 18px; color: var(--blue); font-size: 13px; line-height: 1.2; font-weight: 900; letter-spacing: 1.25px; text-transform: uppercase; }
.hero h1 { max-width: 610px; margin: 0 0 24px; color: var(--navy); font-size: clamp(48px, 5.3vw, 72px); line-height: 1.04; letter-spacing: -3.4px; }
.heroLead { max-width: 560px; margin: 0 0 32px; color: var(--text); font-size: 20px; line-height: 1.52; }
.heroActions { display: flex; gap: 13px; flex-wrap: wrap; }
.primaryButton { color: #fff; background: linear-gradient(135deg, var(--blue), var(--blue-2)); box-shadow: 0 14px 30px rgba(5,55,216,.22); transition: transform .2s ease, box-shadow .2s ease; }
.primaryButton:hover { transform: translateY(-2px); box-shadow: 0 18px 36px rgba(5,55,216,.28); }
.secondaryButton { color: var(--blue); background: var(--white); border: 1px solid #ccd6eb; }
.heroProof { margin-top: 38px; display: flex; align-items: center; gap: 22px; }
.heroProof > span, .heroProof strong, .heroProof small { display: block; }
.heroProof strong { color: var(--navy); font-size: 16px; }
.heroProof small { margin-top: 3px; color: var(--muted); font-size: 12px; }
.heroProof i { width: 1px; height: 34px; background: var(--line); }
.heroMedia { min-height: 520px; position: relative; display: grid; place-items: center; }
.heroGlow { position: absolute; width: 440px; height: 440px; border-radius: 50%; background: rgba(202,218,255,.66); filter: blur(2px); }
.heroMedia > img { width: min(620px, 100%); max-height: 520px; position: relative; z-index: 1; object-fit: contain; filter: drop-shadow(0 28px 40px rgba(16,29,53,.13)); }
.statusCard { position: absolute; z-index: 3; min-width: 210px; padding: 15px 16px; display: flex; align-items: center; gap: 11px; color: var(--navy); background: rgba(255,255,255,.95); border: 1px solid rgba(226,232,244,.9); border-radius: 15px; box-shadow: var(--shadow); }
.statusCard span, .statusCard strong, .statusCard small { display: block; }
.statusCard strong { font-size: 15px; }
.statusCard small { margin-top: 4px; color: var(--muted); font-size: 12px; }
.statusIcon { width: 46px; height: 46px; display: grid; place-items: center; color: var(--blue); background: var(--ice); border-radius: 12px; }
.statusIcon svg { width: 24px; height: 24px; }
.statusCard > b { width: 24px; height: 24px; margin-left: auto; padding: 5px; color: #fff; background: var(--blue); border-radius: 50%; }
.statusSecurity { left: 0; bottom: 54px; }
.statusSpeed { right: -15px; top: 62px; }

.trustStrip { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #fff; }
.trustInner { min-height: 94px; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.trustInner > strong { color: var(--navy); font-size: 15px; letter-spacing: .3px; text-transform: uppercase; }
.trustInner span { display: flex; align-items: center; gap: 8px; color: var(--text); font-size: 15px; }
.trustInner svg { width: 17px; color: var(--blue); stroke-width: 2.5; }

.whatSection { padding: 104px 0; background: linear-gradient(180deg, var(--ice) 0%, var(--ice-2) 100%); }
.whatGrid { display: grid; grid-template-columns: 1fr .9fr; gap: 84px; align-items: center; }
h2 { color: var(--navy); }
.whatCopy h2, .sectionHeading h2, .maintenanceCopy h2, .centerHeading h2, .notGrid h2, .ctaInner h2, .contactCopy h2 {
  margin: 0;
  font-size: clamp(38px, 4.2vw, 54px);
  line-height: 1.08;
  letter-spacing: -2.2px;
}
.whatCopy > p:not(.eyebrow) { margin: 22px 0 0; font-size: 17px; line-height: 1.75; }
.workshopPanel { padding: 30px; color: var(--navy); background: #fff; border: 1px solid #e2e8f5; border-radius: 22px; box-shadow: var(--shadow); }
.panelTop { padding-bottom: 18px; display: flex; justify-content: space-between; align-items: center; color: var(--muted); border-bottom: 1px solid var(--line); font-size: 15px; }
.panelTop span { display: flex; align-items: center; gap: 8px; }
.panelTop i { width: 8px; height: 8px; background: var(--blue); border-radius: 50%; box-shadow: 0 0 0 5px rgba(5,55,216,.09); }
.panelTop b { color: var(--navy); }
.panelScore { padding: 28px 0; display: flex; align-items: center; gap: 24px; border-bottom: 1px solid var(--line); }
.scoreRing { width: 108px; height: 108px; flex: 0 0 auto; display: grid; place-content: center; text-align: center; border-radius: 50%; background: radial-gradient(circle, #fff 57%, transparent 59%), conic-gradient(var(--blue) 0 96%, #e4eafa 96%); }
.scoreRing strong { color: var(--navy); font-size: 31px; line-height: 1; }
.scoreRing small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.panelScore > div:last-child > strong { font-size: 19px; }
.panelScore p { margin: 8px 0 0; color: var(--muted); font-size: 16px; line-height: 1.6; }
.panelRows { padding-top: 13px; }
.panelRows > span { padding: 15px 0; display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 11px; font-size: 16px; }
.panelRows svg { width: 20px; color: var(--blue); }
.panelRows em { color: var(--blue); font-style: normal; font-weight: 750; }

.servicesSection { padding: 106px 0; background: #fff; }
.sectionHeading { margin-bottom: 50px; display: grid; grid-template-columns: 1fr .7fr; gap: 80px; align-items: end; }
.sectionHeading > p { margin: 0; font-size: 17px; line-height: 1.75; }
.serviceGrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.serviceGrid article { min-height: 240px; padding: 34px 28px; border: 1px solid var(--line); border-radius: 22px; background: #fff; box-shadow: var(--shadow); transition: transform .2s ease, box-shadow .2s ease; }
.serviceGrid article:hover { transform: translateY(-4px); box-shadow: 0 24px 70px rgba(16,29,53,.12); }
.cardIcon { width: 54px; height: 54px; display: grid; place-items: center; color: var(--blue); background: var(--ice); border-radius: 15px; }
.cardIcon svg { width: 27px; height: 27px; }
.serviceGrid h3 { margin: 25px 0 11px; color: var(--navy); font-size: 20px; line-height: 1.3; }
.serviceGrid p { margin: 0; color: var(--muted); font-size: 16px; line-height: 1.7; }

.maintenanceSection { padding: 108px 0; background: linear-gradient(180deg, #f8fbff 0%, #f1f4ff 100%); }
.maintenanceGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 86px; align-items: center; }
.maintenanceVisual { min-height: 480px; display: grid; place-items: center; position: relative; }
.maintenanceVisual::before { content: ""; position: absolute; width: 410px; height: 410px; border-radius: 50%; background: rgba(202,218,255,.7); }
.miniWindow { width: min(520px, 100%); position: relative; color: var(--navy); background: #fff; border: 1px solid #dfe6f3; border-radius: 20px; box-shadow: var(--shadow); overflow: hidden; }
.windowBar { height: 54px; padding: 0 20px; display: flex; align-items: center; gap: 7px; background: #f8faff; border-bottom: 1px solid var(--line); }
.windowBar i { width: 9px; height: 9px; border-radius: 50%; background: #ff8c87; }
.windowBar i:nth-child(2) { background: #f6c863; }
.windowBar i:nth-child(3) { background: #7f9eff; }
.windowBar span { margin-left: 10px; color: var(--muted); font-size: 14px; }
.windowContent { padding: 30px; }
.windowTitle { display: grid; grid-template-columns: 54px 1fr auto; gap: 15px; align-items: center; }
.largeIcon { width: 54px; height: 54px; display: grid; place-items: center; color: var(--blue); background: var(--ice); border-radius: 15px; }
.largeIcon svg { width: 27px; }
.windowTitle small, .windowTitle strong { display: block; }
.windowTitle small { margin-bottom: 6px; color: var(--muted); font-size: 14px; }
.windowTitle strong { font-size: 18px; }
.windowTitle > b { color: var(--blue); font-size: 22px; }
.healthBars { margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--line); }
.healthBars > span { margin-top: 18px; display: grid; grid-template-columns: 132px 1fr 44px; gap: 13px; align-items: center; font-size: 16px; }
.healthBars > span > i { height: 7px; background: #edf1f8; border-radius: 20px; overflow: hidden; }
.healthBars em { height: 100%; display: block; background: linear-gradient(90deg, var(--blue), #7d9bff); border-radius: inherit; }
.healthBars small { color: var(--blue); font-weight: 800; }
.maintenanceCopy > p:not(.eyebrow) { margin: 24px 0 28px; font-size: 17px; line-height: 1.72; }
.maintenanceCopy ul { padding: 0; margin: 0 0 30px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 20px; list-style: none; }
.maintenanceCopy li { display: flex; gap: 10px; align-items: flex-start; font-size: 17px; line-height: 1.55; }
.maintenanceCopy li svg { width: 19px; flex: 0 0 auto; color: var(--blue); stroke-width: 2.5; }
.textLink { color: var(--blue); font-size: 15px; font-weight: 850; }
.textLink span { margin-left: 8px; }

.needsSection { padding: 106px 0; background: #fff; }
.centerHeading { max-width: 840px; margin: 0 auto 50px; text-align: center; }
.needsGrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.needsGrid article { min-height: 150px; padding: 26px; display: grid; grid-template-columns: auto 1fr auto; align-items: start; gap: 14px; border: 1px solid var(--line); border-radius: 18px; background: #fff; box-shadow: var(--shadow); }
.needsGrid article > b { color: var(--blue); font-size: 11px; }
.needsGrid p { margin: 0; color: var(--navy); font-size: 17px; line-height: 1.5; font-weight: 750; }
.needsGrid article > span { width: 25px; height: 25px; padding: 5px; color: #fff; background: var(--blue); border-radius: 50%; }

.notSection { padding: 90px 0; background: var(--ice); }
.notGrid { display: grid; grid-template-columns: .75fr 1.25fr; gap: 75px; align-items: center; }
.notCards { display: grid; gap: 14px; }
.notCards article { padding: 21px 24px; display: flex; align-items: center; gap: 15px; background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 14px 38px rgba(16,29,53,.06); }
.notCards span { width: 32px; height: 32px; flex: 0 0 auto; display: grid; place-items: center; color: var(--blue); background: var(--ice); border-radius: 50%; font-size: 20px; }
.notCards p { margin: 0; color: var(--navy); font-size: 16px; font-weight: 700; }

.ctaSection { padding: 90px 0; color: #fff; background: var(--navy); }
.ctaInner { display: grid; grid-template-columns: 1fr auto; gap: 80px; align-items: end; }
.ctaInner > div { max-width: 880px; }
.ctaInner .eyebrow { color: #9ab7ff; }
.ctaInner h2 { color: #fff; }
.ctaInner p:not(.eyebrow) { max-width: 790px; margin: 23px 0 0; color: #b9c4d7; font-size: 17px; line-height: 1.75; }

.contactSection { padding: 108px 0; background: #fff; }
.contactGrid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 90px; align-items: center; }
.contactCopy > p:not(.eyebrow) { margin: 24px 0 30px; font-size: 18px; line-height: 1.7; }
.contactPromise { display: flex; align-items: center; gap: 12px; }
.contactPromise > svg { width: 40px; height: 40px; padding: 9px; flex: 0 0 auto; color: #fff; background: var(--blue); border-radius: 50%; }
.contactPromise span, .contactPromise strong { display: block; }
.contactPromise span { color: var(--muted); font-size: 16px; line-height: 1.55; }
.contactPromise strong { margin-bottom: 4px; color: var(--navy); font-size: 19px; }
.contactForm { padding: 35px; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; background: var(--ice-2); border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow); }
.contactForm label { display: flex; flex-direction: column; gap: 8px; color: var(--navy); font-size: 16px; font-weight: 800; }
.contactForm label:nth-child(4) { grid-column: 1 / -1; }
.contactForm .hp-field { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }
.contactForm input, .contactForm textarea { width: 100%; padding: 15px; color: var(--navy); background: #fff; border: 1px solid #d9e1ee; border-radius: 10px; outline: 0; font: 16px "Roboto", system-ui, sans-serif; }
.contactForm input:focus, .contactForm textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(5,55,216,.1); }
.contactForm button { grid-column: 1 / -1; min-height: 54px; color: #fff; background: linear-gradient(135deg, var(--blue), var(--blue-2)); border: 0; border-radius: 10px; font-size: 16px; font-weight: 850; cursor: pointer; }
.contactForm button span { margin-left: 12px; }
.seoClosing { padding: 36px 24px; background: var(--ice); border-top: 1px solid var(--line); }
.seoClosing p { max-width: 1080px; margin: auto; color: var(--muted); font-size: 15px; line-height: 1.7; text-align: center; }

footer { padding: 68px 0 24px; background: #fff; border-top: 1px solid var(--line); }
.footerMain { padding-bottom: 50px; display: grid; grid-template-columns: 1.3fr .8fr .8fr 1fr; gap: 48px; }
.footerIntro p { max-width: 250px; margin: 18px 0 0; color: var(--muted); font-size: 12px; line-height: 1.65; }
.footerMain > div:not(.footerIntro) { display: flex; flex-direction: column; gap: 12px; }
.footerMain > div > strong { margin-bottom: 5px; color: var(--navy); font-size: 12px; }
.footerMain > div > a, .footerMain > div > span { color: var(--muted); font-size: 11px; }
.footerCta { padding: 20px; background: var(--ice); border: 1px solid var(--line); border-radius: 16px; }
.footerCta a { padding-bottom: 10px; color: var(--navy) !important; border-bottom: 1px solid #d6dfef; font-size: 14px !important; font-weight: 800; }
.footerCta b { float: right; color: var(--blue); }
.footerBottom { padding-top: 23px; display: flex; align-items: center; justify-content: space-between; color: #8490a4; border-top: 1px solid var(--line); font-size: 10px; }
.footerBottom p { margin: 0; }
.footerBottom a { color: inherit; text-decoration: none; }
.footerBottom a:hover { text-decoration: underline; }

@media (max-width: 1020px) {
  .siteHeader nav { display: none; }
  .heroInner, .whatGrid, .maintenanceGrid, .contactGrid { grid-template-columns: 1fr; }
  .heroCopy { max-width: 760px; }
  .heroMedia { min-height: 470px; }
  .sectionHeading { grid-template-columns: 1fr; gap: 24px; }
  .serviceGrid, .needsGrid { grid-template-columns: 1fr 1fr; }
  .trustInner { padding: 24px 0; display: grid; grid-template-columns: 1fr 1fr; }
  .maintenanceCopy { order: -1; }
  .notGrid { grid-template-columns: 1fr; gap: 38px; }
  .ctaInner { grid-template-columns: 1fr; gap: 34px; align-items: start; }
  .footerMain { grid-template-columns: 1.2fr 1fr 1fr; }
  .footerCta { grid-column: 1 / -1; }
}

@media (max-width: 680px) {
  body { font-size: 17px; }
  .container, .headerInner { width: min(100% - 36px, 1180px); }
  .siteHeader { height: 72px; }
  .brand { font-size: 21px; }
  .brandMark { width: 36px; height: 36px; }
  .headerButton { width: 42px; min-height: 42px; padding: 0; font-size: 0; border-radius: 50%; }
  .headerButton::after { content: "→"; font-size: 19px; }
  .hero { min-height: auto; padding: 62px 0 54px; }
  .hero h1 { font-size: 47px; letter-spacing: -2.8px; }
  .heroLead { font-size: 18px; }
  .heroActions { flex-direction: column; }
  .button { width: 100%; }
  .heroMedia { min-height: 400px; }
  .statusCard { min-width: 190px; padding: 12px; }
  .statusCard strong { font-size: 14px; }
  .statusCard small { font-size: 11px; }
  .statusSecurity { left: -5px; bottom: 32px; }
  .statusSpeed { right: -8px; top: 30px; }
  .trustInner { grid-template-columns: 1fr; gap: 15px; }
  .whatSection, .servicesSection, .maintenanceSection, .needsSection, .contactSection { padding: 78px 0; }
  .whatCopy h2, .sectionHeading h2, .maintenanceCopy h2, .centerHeading h2, .notGrid h2, .ctaInner h2, .contactCopy h2 { font-size: 39px; letter-spacing: -1.8px; }
  .workshopPanel { padding: 21px; }
  .panelScore { align-items: flex-start; }
  .scoreRing { width: 84px; height: 84px; }
  .serviceGrid, .needsGrid { grid-template-columns: 1fr; }
  .serviceGrid article { min-height: 210px; }
  .maintenanceGrid { gap: 48px; }
  .maintenanceCopy ul { grid-template-columns: 1fr; }
  .maintenanceVisual { min-height: 360px; }
  .windowContent { padding: 20px; }
  .windowTitle { grid-template-columns: 46px 1fr; }
  .windowTitle > b { grid-column: 2; }
  .healthBars > span { grid-template-columns: 118px 1fr 42px; font-size: 15px; }
  .maintenanceCopy li { font-size: 17px; }
  .contactPromise span { font-size: 16px; }
  .contactPromise strong { font-size: 19px; }
  .notSection, .ctaSection { padding: 72px 0; }
  .contactForm { padding: 24px; grid-template-columns: 1fr; }
  .contactForm label { grid-column: 1 / -1; }
  .footerMain { grid-template-columns: 1fr 1fr; }
  .footerIntro, .footerCta { grid-column: 1 / -1; }
  .footerBottom { display: block; line-height: 1.5; }
  .footerBottom span { display: block; margin-top: 8px; }
}

.cookieBanner {
  position: fixed;
  left: 18px;
  right: 18px;
  bottom: 18px;
  z-index: 50;
  max-width: 720px;
  margin: auto;
  padding: 18px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  color: var(--navy);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(16,29,53,.18);
}
.cookieBanner[hidden] { display: none; }
.cookieBanner p { margin: 0; font-size: 15px; line-height: 1.5; }
.cookieBanner button { min-height: 44px; padding: 0 18px; flex: 0 0 auto; color: #fff; background: var(--blue); border: 0; border-radius: 9px; font-size: 15px; font-weight: 800; cursor: pointer; }
.cookieActions { display: flex; gap: 8px; flex: 0 0 auto; }
.cookieBanner .cookieReject { color: var(--navy); background: var(--ice); border: 1px solid var(--line); }
@media (max-width: 680px) {
  .cookieBanner { align-items: stretch; flex-direction: column; }
  .cookieActions { width: 100%; }
  .cookieBanner button { width: 50%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}
/* Corrección de iconos SVG y espacios verticales de TallerWeb.es */

svg {
  width: 1em;
  height: 1em;
}

.statusCard > b svg {
  width: 14px;
  height: 14px;
}

.trustInner svg {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
}

.workshopPanel {
  align-self: center;
  height: auto;
  min-height: 0;
}

.panelRows > span {
  min-height: 56px;
  grid-template-columns: 24px 1fr auto;
  gap: 12px;
  border-bottom: 1px solid var(--line);
}

.panelRows > span:last-child {
  border-bottom: 0;
}

.panelRows svg {
  width: 20px;
  height: 20px;
}

.largeIcon svg {
  width: 27px;
  height: 27px;
}

.maintenanceCopy li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.maintenanceCopy li svg {
  width: 19px;
  height: 19px;
  margin-top: 4px;
  flex: 0 0 19px;
}

.maintenanceCopy li span {
  min-width: 0;
}

.needsGrid article > span svg {
  width: 15px;
  height: 15px;
}

@media (max-width: 680px) {
  .trustInner {
    min-height: 0;
    padding: 20px 0;
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .trustInner span {
    min-height: 24px;
  }

  .workshopPanel {
    width: 100%;
  }
}