/* Final Pastel review — visual and responsive corrections. */
:root { --pa-ink:#03175f; --pa-cobalt:#0b27b8; --pa-violet:#8c2eff; }

/* Header: stable hover geometry, equal gutters and aligned project menu. */
@media (min-width:981px) {
  .pa-header { width:min(1585px,91.72vw); }
  .pa-nav { display:grid; grid-template-columns:minmax(280px,1fr) repeat(4,max-content); padding-inline:55px; gap:18px; justify-content:stretch; }
  .pa-nav-link { min-width:144px; padding-inline:22px; justify-content:center; }
  .pa-nav > .pa-nav-link::before,.pa-nav-projects > .pa-nav-link::before { width:18px; margin-right:-18px; overflow:visible; visibility:hidden; }
  .pa-nav > .pa-nav-link:hover::before,.pa-nav > .pa-nav-link:focus-visible::before,.pa-nav > .pa-nav-link.is-active::before,.pa-nav > .pa-nav-link[aria-current="page"]::before,.pa-nav-projects:hover > .pa-nav-link::before,.pa-nav-projects:focus-within > .pa-nav-link::before,.pa-nav-projects.is-open > .pa-nav-link::before { width:18px; margin-right:0; visibility:visible; }
  .pa-projects-dropdown { top:calc(100% + 8px); left:50%; }
}

/* Modal: retain page context through a light translucent blur. */
.pa-video-modal { background:rgba(3,19,54,.36); -webkit-backdrop-filter:blur(9px) saturate(.78); backdrop-filter:blur(9px) saturate(.78); }
.pa-video-modal-dialog { width:min(1460px,calc(100vw - 64px)); max-height:calc(100vh - 48px); border-color:#fff; background:#fff; }

/* Home hero and shared calls to action. */
.home-button { min-height:64px; padding-inline:42px; border:1.5px solid var(--pa-violet); background:linear-gradient(180deg,#032a9e 0%,#001344 100%); font-size:24px; font-weight:900; box-shadow:0 12px 22px rgba(0,10,70,.32); }
.home-button.is-disabled { cursor:not-allowed; opacity:.78; }
.home-hero { min-height:clamp(760px,57vw,985px); }
.home-hero h1 span { font-size:clamp(36px,2.9vw,50px); line-height:1; font-weight:600; }
.home-hero h1 strong { font-size:clamp(86px,7.24vw,125px); line-height:.82; }
.home-framed-icon--fourth { left:49%; top:4%; width:82px; height:82px; animation:pa-float-small 4.3s ease-in-out infinite reverse; }
.home-spark { display:block; }
/* Pastel #10: the hero artwork ends darker than the video section begins;
   fade its lower edge into the video's first colour so there is no seam. */
.home-hero { position:relative; }
.home-hero::after { content:""; position:absolute; z-index:1; left:0; right:0; bottom:0; height:130px; background:linear-gradient(180deg,rgba(12,40,184,0) 0%,#0c28b8 100%); pointer-events:none; }

.home-hero-scroll-cue { position:absolute; z-index:5; left:50%; bottom:24px; margin:0; color:#fff; transform:translateX(-50%); font-size:15px; font-weight:600; letter-spacing:.02em; white-space:nowrap; opacity:.9; transition:opacity .22s ease,visibility 0s linear; }
.home-hero-scroll-cue span { display:inline-grid; width:32px; height:32px; margin-right:9px; place-items:center; border:1px solid rgba(255,255,255,.7); border-radius:50%; animation:pa-cue 1.8s ease-in-out infinite; }
.pa-scroll-story-started .home-hero-scroll-cue { visibility:hidden; opacity:0; transition:opacity .22s ease,visibility 0s linear .22s; }
@keyframes pa-cue { 50% { transform:translateY(5px); } }
.home-video-section {
  padding-top:clamp(45px,4.2vw,72px);
  /* Pastel #10: keep the video inside the same blue visual field as its
     adjacent sections. The former 32% blue-to-white cut created a false
     empty band behind the lower portion of the player. */
  background:linear-gradient(180deg,#0c28b8 0%,#102fc2 48%,var(--home-blue) 100%);
}
@media (min-width:1101px) { .home-video-frame { width:min(1120px,68vw); } }

/* The desktop video was narrowed after the original 61.35vw section height
   was defined. That stale minimum created empty white canvas below the frame.
   Let the content define the height throughout the desktop composition while
   leaving the tablet/mobile rules untouched. */
@media (min-width:1101px) {
  .home-video-section {
    min-height:0;
    padding-bottom:clamp(72px,5vw,96px);
  }
}

/* Generation Alpha card. */
.home-generation-heading p { font-size:clamp(26px,3.25vw,56px); font-weight:600; }
.home-generation-heading h2 { font-size:clamp(52px,3.71vw,64px); }
.home-generation-card { width:min(1380px,calc(100% - 80px)); overflow:visible; }
.home-generation-copy h3 { font-weight:700; }
.home-generation-icon { animation:pa-generation-icon-swing 4.8s ease-in-out infinite; transform-origin:50% 55%; }
.home-generation-icon--puzzle { animation-delay:-2.2s; animation-direction:reverse; }
@keyframes pa-generation-icon-swing {
  0%,100% { transform:translateY(0) rotate(-4deg); }
  50% { transform:translateY(-8px) rotate(3deg); }
}
.home-generation-photo-wrap { right:-5.3vw; }
.home-generation-mobile-title-text { display:none; }
.home-generation-mobile-cta { text-decoration:none; }
.home-scroll-story-anchor--generation { left:54%; width:8%; }
body.pa-scroll-story-active .home-generation-alpha-slot { opacity:0; }

/* Projects intro and accessible summary. */
@media (min-width:1101px) {
  .home-section-heading strong { font-size:clamp(96px,7.3vw,126px); line-height:.84; font-weight:700; }
  .home-section-heading span { font-size:clamp(40px,3.01vw,52px); font-weight:600; }
  .home-section-heading em { font-size:clamp(31px,2.31vw,40px); font-weight:600; }
  .home-project-deck { width:min(1510px,92vw); grid-template-columns:repeat(4,minmax(0,320px)); }
  .home-project-card { width:100%; }
  .home-project-card--spark { aspect-ratio:640/516; }
  .home-alpha-summary-card { display:none !important; }
  .home-alpha-summary-copy { padding:36px 42px; border:1px solid #4cd8ff; border-radius:18px; background:rgba(0,91,210,.45); }
  .home-alpha-summary-copy > span { display:none !important; }
  .home-alpha-summary-copy > h2,.home-alpha-summary-copy > p { position:static !important; width:auto !important; height:auto !important; margin:0 !important; padding:0 !important; overflow:visible !important; clip:auto !important; white-space:normal !important; }
  .home-alpha-summary-copy > h2 { margin-bottom:28px !important; color:#fff; font-size:32px; font-weight:400; text-transform:none; }
  .home-alpha-summary-copy > h2 strong { display:block; color:#ffc31f; font-size:54px; line-height:.9; text-transform:uppercase; }
  .home-alpha-summary-copy > p { color:#fff; font-size:17px; }
}
.home-program-copy h2,.home-program-copy h3 { font-weight:700; }
.home-project-card-icon { position:absolute; z-index:12; right:8.2%; top:3.2%; width:12%; height:auto; filter:brightness(0) invert(1); pointer-events:none; }
.home-program-cta { min-width:230px; min-height:58px; }
.home-program-cta img { display:none; }
.home-program-cta::before { content:"Ver detalles"; }
.home-program-cta::after { content:"→"; margin-left:18px; }

/* Contact and footer alignment. */
.home-pill { color:#fff; font-size:20px; font-weight:700; text-transform:uppercase; }
.home-contact-copy h2 { font-size:54px; font-weight:700; letter-spacing:-1.08px; }
.pa-footer { width:min(1585px,91.72vw) !important; }
.pa-form-notice { margin:12px 0 0; color:#087b55; font-weight:700; }
.pa-form-notice.is-error { color:#b00020; }

/* Project detail typography and spacing. */
.pa-project-hero h1,.pa-white-section h2,.pa-garden-panel-heading h2 { font-weight:700; }
.pa-tecpro-hero h1 { max-width:900px; font-size:clamp(92px,7.3vw,126px); }
.pa-summary-card { width:min(835px,92%); }
.pa-summary-card > i { position:absolute; right:22px; top:50%; width:50px; height:50px; display:grid; place-items:center; border-radius:50%; background:#fff; color:#ff5b30; transform:translateY(-50%); font-style:normal; }
.pa-tab-panel { min-height:0; padding-bottom:60px; }
.pa-tecpro-page .pa-tab-panel::after { content:"✦"; position:absolute; right:4%; top:24px; width:54px; height:54px; display:grid; place-items:center; border-radius:50%; background:#fff; color:#ff5b30; box-shadow:0 8px 18px rgba(4,28,110,.2); font-size:24px; }
.pa-tecpro-page .pa-tab-panel { position:relative; }
.pa-tecpro-overview-mobile { display:none !important; }
.pa-tecpro-component { aspect-ratio:auto; min-height:300px; padding:42px; border:2px solid #42c6f4; border-radius:26px; background:linear-gradient(145deg,#fff,#effaff); color:#06208e; text-align:left; display:flex; flex-direction:column; justify-content:center; }
.pa-tecpro-component::before { content:"✦"; margin-bottom:20px; color:#ff612e; font-size:44px; }
.pa-tecpro-component h3 { margin:0 0 14px; font-size:34px; }
.pa-tecpro-component p { margin:0; font-size:18px; line-height:1.45; }
.pa-tecpro-overview-grid,.pa-tecpro-sequence { width:min(1180px,100%); margin:62px auto 0; display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.pa-tecpro-overview-grid article,.pa-tecpro-sequence article { min-height:250px; padding:34px; border:2px solid #75cdf0; border-radius:24px; background:#fff; color:#06208e; box-shadow:0 14px 28px rgba(4,32,120,.12); text-align:left; }
.pa-tecpro-overview-grid span,.pa-tecpro-sequence span { color:#ff5b30; font-size:20px; font-weight:900; }
.pa-tecpro-overview-grid h3,.pa-tecpro-sequence h3 { margin:36px 0 14px; font-size:32px; }
.pa-tecpro-overview-grid p { font-size:18px; line-height:1.45; }
.pa-tecpro-sequence { grid-template-columns:repeat(5,1fr); }
.pa-tecpro-sequence article { min-height:220px; display:flex; flex-direction:column; justify-content:space-between; }
.pa-tecpro-sequence h3 { font-size:24px; overflow-wrap:anywhere; }
.pa-tecpro-challenge { width:min(1060px,100%); margin:30px auto 0; padding:55px; border-radius:30px; background:linear-gradient(135deg,#092bad,#001263); color:#fff; }
.pa-tecpro-challenge h2 { margin:0 0 18px; font-size:56px; }
.pa-tecpro-challenge > p { max-width:760px; margin:0 auto 36px; font-size:20px; }
.pa-tecpro-challenge > div { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.pa-tecpro-challenge article { padding:24px; border:1px solid #60d6ff; border-radius:18px; display:grid; gap:8px; }

.pa-diploma-resource { min-height:330px; padding:34px; border:2px solid #3f74ff; border-radius:26px; background:linear-gradient(145deg,#fff,#eff5ff); color:#06208e; text-align:left; box-shadow:0 12px 24px rgba(5,30,115,.12); }
.pa-diploma-number { display:grid; width:54px; height:54px; place-items:center; border-radius:14px; background:#ffc31f; font-size:26px; font-weight:900; }
.pa-diploma-level { margin:22px 0 4px; color:#3974ff; font-weight:800; text-transform:uppercase; }
.pa-diploma-resource h3 { margin:0 0 18px; font-size:30px; }
.pa-diploma-resource > p:last-child { margin:0; font-size:16px; line-height:1.45; }

.pa-digital-hero h1 { margin-top:20px; letter-spacing:-.04em; }
.pa-digital-hero h1 strong,.pa-digital-hero h1 span { display:block; }
.pa-digital-hero h1 strong { font-size:clamp(64px,4.75vw,82px); font-weight:900; white-space:nowrap; }
.pa-digital-hero h1 span { font-size:clamp(54px,4.05vw,70px); font-weight:500; }
.pa-skill-card { flex:0 0 243px !important; width:243px; height:269px; padding:18px 18px 22px; border-radius:16px; background:#3d72ff; color:#fff; display:grid; grid-template-rows:auto 1fr auto; text-align:left; transition:transform .28s ease,background .28s ease,box-shadow .28s ease; }
.pa-skill-card > span { font-size:28px; }
.pa-skill-card > img { width:100%; height:120px; object-fit:contain; mix-blend-mode:screen; }
.pa-skill-card h3 { margin:0; font-size:16px; line-height:1.18; }
.pa-skill-card:hover,.pa-skill-card:focus-visible { z-index:3; background:#071b9f; transform:scale(1.075); box-shadow:0 12px 22px rgba(0,18,90,.35); outline:2px solid #fff; }
.pa-skill-card:hover > img,.pa-skill-card:focus-visible > img { filter:url("#pa-skill-card-active"); }
.pa-skill-card { padding:0; overflow:hidden; background:transparent; }
.pa-skill-card > span,.pa-skill-card > h3 { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.pa-skill-card > img { width:100%; height:100%; object-fit:fill; mix-blend-mode:normal; }
.pa-monitor-cta { top:calc(100% + 22px); }
@media (min-width:821px) { .pa-card-carousel { grid-template-columns:66px minmax(0,769px) 66px; } .pa-card-carousel .pa-carousel-track { gap:20px; } }

.pa-spark-heading h1 span,.pa-spark-heading h1 strong { display:block; }
.pa-spark-heading h1 span { font-size:clamp(42px,3.01vw,52px); font-weight:700; }
.pa-spark-heading h1 strong { max-width:1180px; margin:auto; font-size:clamp(72px,5.79vw,100px); line-height:.9; font-weight:700; }
.pa-spark-heading p { max-width:980px; }
.pa-garden-hero h1 { font-size:clamp(72px,5.79vw,100px); font-weight:700; }
.pa-garden-hero h1 .pa-garden-title-lead { font-size:clamp(42px,3.01vw,52px); font-weight:700; }
.pa-garden-cycle { min-height:250px; padding-bottom:30px; }
.pa-garden-system { margin-top:30px; }
.pa-garden-system-logo { object-fit:contain; }
.pa-garden-system-nav { position:relative; }
.pa-garden-system-nav::before { content:""; position:absolute; z-index:2; left:148px; top:99px; width:13px; height:13px; border-radius:50%; background:#18c8c4; pointer-events:none; }
.pa-garden-implementation { position:relative; width:min(1380px,calc(100% - 80px)); min-height:650px; margin:50px auto 90px; padding:48px; border-radius:28px; background:#2eaaa8; color:#fff; overflow:hidden; }
.pa-garden-implementation h2 { max-width:760px; margin:0 0 26px; font-size:48px; }
.pa-garden-implementation ul { width:58%; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:14px; list-style:none; }
.pa-garden-implementation li { padding:15px 18px; border-radius:10px; background:#fff; color:#07399f; font-weight:600; }
.pa-garden-implementation > img { position:absolute; right:5%; top:25%; width:43%; max-height:430px; object-fit:contain; }
.pa-garden-maria { position:absolute; left:4%; right:4%; bottom:30px; margin:0; padding:18px 24px; border-radius:10px; background:#fff; color:#0b2b9e; }

@media (min-width:1024px) and (max-width:1170px) {
  .home-hero-copy { width:48%; }
  .home-hero h1 strong { font-size:86px; }
  .home-hero-portal { right:-4vw; transform:scale(.86); transform-origin:right center; }
}

@media (max-width:980px) {
  .pa-header-inner { padding-inline:28px; }
  .pa-nav-link { min-width:0; }
  .home-hero-scroll-cue { bottom:12px; font-size:12px; }
}

@media (max-width:820px) {
  .pa-video-modal-dialog { width:calc(100vw - 24px); }
  .home-generation-mobile-title { display:none !important; }
  .home-generation-mobile-title-text { display:block; margin:0; color:#fff; font-size:clamp(34px,10.5vw,48px); line-height:.96; font-weight:700; }
  .home-generation-mobile-title-text mark { background:none; color:#ffc31f; }
  .home-generation-mobile-cta { min-height:58px; padding:0 24px; border:1.5px solid #8c2eff; border-radius:999px; background:linear-gradient(#032a9e,#001344); color:#fff; display:flex; align-items:center; justify-content:center; gap:18px; font-weight:700; }
  .pa-garden-implementation { display:block !important; width:calc(100% - 24px); min-height:0; margin:24px auto 54px; padding:24px 16px; }
  .pa-garden-implementation h2 { font-size:30px; }
  .pa-garden-implementation ul { width:100%; grid-template-columns:1fr; gap:8px; }
  .pa-garden-implementation li { padding:12px 14px; font-size:14px; }
  .pa-garden-implementation > img { position:static; width:92%; max-height:none; margin:18px auto; display:block; }
  .pa-garden-maria { position:static; margin-top:12px; font-size:13px; }
  .pa-garden-implementation-mobile,.pa-garden-implementation-mobile-v2 { display:none !important; }
  .pa-garden-system-nav::before { left:calc(50% - 14px); top:43px; width:10px; height:10px; }
  .pa-skill-card { flex-basis:calc(100% - 6px) !important; width:auto; height:240px; }
  .pa-tecpro-overview-grid,.pa-tecpro-sequence { grid-template-columns:1fr; gap:14px; }
  .pa-tecpro-overview-grid article,.pa-tecpro-sequence article { min-height:160px; }
  .pa-tecpro-challenge { padding:30px 20px; }
  .pa-tecpro-challenge h2 { font-size:36px; }
  .pa-tecpro-challenge > div { grid-template-columns:1fr; }
  .pa-diploma-resource { min-height:360px; }
}

/* Pastel follow-up 51–76 (2026-10-20): final responsive corrections. */

/* 51: the Figma page curl. The panel surface moves to ::before so the curl
   silhouette can mask only the paper — the 3D «A» still overflows freely —
   and ::after draws the exported curl artwork on top. */
.home-contact-copy { --pa-curl-w:clamp(96px,12vw,207px); border-color:transparent; border-radius:0 !important; background:none !important; }
.home-contact-copy::before {
  content:"";
  position:absolute;
  z-index:-1;
  inset:-1px;
  border:1px solid #63ceff;
  background:linear-gradient(115deg,rgba(20,83,210,.94),rgba(9,36,166,.9));
  -webkit-mask:
    url('../images/home/contact-page-curl-mask.png') left bottom / var(--pa-curl-w) auto no-repeat,
    linear-gradient(#000 0 0) left top / 100% calc(100% - var(--pa-curl-w) * .835) no-repeat,
    linear-gradient(#000 0 0) right bottom / calc(100% - var(--pa-curl-w)) calc(var(--pa-curl-w) * .835) no-repeat;
  mask:
    url('../images/home/contact-page-curl-mask.png') left bottom / var(--pa-curl-w) auto no-repeat,
    linear-gradient(#000 0 0) left top / 100% calc(100% - var(--pa-curl-w) * .835) no-repeat,
    linear-gradient(#000 0 0) right bottom / calc(100% - var(--pa-curl-w)) calc(var(--pa-curl-w) * .835) no-repeat;
}
.home-contact-copy::after {
  left:-1px;
  bottom:-1px;
  width:var(--pa-curl-w) !important;
  height:calc(var(--pa-curl-w) * .835) !important;
  border-radius:0 !important;
  background:url('../images/home/contact-page-curl.png') left bottom / 100% 100% no-repeat !important;
  clip-path:none;
  filter:none;
  pointer-events:none;
}

/* 52: every project CTA stays centred and fully inside its coloured card. */
.home-program > .home-program-cta {
  position:absolute;
  z-index:14;
  left:50%;
  top:auto;
  bottom:16px;
  width:clamp(230px,18.05vw,312px);
  min-width:0;
  min-height:0;
  padding:0;
  border:0;
  background:transparent;
  box-shadow:none;
  transform:translateX(-50%);
}
.home-program > .home-program-cta:hover,
.home-program > .home-program-cta:focus-visible { transform:translateX(-50%) translateY(-3px); }

/* 53: tablet/mobile use the same approved Figma project-card artwork. */
@media (max-width:1100px) {
  .home-project-card,
  .home-project-card--tecpro,
  .home-project-card--digital,
  .home-project-card--spark,
  .home-project-card--garden {
    aspect-ratio:640/516;
    height:auto;
    padding:0;
    overflow:hidden;
    border:0;
    border-radius:20px;
    background:transparent;
    box-shadow:0 14px 24px rgba(0,13,86,.24);
  }
  .home-project-card::after,
  .home-project-card > small,
  .home-project-card > strong,
  .home-project-card > span:not(.home-project-card-art),
  .home-project-card-icon { display:none !important; }
  .home-project-card > img.home-project-card-art {
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
  }
  .home-project-card--spark > .home-project-card-art--spark {
    position:absolute;
    inset:0;
    display:block;
    width:100%;
    height:100%;
    background:url('../images/home/desktop-v2/project-spark.png') center/100% 100% no-repeat;
  }
}

/* 54: decorative bands may frame the cards, never cover their content. */
@media (max-width:820px) {
  .home-program::before,.home-program::after { content:none; display:none; }
}
@media (min-width:821px) and (max-width:1100px) {
  .home-program::before,.home-program::after { width:150px; height:86px; opacity:.42; }
}

/* 55, 57 and 58: no non-Figma hero line, duplicated challenge bar or QR. */
.pa-tecpro-hero::before,.pa-tecpro-hero::after { content:none !important; display:none !important; }
#tecpro-panel-4 > .pa-summary-card,
#tecpro-panel-4 > img { display:none !important; }

/* 59 and 69: reserve breathing room for the zoom animation. */
.pa-card-carousel .pa-carousel-viewport,
.pa-garden-problems .pa-carousel-viewport {
  margin:-16px;
  padding:16px;
}
.pa-card-carousel .pa-carousel-track,
.pa-garden-problems .pa-carousel-track { overflow:visible; }

/* 60 and 61: compact hero and consistent interactive video treatment. */
.pa-monitor-cta { transition:transform .2s ease,filter .2s ease,box-shadow .2s ease; }
.pa-monitor-cta:hover,.pa-monitor-cta:focus-visible { transform:translateX(-50%) translateY(-3px); filter:brightness(1.08); box-shadow:0 12px 22px rgba(0,15,80,.38); }
@media (min-width:1181px) {
  .pa-digital-hero { min-height:620px; padding-top:150px; }
  .pa-digital-hero .pa-project-hero-copy { width:52%; }
  .pa-monitor { top:165px; width:500px; height:348px; }
}

/* 62 and 63: show the full monitor base and restore compact mobile cards. */
@media (max-width:520px) {
  .pa-digital-hero { padding-bottom:190px; overflow:visible; }
  .pa-monitor { margin-top:38px; }
  .pa-card-carousel .pa-carousel-track { justify-content:center; }
  .pa-skill-card {
    flex:0 0 210px !important;
    width:210px;
    height:233px;
  }
}

/* 64 and 65: stable tab labels and identical content rhythm on touch screens. */
@media (max-width:820px) {
  .pa-step-tabs button[aria-selected="true"] { color:#fff !important; font-size:clamp(13px,2.2vw,17px) !important; line-height:1.08; }
  .pa-step-tabs button b,.pa-step-tabs button span { opacity:1 !important; visibility:visible !important; color:inherit; }
  .pa-tecpro-page .pa-tab-panel { display:block; }
  .pa-tecpro-page .pa-tab-panel[hidden] { display:none !important; }
  #tecpro-panel-1 > .pa-summary-card { order:-1; }
  .pa-tecpro-page .pa-summary-card { margin-bottom:42px; }
  .pa-tecpro-overview-grid,.pa-tecpro-sequence { margin-top:0; }
  .pa-tecpro-components-carousel { margin-top:0; }
  .pa-tecpro-challenge { margin-top:0; }
}

/* 66–68: exact Spark emphasis and collision-safe tablet ornaments. */
.pa-spark-heading p strong,
.pa-spark-feature p strong { font-weight:700; }
@media (min-width:521px) and (max-width:820px) {
  .pa-spark-network { top:142px; right:22px; width:62px; }
  .pa-spark-globe { top:142px; left:22px; width:66px; }
}

/* 70, 72 and 73: complete Garden tablet sections with a 3+2 skill grid. */
@media (min-width:521px) and (max-width:820px) {
  .pa-garden-cycle { background:#d9f4f1; }
  .pa-garden-intervention-grid { grid-template-columns:repeat(3,minmax(0,1fr)); grid-auto-rows:190px; gap:12px; }
  .pa-garden-skill { padding:46px 12px 22px; gap:10px; }
  .pa-garden-skill-icon { width:62px; height:62px; font-size:30px; }
  .pa-garden-skill strong { font-size:16px; }
  .pa-garden-implementation {
    min-height:560px;
    padding:34px;
    display:grid !important;
    grid-template-columns:1.08fr .92fr;
    grid-template-rows:auto 1fr auto;
    gap:18px 24px;
    align-items:center;
  }
  .pa-garden-implementation h2 { grid-column:1; margin:0; font-size:38px; }
  .pa-garden-implementation ul { grid-column:1; width:100%; grid-template-columns:1fr; gap:8px; align-self:start; }
  .pa-garden-implementation > img { grid-column:2; grid-row:1/3; position:static; width:100%; margin:0; }
  .pa-garden-implementation .pa-garden-maria { grid-column:1/-1; position:static; margin:0; }
}

/* 71: finish Garden close to its footer on desktop. */
@media (min-width:981px) {
  .pa-garden-implementation { margin-bottom:24px; }
  .pa-garden-page + .pa-footer { margin-top:22px; }
}

/* 74: headlines use Bold, not Black/Heavy. */
.home-hero h1 strong,
.home-section-heading h2,
.home-program-copy h2,
.home-program-copy h3,
.home-contact-copy h2,
.pa-project-page h1,
.pa-project-page h2,
.pa-project-page h3,
.pa-digital-hero h1 strong { font-weight:700; }

/* 76: subtle feedback for footer quick links, including image-backed desktop. */
.pa-footer-nav a { transition:opacity .2s ease,background-color .2s ease; }
.pa-footer-nav a:hover { opacity:.74; background:rgba(1,13,74,.16); border-radius:10px; }

@media (max-width:520px) {
  .home-program { padding-bottom:106px; }
  .home-program > .home-program-cta { bottom:24px; width:230px; }
}

@media (max-width:520px) {
  .pa-header { padding-inline:14px; }
  .pa-header-inner { width:100%; padding-inline:22px; }
  .pa-brand img { width:min(128px,36vw); }
  .home-hero { min-height:900px; }
  .home-hero h1 strong { font-size:40px; line-height:.94; letter-spacing:-.06em; }
  .home-hero .home-button { width:280px; padding-inline:16px; white-space:nowrap; }
  .home-framed-icon--fourth { width:50px; height:50px; left:47%; top:11%; }
  .home-generation-mobile-art { gap:22px; }
  .home-program { height:auto; min-height:500px; padding-bottom:28px; }
  .home-program-copy { position:relative; top:auto !important; left:auto !important; width:auto; min-height:220px; padding:0 18px 22px; }
  .home-program-copy .home-button { position:relative; top:auto !important; left:auto !important; margin-top:22px; }
  .home-program-logo img { max-width:86%; object-fit:contain; }
  .home-program--digital .home-program-logo img { max-width:72%; }
  .home-program--digital .home-program-logo::after { content:none; }
  .home-program--digital .home-program-logo img { width:84%; max-width:84%; transform:none; }
  .home-program-visual { position:relative !important; inset:auto !important; width:92% !important; height:auto !important; margin:4px auto 0; }
  .home-contact-copy h2 { font-size:38px; letter-spacing:-.7px; }
  .pa-digital-hero h1 strong { font-size:36px; white-space:normal; }
  .pa-digital-hero h1 span { font-size:32px; }
  .pa-spark-heading h1 span { font-size:28px; }
  .pa-spark-heading h1 strong { font-size:42px; }
  .pa-garden-hero h1 { font-size:40px; }
  .pa-garden-hero h1 .pa-garden-title-lead { font-size:28px; }
  .pa-tecpro-hero h1 { max-width:100%; font-size:42px; line-height:.92; overflow-wrap:normal; word-break:normal; }
  .pa-tecpro-hero { padding-bottom:34px; }
  .pa-tecpro-robot { margin-top:26px; margin-bottom:0; }
}

html.reduced-motion .home-hero-scroll-cue span,html.reduced-motion .home-framed-icon--fourth,html.reduced-motion .home-generation-icon { animation:none; }
html.reduced-motion .pa-skill-card,html.reduced-motion .pa-tecpro-component { transition:none; }

/* QA-01, QA-04, QA-05: the desktop header keeps stable link geometry. */
@media (min-width:981px) {
  .pa-nav { margin-left:0; }
  .pa-nav-link { position:relative; }
  .pa-nav > .pa-nav-link:last-child { justify-content:flex-end; padding-right:0; }
  .pa-nav > .pa-nav-link::before,
  .pa-nav-projects > .pa-nav-link::before {
    position:absolute; left:14px; width:auto; margin:0; visibility:hidden;
  }
  .pa-nav > .pa-nav-link:hover::before,
  .pa-nav > .pa-nav-link:focus-visible::before,
  .pa-nav > .pa-nav-link.is-active::before,
  .pa-nav > .pa-nav-link[aria-current="page"]::before,
  .pa-nav-projects:hover > .pa-nav-link::before,
  .pa-nav-projects:focus-within > .pa-nav-link::before,
  .pa-nav-projects.is-open > .pa-nav-link::before { width:auto; margin:0; visibility:visible; }
}
@media (min-width:981px) and (max-width:1199px) {
  .pa-header { width:calc(100vw - 32px); }
  .pa-nav { grid-template-columns:minmax(190px,1fr) repeat(4,minmax(0,max-content)); padding-inline:28px; gap:4px; }
  .pa-header .pa-brand { width:clamp(180px,20vw,230px); min-width:0; }
  .pa-nav-link { min-width:0; padding-inline:14px; font-size:14px; }
  .pa-nav > .pa-nav-link::before,.pa-nav-projects > .pa-nav-link::before { left:4px; }
}
/* Pastel #2 follow-up: the absolutely positioned star overlapped the first
   letter of the active link. Its slot is now reserved permanently, so the
   active/hover state still changes nothing in the layout. */
@media (min-width:1200px) {
  .pa-nav > .pa-nav-link,.pa-nav-projects > .pa-nav-link { padding-left:42px; padding-right:24px; }
  /* Keep #4's equal gutters (text 55px from the capsule edge) while giving
     an active «Contacto» pill the same inner padding as the others. */
  .pa-nav { padding-right:31px; }
  .pa-nav > .pa-nav-link:last-child { justify-content:center; padding-right:24px; }
  .pa-nav > .pa-nav-link::before,.pa-nav-projects > .pa-nav-link::before { left:18px; }
}
@media (min-width:981px) and (max-width:1199px) {
  .pa-nav > .pa-nav-link,.pa-nav-projects > .pa-nav-link { padding-left:28px; }
  .pa-nav > .pa-nav-link::before,.pa-nav-projects > .pa-nav-link::before { left:9px; }
}

/* QA-02: use the single approved Figma image for every project CTA. */
.home-program-cta::before,.home-program-cta::after { content:none !important; display:none !important; }
.home-program-cta img { display:block !important; width:100%; height:auto; margin:0; }

/* QA-03, QA-11, QA-12: exact animated-A target and desktop card geometry. */
.home-generation-alpha-slot { min-width:34px; visibility:visible; }
body.pa-scroll-story-active .home-generation-alpha-slot { visibility:hidden; opacity:0; }
.home-generation-copy h3 { font-size:clamp(40px,3.7vw,64px); }
@media (min-width:1101px) {
  /* Figma desktop composition: the title is intentionally compact so the
     complete card and its navigation cue remain part of the same frame. */
  .home-generation { padding-top:30px; }
  .home-generation-heading p { margin:0 0 .35vw; }
  .home-generation-card {
    height:min(625px,36.17vw);
    margin-left:calc(95 / 1728 * 100vw);
    margin-right:0;
  }
  .home-generation-photo-wrap {
    right:-7.5vw;
    width:27vw;
    height:31vw;
  }
  .home-brochure {
    /* This button is positioned inside the copy layer, so compensate for
       that layer before centering it on the card's lower border. */
    left:calc(min(690px, (100vw - 80px) / 2) - 5.5vw - 8.45vw);
    top:calc(min(625px,36.17vw) - 3.82vw - 32px);
  }
}

/* QA-06, QA-07: keep the title and every framed icon clear at tablet widths. */
@media (min-width:768px) and (max-width:1199px) {
  .home-hero-copy { width:45%; }
  .home-hero h1 strong { font-size:clamp(62px,7.1vw,84px); }
  .home-hero-portal { right:1vw; max-width:52vw; }
  .home-framed-icon--puzzle { right:18px; }
}

/* Pastel #23 (tablet range): at 768–1023px the 62px minimum pushed
   «GENERACIÓN» into the portal and the robot icon hid its accent. */
@media (min-width:768px) and (max-width:1023px) {
  .home-hero h1 strong { font-size:clamp(44px,6.1vw,62px); }
  .home-hero .home-button { white-space:nowrap; padding-inline:30px; font-size:20px; }
}

/* QA-08: fourth exported Figma icon joins the same floating system. */
.home-framed-icon--fourth { left:58%; top:-10%; object-fit:contain; animation:home-decor-float 5.6s ease-in-out -2.2s infinite alternate; }
@media (max-width:520px) { .home-framed-icon--fourth { left:52%; top:-7%; } }

/* QA-09: preserve Spark's complete wordmark and tagline in its capsule. */
@media (max-width:520px) {
  .home-program--spark .home-program-logo { height:auto; min-height:84px; padding:8px 12px 12px; }
  .home-program--spark .home-program-logo img { width:auto; max-width:88%; max-height:64px; object-fit:contain; }
}

/* Production assurance: exact Figma exports with a complete semantic HTML layer. */
.home-generation-mobile-features article { width:100%; }
.home-generation-mobile-features article > img { width:100%; }
.pa-garden-problem { flex:0 0 calc(33.333% - 19px); aspect-ratio:714/500; overflow:hidden; }
.pa-garden-problem > img { width:100%; height:100%; object-fit:contain; }
.pa-play.is-disabled { cursor:not-allowed; opacity:.62; box-shadow:none; }
.pa-spark-video-hit.is-disabled { cursor:not-allowed; }
.pa-monitor-cta { display:none !important; }
@media (max-width:820px) { .pa-garden-problem { flex-basis:100%; } }

/* QA-13, QA-14: Spanish native validation and zoom-safe mobile controls. */
@media (max-width:767px) {
  .wpcf7 input,.wpcf7 select,.wpcf7 textarea { font-size:16px !important; }
}

/* QA-16: the open mobile panel replaces the closed capsule exactly. */
@media (max-width:980px) {
  .pa-header.menu-is-open { background:transparent; box-shadow:none; }
  .pa-nav.is-open { position:absolute; inset:0 0 auto; width:100%; padding:8px 20px 24px; border-radius:inherit; }
}

/* QA-17–QA-22: TecPro tab content, seals, rhythm and circuit decoration. */
.pa-tecpro-page .pa-tab-panel::after { content:none; display:none; }
.pa-tecpro-page .pa-summary-card { position:relative; padding-right:100px; }
.pa-tecpro-page .pa-summary-card > i {
  background:#fff url('../images/home/icon-robot.svg') center/68% no-repeat;
  box-shadow:0 8px 18px rgba(4,28,110,.2);
}
#tecpro-panel-3 h3 { word-break:normal; overflow-wrap:normal; hyphens:manual; font-size:clamp(17px,1.4vw,24px); }
.pa-tecpro-page .pa-tab-experience { padding-bottom:60px; }
.pa-tecpro-page .pa-tab-panel { min-height:0; padding-bottom:0; }
@media (min-width:981px) { .pa-tecpro-page + .pa-footer { margin-top:0; } }
@media (max-width:767px) {
  .pa-tecpro-page .pa-tab-panel { display:flex; flex-direction:column; }
  .pa-tecpro-page .pa-summary-card { order:-1; padding-right:72px; }
  .pa-tecpro-page .pa-summary-card > i { right:12px; width:44px; height:44px; }
}

/* QA-23–QA-26: visible Spark pattern, proportional tracking and honest media. */
.pa-spark-hero { background-color:#a2ffae; background-image:url('../images/spark/pattern.png'); background-position:center; background-size:cover; }
.pa-spark-hero h1 > span { letter-spacing:-.03em; }
.pa-laptop-video { overflow:hidden; }
.pa-laptop-video > .pa-laptop-frame { transform:translateY(7%); clip-path:inset(0 0 15% 0); }
@media (max-width:520px) {
  .pa-spark-globe { left:18px; top:126px; width:54px; }
  .pa-spark-network { right:18px; top:132px; width:48px; }
  .pa-spark-heading { padding-top:56px; }
}

/* QA-27: accessible HTML versions of the Digital House information blocks. */
.pa-digital-platform { width:min(1380px,100%); margin:70px auto 0; display:grid; grid-template-columns:1.1fr 1fr 1fr; gap:24px; align-items:stretch; text-align:left; }
.pa-digital-platform-photo { width:100%; height:100%; min-height:330px; object-fit:cover; border-radius:26px; }
.pa-digital-platform article { padding:42px; border-radius:26px; background:#eaf1ff; color:#06208e; }
.pa-digital-platform article:nth-child(3) { background:#ffcf32; }
.pa-digital-platform article span { font-size:24px; font-weight:800; }
.pa-digital-platform article h3 { margin:54px 0 18px; font-size:32px; line-height:1; }
.pa-digital-platform article p { margin:0; font-size:17px; line-height:1.45; }
.pa-digital-future { padding:70px max(6vw,40px); color:#fff; }
.pa-digital-future-layout { width:min(1380px,100%); margin:auto; display:grid; grid-template-columns:1.3fr .7fr; gap:60px; align-items:center; }
.pa-digital-future-copy > p { margin:0; font-size:30px; }
.pa-digital-future-copy h2 { margin:0 0 42px; color:#ffc31f; font-size:clamp(48px,4.2vw,72px); line-height:.95; }
.pa-digital-future-skills { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.pa-digital-future-skills article { padding:24px; border:1px solid #4f79ff; border-radius:18px; background:#0a278f; }
.pa-digital-future-skills strong,.pa-digital-future-skills span { display:block; }
.pa-digital-future-skills strong { margin-bottom:12px; color:#ffc31f; font-size:19px; }
.pa-digital-future-skills span { font-size:15px; line-height:1.4; }
.pa-digital-future-laptop { width:100%; max-height:440px; object-fit:contain; }
@media (max-width:820px) {
  .pa-digital-platform { grid-template-columns:1fr; margin-top:38px; }
  .pa-digital-platform-photo { min-height:240px; }
  .pa-digital-platform article { padding:28px; }
  .pa-digital-platform article h3 { margin-top:24px; }
  .pa-digital-future { padding:50px 24px; }
  .pa-digital-future-layout { grid-template-columns:1fr; gap:26px; }
  .pa-digital-future-copy > p { font-size:21px; }
  .pa-digital-future-copy h2 { font-size:42px; }
  .pa-digital-future-skills { grid-template-columns:1fr; }
  .pa-digital-future-laptop { max-height:280px; }
}

/* Keep the follow-up mobile sizing last in the cascade. */
@media (max-width:520px) {
  .home-program { padding-bottom:106px; }
  .home-program > .home-program-cta { bottom:24px; width:230px; }
  .pa-digital-hero { padding-bottom:190px; overflow:visible; }
  .pa-skill-card { flex:0 0 210px !important; width:210px; height:233px; }
}

/* Final contact artwork clears the heading at tablet widths. */
@media (min-width:481px) and (max-width:900px) {
  .home-contact-copy > img { bottom:-115px; }
}

/* Final visual QA: the supplied Garden viewer artwork contains a dark outer
   canvas. Crop that canvas so the page remains visible through a soft blur. */
.pa-garden-viewer {
  padding:24px;
  background:rgba(8,25,29,.16);
  -webkit-backdrop-filter:blur(12px) saturate(.85);
  backdrop-filter:blur(12px) saturate(.85);
}
.pa-garden-viewer-dialog {
  width:min(1382px,calc(100vw - 64px),calc((100vh - 64px) * 1.382));
  max-height:calc(100vh - 64px);
  aspect-ratio:1.382;
  overflow:hidden;
  border-radius:30px;
  background:#fff;
  box-shadow:0 24px 60px rgba(0,20,42,.28);
}
.pa-garden-viewer-dialog > img[data-garden-viewer-image] {
  width:125%;
  height:112%;
  max-width:none;
  max-height:none;
  object-fit:fill;
  transform:translate(-10%,-5.25%);
}
.pa-garden-viewer-close { right:1.8%; top:3.6%; width:5%; min-width:38px; }
.pa-garden-viewer-close img { opacity:0; }

@media (max-width:520px) {
  .pa-garden-viewer { padding:10px; }
  .pa-garden-viewer-dialog {
    width:calc(100vw - 20px);
    max-height:calc(100vh - 20px);
    aspect-ratio:1.382;
    padding:0;
    border-radius:18px;
  }
  .pa-garden-viewer-dialog > img[data-garden-viewer-image] {
    width:125%;
    height:112%;
    max-height:none;
    border-radius:0;
  }
  .pa-garden-viewer-close { right:1%; top:2%; width:42px; }
}

/* Pastel #35/#55: Figma's circuit traces belong to the title itself — a blue
   trace with nodes under it and an orange one above «Tecnología» — not the
   gradient bar or the orange blob tried earlier. Sized in em so they follow
   the title at every breakpoint. */
.pa-tecpro-hero h1 { position:relative; }
.pa-tecpro-hero h1::before,
.pa-tecpro-hero h1::after { content:""; position:absolute; pointer-events:none; background:no-repeat center/100% 100%; }
.pa-tecpro-hero h1::before {
  left:-.05em; top:calc(100% + .1em); width:6.45em; height:.26em;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 810 32' fill='none'%3E%3Cpath d='M8 8 26 25H800' stroke='%23129bd1' stroke-width='3.5'/%3E%3Ccircle cx='8' cy='8' r='7' fill='%23129bd1'/%3E%3Ccircle cx='800' cy='25' r='7' fill='%23129bd1'/%3E%3C/svg%3E");
}
.pa-tecpro-hero h1::after {
  left:4.75em; top:-.12em; width:1.3em; height:.23em;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 165 30' fill='none'%3E%3Cpath d='M7 7H140l17 16' stroke='%23ff951a' stroke-width='3.5'/%3E%3Ccircle cx='7' cy='7' r='6' fill='%23ff951a'/%3E%3Ccircle cx='157' cy='23' r='6' fill='%23ff951a'/%3E%3C/svg%3E");
}

/* Pastel #35/#44: -.045em suited the old Black face; with real Bold it packs
   the project titles too tightly. */
.pa-project-hero h1,
.pa-project-hero h1 span,
.pa-project-hero h1 strong { letter-spacing:-.015em; }

/* Pastel #37/#39/#40: TecPro tabs rebuilt in HTML from the Figma frames
   (real copy, photos, session timeline and challenge table) instead of the
   placeholder cards; CTAs only render once their URL is set in the admin. */
.pa-tecpro-overview-grid { width:min(1060px,100%); grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(24px,3.2vw,56px); margin-top:56px; }
.pa-tecpro-overview-grid article.pa-tecpro-feature,
.pa-tecpro-feature { min-height:0; padding:0 0 26px; overflow:hidden; border:0; border-radius:22px; background:#fff; color:#0b1f8f; box-shadow:0 10px 26px rgba(4,32,120,.16); text-align:left; }
.pa-tecpro-feature { --head:#e3004f; --head-ink:#fff; }
.pa-tecpro-feature.pa-tecpro-feature--blue { --head:#0d6ef5; }
.pa-tecpro-feature.pa-tecpro-feature--sky { --head:#8fcdfa; --head-ink:#071a69; }
.pa-tecpro-feature > h3,
.pa-tecpro-overview-grid .pa-tecpro-feature > h3 { margin:0 0 22px; padding:12px 18px; background:var(--head); color:var(--head-ink); font-size:clamp(18px,1.4vw,24px); font-weight:700; line-height:1.15; text-align:center; }
.pa-tecpro-feature > img { display:block; width:calc(100% - 48px); height:auto; margin:0 auto 20px; aspect-ratio:619/305; object-fit:cover; border-radius:14px; }
.pa-tecpro-feature ul { margin:0; padding:0 28px 0 46px; font-size:16px; line-height:1.55; }
.pa-tecpro-feature > p { margin:0; padding:0 28px; font-size:16px; line-height:1.5; }

.pa-tecpro-components { width:min(1160px,100%); margin:56px auto 0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(20px,2vw,32px); }
.pa-tecpro-component-card { position:relative; padding-bottom:42px; overflow:visible; }
.pa-tecpro-feature.pa-tecpro-component-card.pa-tecpro-feature--blue { --head:#258bd6; }
.pa-tecpro-component-card > h3 { border-radius:22px 22px 0 0; }
.pa-tecpro-component-card > div { display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:center; padding:6px 28px 0; }
.pa-tecpro-component-card p { margin:0; font-size:17px; line-height:1.5; }
.pa-tecpro-component-card img { width:100%; height:auto; }
.pa-tecpro-pill-cta { display:inline-flex; align-items:center; justify-content:center; min-height:52px; padding:0 30px; border:1.5px solid #42c6f4; border-radius:999px; background:linear-gradient(180deg,#032a9e,#001344); color:#fff; font-size:18px; font-weight:600; text-decoration:none; box-shadow:0 10px 20px rgba(0,10,70,.28); transition:transform .2s ease,filter .2s ease; }
.pa-tecpro-pill-cta:hover,.pa-tecpro-pill-cta:focus-visible { transform:translateY(-3px); filter:brightness(1.12); }
.pa-tecpro-component-card > .pa-tecpro-pill-cta { position:absolute; left:50%; bottom:-26px; transform:translateX(-50%); white-space:nowrap; }
.pa-tecpro-component-card > .pa-tecpro-pill-cta:hover,.pa-tecpro-component-card > .pa-tecpro-pill-cta:focus-visible { transform:translateX(-50%) translateY(-3px); }

.pa-tecpro-timeline { width:min(1380px,100%); margin:0 auto; padding:36px clamp(20px,2.4vw,40px) 40px; display:grid; grid-template-columns:3fr 15fr 3fr 6fr 3fr; gap:0 6px; list-style:none; border-radius:26px; background:#fff; box-shadow:0 14px 32px rgba(4,32,120,.16); text-align:center; }
.pa-tecpro-stage { --c:#e3172f; display:flex; flex-direction:column; align-items:center; min-width:0; }
.pa-tecpro-stage--blue { --c:#1f5fc8; }
.pa-tecpro-stage--orange { --c:#f5a400; }
.pa-tecpro-stage--purple { --c:#7a1fa2; }
.pa-tecpro-stage--green { --c:#1ea34a; }
.pa-tecpro-stage h3 { margin:0; color:var(--c); font-size:clamp(18px,1.5vw,26px); font-weight:700; white-space:nowrap; }
.pa-tecpro-stage small { margin:4px 0 14px; color:#7d8597; font-size:14px; }
.pa-tecpro-stage-bar { display:flex; gap:3px; width:100%; }
.pa-tecpro-stage-bar i { flex:1; height:20px; border-radius:999px 999px 6px 6px; background:var(--c); }
.pa-tecpro-stage p { width:100%; max-width:240px; margin:22px 0 0; padding:12px 14px; border:2px solid var(--c); border-radius:14px; color:#0b1f8f; font-size:15px; line-height:1.35; }

.pa-tecpro-challenge-layout { width:min(1180px,100%); margin:24px auto 0; display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); align-items:center; }
.pa-tecpro-challenge-intro { margin:0 -24px 0 0; padding:44px 64px 44px 52px; border-radius:22px 0 0 22px; background:linear-gradient(135deg,#0a2fb7,#00157a); color:#fff; font-size:clamp(16px,1.2vw,19px); line-height:1.5; box-shadow:0 14px 28px rgba(0,16,90,.24); }
.pa-tecpro-challenge-table { position:relative; z-index:1; width:100%; border-collapse:separate; border-spacing:0; overflow:hidden; border:1.5px solid #0b1f8f; border-radius:18px; background:#fff; color:#0b1f8f; text-align:center; box-shadow:0 12px 24px rgba(0,16,90,.16); }
.pa-tecpro-challenge-table th { padding:16px 12px; background:#8fcdfa; font-size:clamp(18px,1.4vw,22px); font-weight:700; }
.pa-tecpro-challenge-table td { padding:14px 12px; border-top:1px solid #0b1f8f; font-size:16px; font-weight:500; }
.pa-tecpro-challenge-table th + th,.pa-tecpro-challenge-table td + td { border-left:1px solid #0b1f8f; }
.pa-tecpro-challenge-layout > .pa-tecpro-pill-cta { grid-column:1/-1; justify-self:center; margin-top:34px; }

@media (max-width:820px) {
  .pa-tecpro-overview-grid { grid-template-columns:1fr; gap:22px; margin-top:0; }
  .pa-tecpro-components { grid-template-columns:1fr; gap:44px; margin-top:0; }
  .pa-tecpro-component-card > div { grid-template-columns:1fr; }
  .pa-tecpro-timeline { grid-template-columns:1fr; gap:22px; padding:26px 18px; }
  .pa-tecpro-stage-bar i { height:16px; }
  .pa-tecpro-stage p { max-width:none; margin-top:12px; }
  .pa-tecpro-challenge-layout { grid-template-columns:1fr; gap:0; }
  .pa-tecpro-challenge-intro { margin:0 0 -18px; padding:28px 22px 40px; border-radius:20px; }
}

/* Footer: the desktop artwork baked its labels in as pixels (including the
   typo «TechPro» and a fixed year). The artwork now keeps only the logo,
   light rule and decoration; the real links render on top at the Figma
   positions, so the text is selectable, correct and takes #76's hover. */
@media (min-width:981px) {
  .pa-footer-content { left:0; top:0; width:100%; height:100%; }
  .pa-footer-nav { position:absolute; left:24.3%; top:40%; width:50%; height:14%; }
  .pa-footer-nav a { color:#fff; font-size:clamp(12px,.95vw,17px); font-weight:500; white-space:nowrap; }
  .pa-footer-meta { left:37.5%; right:auto; top:75%; bottom:auto; width:25%; height:11%; color:rgba(255,255,255,.72); }
  .pa-footer-meta p,.pa-footer-meta a { color:rgba(255,255,255,.72); font-size:clamp(11px,.8vw,14px); white-space:nowrap; }
  .pa-footer-meta a:hover { color:#fff; }
  .pa-footer-nav a:hover { opacity:.74; background:transparent; }
}
.pa-tecpro-timeline { margin-top:48px; }
/* #38: ~60px of visible space between the last tab content and the footer. */
.pa-tecpro-page .pa-tab-experience { padding-bottom:12px; }
@media (max-width:820px) {
  .pa-tecpro-stage-bar { justify-content:center; }
  .pa-tecpro-stage-bar i { flex:0 1 18px; }
}

/* Pastel #41: Figma sets «Habilidades digitales» in Black 82px (the general
   Bold rule of #74 does not apply to this line). */
.pa-digital-hero h1 strong { font-weight:900; }

/* Pastel #59 follow-up: the zoomed card showed a square white outline/shadow
   around the rounded artwork. Keep the outline for keyboard focus only. */
.pa-skill-card { border-radius:16px; }
.pa-skill-card > img { border-radius:16px; }
.pa-skill-card:hover { outline:none; box-shadow:0 12px 22px rgba(0,18,90,.3); }

/* Pastel #37/#71/#73: Garden «Facilidad de implementación» rebuilt to the
   Figma composition — teal panel, icon list in two columns, marIA strip and
   the photo overhanging the panel edge — after the earlier grid patches let
   the photo cover the second column at every desktop width. */
.pa-garden-page .pa-garden-implementation { position:relative; display:block !important; width:min(1380px,calc(100% - 80px)); min-height:0; margin:60px auto 40px; padding:0; border-radius:0; background:none; color:#fff; overflow:visible; }
.pa-garden-page .pa-garden-implementation::before { content:""; position:absolute; z-index:0; left:0; top:0; bottom:0; width:78%; border-radius:28px; background:#2eaaa8; }
.pa-garden-page .pa-garden-implementation > h2 { position:relative; z-index:1; max-width:none; margin:0; padding:clamp(36px,3.4vw,58px) 0 0 clamp(40px,5.8vw,100px); color:#fff; font-size:clamp(40px,3.5vw,60px); line-height:1.05; text-align:left; }
.pa-garden-page .pa-garden-implementation > ul { position:relative; z-index:1; width:56%; margin:28px 0 0 clamp(40px,5.8vw,100px); padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 34px; list-style:none; }
.pa-garden-page .pa-garden-implementation li { display:flex; align-items:center; gap:14px; min-height:62px; padding:10px 18px 10px 10px; border-radius:14px; background:#fff; color:#0b2b9e; font-size:clamp(13px,.95vw,16px); font-weight:400; line-height:1.25; }
.pa-garden-page .pa-garden-implementation li strong { font-weight:700; }
.pa-garden-page .pa-garden-implementation li img { position:static; flex:none; width:40px; height:40px; max-height:none; margin:0; transition:none; }
.pa-garden-page .pa-garden-implementation > .pa-garden-implementation-photo { position:absolute; z-index:2; right:0; top:-22px; width:28%; height:auto; max-height:none; margin:0; object-fit:contain; }
.pa-garden-page .pa-garden-implementation > .pa-garden-maria { position:relative; z-index:1; left:auto; right:auto; bottom:auto; width:61%; margin:44px 0 34px; padding:22px 30px 22px 18%; border-radius:0 18px 18px 0; background:#fff; color:#0b2b9e; font-size:clamp(14px,1.05vw,18px); line-height:1.4; }
.pa-garden-page .pa-garden-implementation > .pa-garden-maria strong { font-weight:700; }

@media (max-width:1100px) {
  .pa-garden-page .pa-garden-implementation > ul { width:62%; grid-template-columns:1fr; }
  .pa-garden-page .pa-garden-implementation > .pa-garden-implementation-photo { width:32%; top:60px; }
}
@media (max-width:820px) {
  .pa-garden-page .pa-garden-implementation { width:calc(100% - 32px); margin:40px auto 30px; }
  .pa-garden-page .pa-garden-implementation::before { width:100%; border-radius:24px; }
  .pa-garden-page .pa-garden-implementation > h2 { padding:30px 30px 0; font-size:clamp(30px,5vw,38px); }
  .pa-garden-page .pa-garden-implementation > ul { width:calc(60% - 30px); margin:20px 0 0 30px; gap:10px; }
  .pa-garden-page .pa-garden-implementation li { min-height:54px; font-size:14px; }
  .pa-garden-page .pa-garden-implementation > .pa-garden-implementation-photo { width:36%; right:18px; top:96px; }
  .pa-garden-page .pa-garden-implementation > .pa-garden-maria { width:auto; margin:24px 16px 0; padding:18px 20px; border-radius:14px; font-size:15px; }
  .pa-garden-page .pa-garden-implementation { padding-bottom:20px; }
}
@media (max-width:520px) {
  .pa-garden-page .pa-garden-implementation { width:calc(100% - 24px); }
  .pa-garden-page .pa-garden-implementation > h2 { padding:26px 18px 0; font-size:30px; }
  .pa-garden-page .pa-garden-implementation > ul { width:auto; margin:18px 14px 0; }
  .pa-garden-page .pa-garden-implementation > .pa-garden-implementation-photo { position:relative; top:auto; right:auto; display:block; width:84%; margin:22px auto 0; }
  .pa-garden-page .pa-garden-implementation > .pa-garden-maria { margin:18px 12px 0; }
}

/* Pastel #70: in Figma the pale teal field runs from the middle of the orange
   band down behind the whole Garden Medición panel (it only showed as a strip
   under the band). A clipped full-bleed spread paints it without adding
   horizontal overflow. */
.pa-garden-page .pa-garden-system {
  box-shadow:0 18px 28px rgba(0,35,80,.3),0 0 0 100vmax #d9f4f1;
  clip-path:inset(-30px -100vmax -90px -100vmax);
}
/* Chrome now honours justify-items in block layout, so the base
   «place-items:center» kept centring every child of the block section. */
.pa-garden-page .pa-garden-implementation { justify-items:normal; place-items:normal; }

/* Pastel #52 (revisited): Figma straddles «Ver detalles» across the card's
   lower edge, aligned with the copy column. Centring it inside the card made
   it cover the last line of each description. */
@media (min-width:1101px) {
  .home-program > .home-program-cta { left:10%; bottom:1.1vw; transform:translateY(50%); }
  .home-program--digital > .home-program-cta,
  .home-program--garden > .home-program-cta { left:54.3%; }
  .home-program > .home-program-cta:hover,
  .home-program > .home-program-cta:focus-visible { transform:translateY(calc(50% - 3px)); }
}
@media (min-width:1101px) {
  /* Spark's two-line title pushes its copy to the card edge; tighten it so the
     straddling CTA clears the description. */
  .home-program--spark .home-program-copy h2 { font-size:2.7vw; line-height:1; margin-bottom:.9vw; }
  .home-program--spark > .home-program-cta { bottom:.5vw; }
}

/* Pastel #34 (tablet range): at 521–1100px the Digital House logo was still
   cropped to «DIGITALHO» under a separate «Schools» overlay; use the same
   complete-logo treatment as mobile. */
@media (max-width:1100px) {
  .home-program--digital .home-program-logo { display:flex; align-items:center; justify-content:center; gap:clamp(6px,1.2vw,12px); }
  .home-program--digital .home-program-logo img { width:62%; max-width:62%; height:auto; max-height:70%; object-fit:contain; transform:none; }
  .home-program--digital .home-program-logo::after { content:"Schools"; position:static; flex:none; transform:none; font-size:clamp(11px,1.9vw,17px); }
}

/* Figma review (Generación Alpha wordmark): the A is the flat white logo
   mark at ~2.3× the cap height of PROJECT and the separator is the gradient
   brand star (~1.8× cap height), not the cyan sparkle. */
.home-generation-alpha-slot { aspect-ratio:279/293; height:auto; }
.home-generation-wordmark { grid-template-columns:clamp(92px,7.4vw,140px) auto clamp(64px,6vw,112px) auto; }
.home-generation-alpha-slot { width:clamp(92px,7.4vw,140px); }
.home-generation-brand-star { width:clamp(64px,6vw,112px); height:auto; aspect-ratio:170/166; }
@media (min-width:761px) and (max-width:1100px) {
  .home-generation-wordmark { grid-template-columns:clamp(68px,9.4vw,100px) auto clamp(48px,7.4vw,78px) auto; }
  .home-generation-alpha-slot { width:clamp(68px,9.4vw,100px); }
  .home-generation-brand-star { width:clamp(48px,7.4vw,78px); }
}
@media (max-width:760px) {
  .home-generation-wordmark { grid-template-columns:clamp(40px,11vw,62px) auto clamp(30px,8vw,46px) auto; }
  .home-generation-alpha-slot { width:clamp(40px,11vw,62px); }
  .home-generation-brand-star { width:clamp(30px,8vw,46px); }
}

/* Figma review: the left outline sparkle sits ~3 cap-heights from the A. */
@media (min-width:1101px) { .home-generation-spark--left-outline { left:-21%; } }

/* Figma review: the four framed icons orbit the A instead of floating in
   place. The portal is a size container so the radius and icon size follow
   it at every breakpoint; each icon starts 90° apart and counter-rotates to
   stay upright. */
.home-hero-portal { container-type:size; }
.home-hero-portal .home-framed-icon {
  --r:50cqw;
  position:absolute;
  inset:auto;
  left:calc(50% - 7.15cqw);
  top:calc(50% - 7.15cqw);
  width:14.3cqw;
  height:14.3cqw;
  margin:0;
  object-fit:contain;
  transform:rotate(var(--a)) translateX(var(--r)) rotate(calc(-1 * var(--a)));
  animation:pa-icon-orbit 48s linear infinite;
}
.home-hero-portal .home-framed-icon--puzzle { --a:-25deg; }
.home-hero-portal .home-framed-icon--laptop { --a:65deg; }
.home-hero-portal .home-framed-icon--robot { --a:155deg; }
.home-hero-portal .home-framed-icon--fourth { --a:245deg; }
@keyframes pa-icon-orbit {
  from { transform:rotate(var(--a)) translateX(var(--r)) rotate(calc(-1 * var(--a))); }
  to { transform:rotate(calc(var(--a) + 360deg)) translateX(var(--r)) rotate(calc(-1 * var(--a) - 360deg)); }
}
html.reduced-motion .home-hero-portal .home-framed-icon { animation:none; }
/* reduced: see html.reduced-motion rule above (site-wide convention). */
@media (max-width:1100px) {
  .home-hero-portal .home-framed-icon { --r:44cqw; left:calc(50% - 6.5cqw); top:calc(50% - 6.5cqw); width:13cqw; height:13cqw; }
}

/* Figma review (Generación Alpha card): the whole composition follows the
   1728px frame proportionally — card 1380×625 at x95, copy column, photo
   overhanging the right edge, and «Descargar folleto» on one line centred
   on the card's lower border. Earlier px caps (min(1380px…), 64px title)
   made the card fill the viewport below 1728px and pushed the photo off. */
@media (min-width:1101px) {
  .home-generation-card { width:79.86vw; height:36.17vw; margin:2vw 0 0 5.5vw; border-radius:1.39vw; }
  .home-generation-copy { left:5.85vw; top:4.3vw; width:49.6vw; }
  .home-generation-copy h3 { font-size:3.47vw; line-height:1.04; }
  .home-generation-copy h3::after { content:""; display:block; width:28.5vw; height:2px; margin-top:1.75vw; background:linear-gradient(90deg,rgba(76,216,255,0),#4cd8ff 35%,rgba(76,216,255,0)); }
  .home-generation-copy > p { width:45.72vw; margin:.9vw 0 1.85vw; font-size:1.04vw; }
  .home-generation-copy ul { width:49.6vw; gap:.93vw 1.62vw; }
  .home-generation-photo-wrap { right:-8.56vw; top:1.04vw; width:27.6vw; height:31.4vw; }
  .home-brochure {
    left:calc(39.93vw - 5.85vw - 10.1vw);
    top:calc(36.17vw - 4.3vw - 1.735vw);
    width:20.2vw;
    min-width:0;
    min-height:3.47vw;
    height:3.47vw;
    padding:0 1.6vw;
    gap:.9vw;
    font-size:1.2vw;
    white-space:nowrap;
    justify-content:center;
  }
}

/* Scroll story: when the travelling A is flagged «behind» content (story
   z-index 1) it should stay visible over the section/card backgrounds but
   pass under text, photos and cards. The projects section no longer isolates
   its layers, so its background paints below the A while the heading and the
   deck (z-index 2) paint above it; the generation copy and photo already sit
   at z-index 8 over the card background. */
@media (min-width:1101px) { .home-projects-overview { isolation:auto; } }
.home-project-deck { z-index:2; }

/* Figma review (hero, current frame): positions measured on the 1728px frame
   relative to the hero — eight sparkles (four filled, four outline), the
   portal ring centred ~25px right / 41px higher, framed icons 72px on the
   ring edge starting at their Figma angles (globe top-left, puzzle top-right,
   robot left, laptop bottom), and the 54px-tall primary CTA. */
.home-spark--hero-c,.home-spark--hero-d,.home-spark--hero-e,.home-spark--hero-f,.home-spark--hero-g,.home-spark--hero-h { display:none; }
@media (min-width:1101px) {
  .home-hero .home-spark { display:block; bottom:auto; right:auto; height:auto; translate:-50% -50%; }
  .home-spark--hero-a { left:36.8%; top:41.9%; width:6.08vw; }
  .home-spark--hero-b { left:41.6%; top:30.1%; width:2.84vw; }
  .home-spark--hero-f { left:59.2%; top:21%; width:2.66vw; animation-delay:-.8s; animation-duration:5.1s; }
  .home-spark--hero-g { left:58.4%; top:57.5%; width:3.82vw; animation-delay:-2.4s; animation-duration:4.7s; }
  .home-spark--hero-c { left:7.1%; top:20.6%; width:2.84vw; }
  .home-spark--hero-d { left:42.8%; top:64.6%; width:2.84vw; animation-delay:-3.1s; animation-duration:4.4s; }
  .home-spark--hero-e { left:27.1%; top:74%; width:2.84vw; animation-delay:-1.9s; animation-duration:5.8s; }
  .home-spark--hero-h { left:93.9%; top:55.5%; width:2.84vw; animation-delay:-1.2s; animation-duration:5.3s; }
}
/* Above 1500px the orbit, ring and A keep their own pixel sizes, so only the
   horizontal Figma offset is applied (25px right); between 1501 and 1727px
   the portal slides right with the viewport so «GENERACIÓN» never reaches the
   ring. */
@media (min-width:1501px) {
  .home-hero-portal { right:clamp(24px, calc(88px - (1728px - 100vw) * .45), 88px); }
}
@media (min-width:1101px) {
  .home-hero h1 strong { margin-top:-.5vw; }
  .home-hero .home-button { min-height:3.13vw; height:3.13vw; }
}
.home-hero-portal .home-framed-icon { --r:47cqw; left:calc(50% - 5.7cqw); top:calc(50% - 5.7cqw); width:11.4cqw; height:11.4cqw; }
.home-hero-portal .home-framed-icon--puzzle { --a:-35deg; }
.home-hero-portal .home-framed-icon--laptop { --a:63deg; }
.home-hero-portal .home-framed-icon--robot { --a:203deg; }
.home-hero-portal .home-framed-icon--fourth { --a:247deg; }
@media (max-width:1100px) {
  .home-hero-portal .home-framed-icon { --r:44cqw; left:calc(50% - 6.5cqw); top:calc(50% - 6.5cqw); width:13cqw; height:13cqw; }
}

/* Figma review (Descubre los proyectos): four sparkles around the heading —
   outline top-left, filled top-right, filled left of the subtitle and outline
   right of it. The last two were parked behind the deck. */
@media (min-width:1101px) {
  .home-project-star--one { left:17.5%; top:10%; }
  .home-project-star--three { left:auto; right:17.5%; top:calc(6.4vw + 13.4vw); bottom:auto; }
  .home-project-star--four { right:auto; left:9.5%; top:calc(6.4vw + 11.6vw); bottom:auto; width:clamp(26px,2.4vw,46px); }
}

/* While the travelling mark passes «behind» content it is a background
   element: lower its contrast so white headlines over it stay legible. */
@media (min-width:521px) {
.pa-scroll-story.is-behind-projects .pa-scroll-story-stage,
.pa-scroll-story.is-behind-contact .pa-scroll-story-stage { opacity:.45 !important; transition:opacity .25s ease; }
}

/* Figma review (Somos el proyecto educativo): seven sparkles — three around
   the orbit (placed on the section, since the orbit image itself is hidden
   while the scroll story lands on it) and four tied to the card — plus the
   gradient rule under the heading. */
.home-summary-stars,.home-summary-star { display:none; }
@media (min-width:1101px) {
  .home-summary-stars { display:block; position:absolute; inset:0; z-index:0; pointer-events:none; }
  .home-summary-star { display:block; position:absolute; z-index:3; width:2.4vw; height:auto; translate:-50% -50%; pointer-events:none; animation:home-sparkle-drift 5.2s ease-in-out infinite alternate; }
  .home-summary-star--ring-tl { left:1.1%; top:10.2%; animation-delay:-.6s; }
  .home-summary-star--ring-top { left:47.8%; top:12%; animation-delay:-2.1s; }
  .home-summary-star--ring-bl { left:5.7%; top:90.5%; width:2.5vw; animation-delay:-3.4s; }
  .home-summary-star--card-tr { left:96.8%; top:-32.7%; animation-delay:-1.3s; }
  .home-summary-star--card-in { left:92.6%; top:25.5%; width:2.1vw; animation-delay:-2.7s; }
  .home-summary-star--card-large { left:85.9%; top:46.6%; width:5vw; animation-delay:-.2s; }
  .home-summary-star--card-below { left:43.7%; top:126.4%; animation-delay:-4s; }
  .home-alpha-summary-copy > h2::after { content:""; display:block; width:100%; height:2px; margin-top:24px; background:linear-gradient(90deg,rgba(76,216,255,0),#4cd8ff 30%,#4cd8ff 70%,rgba(76,216,255,0)); }
}
html.reduced-motion .home-summary-star { animation:none; }
/* Superseded by the seven Figma summary sparkles above. */
@media (min-width:1101px) { .home-project-grid-zone::before,.home-project-grid-zone::after { content:none; } }

/* Contact arrival: the copy panel no longer forms its own stacking context,
   so its surface and page curl (z 0) paint under the travelling A (story
   z 1) while the pill and heading (z 2) stay above it — the mark is visible
   over the panel from the start without covering the text. */
.home-contact-copy { z-index:auto; }
.home-contact-copy::before { z-index:0; }
.home-contact-copy::after { z-index:0; }
.home-contact-copy > .home-pill,
.home-contact-copy > h2 { position:relative; z-index:2; }
.home-contact-copy > img[data-scroll-story-anchor="contact"] { z-index:1; }
.home-contact-form-shell { z-index:2; }
/* Contact: keep the mark fully opaque behind the panel (only the project
   heading needs the softened pass). */
@media (min-width:521px) { .pa-scroll-story.is-behind-contact .pa-scroll-story-stage { opacity:1 !important; } }
/* White heading over the white mark: a soft navy halo keeps it legible. */
.home-contact-copy > h2,
.home-section-heading h2 { text-shadow:0 2px 14px rgba(0,18,110,.55),0 0 2px rgba(0,18,110,.35); }

/* Scroll cue: anchor it to the first screen, not the 990px hero bottom, so it
   is fully visible on shorter viewports; it now stays until ~a third of a
   screen has been scrolled (robot-scroll.js). */
.home-hero-scroll-cue { bottom:auto; top:min(calc(100% - 56px), calc(100svh - 62px)); }
@media (max-width:980px) { .home-hero-scroll-cue { top:min(calc(100% - 44px), calc(100svh - 48px)); } }
@media (min-width:981px) { .home-hero-scroll-cue { font-size:17px; opacity:1; } .home-hero-scroll-cue span { width:36px; height:36px; } }

/* Figma: the grid pattern does not stop at the end of the project zone; it
   fades out and keeps running, fainter, behind the contact section. The zone
   now dissolves over its last 260px (no hard edge, glow included) and the
   contact section continues the same grid, cross-fading in. */
.home-project-grid-zone {
  -webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 260px),transparent);
  mask-image:linear-gradient(to bottom,#000 calc(100% - 260px),transparent);
}
.home-contact::before {
  content:"";
  position:absolute;
  z-index:0;
  left:0;
  right:0;
  top:-260px;
  bottom:0;
  background:url("../images/home/ambient-grid.png") center 40% / 100% auto repeat-y;
  opacity:.55;
  pointer-events:none;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 260px,#000 55%,transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0,#000 260px,#000 55%,transparent 100%);
}

/* Figma (desktop): the grid pattern belongs to the program cards only — it
   fades in just above the TecPro card, runs behind the four programs and
   fades out as the contact panels begin; nothing behind «Somos el proyecto
   educativo» and nothing below the top of the contact section. */
@media (min-width:1101px) {
  .home-project-grid-zone { background-image:none; -webkit-mask-image:none; mask-image:none; }
  .home-programs { position:relative; }
  .home-programs::before {
    content:"";
    position:absolute;
    z-index:0;
    left:0;
    right:0;
    top:-6vw;
    bottom:0;
    background:url("../images/home/ambient-grid.png") center top / 100% auto repeat-y;
    pointer-events:none;
    -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 12vw,#000 100%);
    mask-image:linear-gradient(to bottom,transparent 0,#000 12vw,#000 100%);
  }
  .home-contact::before {
    top:0;
    bottom:auto;
    height:clamp(200px,15vw,300px);
    opacity:1;
    background-position:center bottom;
    -webkit-mask-image:linear-gradient(to bottom,#000 0,transparent 100%);
    mask-image:linear-gradient(to bottom,#000 0,transparent 100%);
  }
}
/* Figma always sets «PROYECTO / EDUCATIVO» on two lines (wide screens let it
   run on one and hit the large sparkle). */
@media (min-width:1101px) { .home-alpha-summary-copy > h2 strong { width:min-content; } }

/* Seamless hand-off between the two grid layers: the program grid fades out
   over its last 240px while the contact layer — the same vertical lines,
   drawn in CSS on the image's exact 305.4/3456 (8.8368%) rhythm — fades in
   over that same band and then dissolves at the top of the contact panels. */
@media (min-width:1101px) {
  .home-programs::before {
    -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 12vw,#000 calc(100% - 240px),transparent 100%);
    mask-image:linear-gradient(to bottom,transparent 0,#000 12vw,#000 calc(100% - 240px),transparent 100%);
  }
  .home-contact::before {
    top:-240px;
    height:calc(240px + 9vw);
    /* Lines placed at the image's own x positions as % of the section width
       (vw included the scrollbar and drifted). */
    background:linear-gradient(90deg,transparent calc(8.8252% - .5px),rgba(179,237,255,.6) calc(8.8252% - .5px),rgba(179,237,255,.6) calc(8.8252% + .5px),transparent calc(8.8252% + .5px),transparent calc(17.6505% - .5px),rgba(179,237,255,.6) calc(17.6505% - .5px),rgba(179,237,255,.6) calc(17.6505% + .5px),transparent calc(17.6505% + .5px),transparent calc(26.4757% - .5px),rgba(179,237,255,.6) calc(26.4757% - .5px),rgba(179,237,255,.6) calc(26.4757% + .5px),transparent calc(26.4757% + .5px),transparent calc(35.3009% - .5px),rgba(179,237,255,.6) calc(35.3009% - .5px),rgba(179,237,255,.6) calc(35.3009% + .5px),transparent calc(35.3009% + .5px),transparent calc(44.1551% - .5px),rgba(179,237,255,.6) calc(44.1551% - .5px),rgba(179,237,255,.6) calc(44.1551% + .5px),transparent calc(44.1551% + .5px),transparent calc(52.9803% - .5px),rgba(179,237,255,.6) calc(52.9803% - .5px),rgba(179,237,255,.6) calc(52.9803% + .5px),transparent calc(52.9803% + .5px),transparent calc(61.8056% - .5px),rgba(179,237,255,.6) calc(61.8056% - .5px),rgba(179,237,255,.6) calc(61.8056% + .5px),transparent calc(61.8056% + .5px),transparent calc(70.6597% - .5px),rgba(179,237,255,.6) calc(70.6597% - .5px),rgba(179,237,255,.6) calc(70.6597% + .5px),transparent calc(70.6597% + .5px),transparent calc(79.4850% - .5px),rgba(179,237,255,.6) calc(79.4850% - .5px),rgba(179,237,255,.6) calc(79.4850% + .5px),transparent calc(79.4850% + .5px),transparent calc(88.3102% - .5px),rgba(179,237,255,.6) calc(88.3102% - .5px),rgba(179,237,255,.6) calc(88.3102% + .5px),transparent calc(88.3102% + .5px),transparent calc(97.1644% - .5px),rgba(179,237,255,.6) calc(97.1644% - .5px),rgba(179,237,255,.6) calc(97.1644% + .5px),transparent calc(97.1644% + .5px));
    background-position:0 0;
    background-size:auto;
    opacity:1;
    -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 240px,transparent 100%);
    mask-image:linear-gradient(to bottom,transparent 0,#000 240px,transparent 100%);
  }
}

/* Video modal: size from the modal's own box (100vw included the scrollbar)
   and keep 48px clear on every side so the close button, which overhangs the
   corner by 16px, always stays inside the screen. */
.pa-video-modal-dialog { width:min(calc(100% - 96px), calc((100vh - 96px) * 16 / 9)); max-height:calc(100vh - 96px); }
@media (max-width:820px) {
  .pa-video-modal-dialog { width:min(calc(100% - 40px), calc((100vh - 40px) * 16 / 9)); max-height:calc(100vh - 40px); }
  .pa-video-modal-close { right:-10px; top:-10px; width:40px; height:40px; font-size:28px; }
}

/* Figma «scroll divider»: cyan light rules that glow and fade at both ends
   (no violet), ~50px from a translucent circle with a thin white arrow. */
.home-scroll-divider {
  border:1px solid rgba(120,170,255,.35);
  background:rgba(70,110,235,.45);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
  color:#fff;
  font-family:Arial,Helvetica,sans-serif;
  font-weight:300;
  -webkit-text-fill-color:#fff;
  background-clip:padding-box;
}
.home-scroll-divider::before,
.home-scroll-divider::after {
  height:2px;
  border-radius:2px;
  background:linear-gradient(90deg,rgba(41,204,255,0) 0%,rgba(41,204,255,.85) 14%,#3ad8ff 45%,rgba(41,204,255,.75) 78%,rgba(41,204,255,0) 100%);
  filter:drop-shadow(0 0 3px rgba(41,204,255,.9)) drop-shadow(0 0 8px rgba(41,204,255,.45));
}
@media (min-width:1101px) {
  .home-scroll-divider::before { right:calc(100% + 2.9vw); width:38.8vw; }
  .home-scroll-divider::after { left:calc(100% + 2.9vw); width:38.8vw; }
}
/* Figma arrow: short, 2px stroke, open chevron head (~42% of the circle). */
.home-scroll-divider {
  color:transparent;
  -webkit-text-fill-color:transparent;
  background:rgba(70,110,235,.45) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v15M5.5 12.5 12 19l6.5-6.5'/%3E%3C/svg%3E") center / 42% no-repeat;
}

/* Pastel #15: subtle entrance + micro-interactions for the generation photo
   and framed icons. Photo rises in; icons pop in staggered with a soft
   overshoot, then keep the gentle idle sway; hovering the card wobbles them
   once. Individual transform properties (translate/scale/rotate) compose
   with the sway animation, which owns `transform`. */
.home-generation-photo-crop,
.home-generation-icon { transition:opacity .6s ease,translate .8s cubic-bezier(.2,.8,.2,1),scale .75s cubic-bezier(.34,1.56,.64,1),rotate .75s cubic-bezier(.34,1.56,.64,1); }
.pa-entrance-ready:not(.pa-entrance-in) .home-generation-photo-crop { opacity:0; translate:0 36px; scale:.97; }
.pa-entrance-ready:not(.pa-entrance-in) .home-generation-icon { opacity:0; scale:.35; rotate:-22deg; }
.pa-entrance-ready:not(.pa-entrance-in) .home-generation-icon--puzzle { rotate:22deg; }
.pa-entrance-in .home-generation-icon--laptop { transition-delay:.35s; }
.pa-entrance-in .home-generation-icon--puzzle { transition-delay:.55s; }
.home-generation-card.pa-entrance-in:hover .home-generation-icon { animation:pa-icon-wobble .9s ease-in-out 1; }
.home-generation-card.pa-entrance-in:hover .home-generation-icon--puzzle { animation-delay:.08s; }
@keyframes pa-icon-wobble {
  0%,100% { transform:rotate(0); }
  20% { transform:rotate(-12deg) scale(1.06); }
  40% { transform:rotate(9deg) scale(1.06); }
  60% { transform:rotate(-6deg); }
  80% { transform:rotate(3deg); }
}

/* Phones: program artwork stays in its card instead of being replaced by the
   travelling mark (robot-scroll.js toggles this class at ≤520px). */
body.pa-story-static-programs .home-program-visual { opacity:1 !important; }
/* Phones: per-card entrance for the program artwork, then a gentle float. */
body.pa-story-static-programs .home-program-visual {
  transition:opacity .6s ease,translate .9s cubic-bezier(.2,.8,.2,1),scale .9s cubic-bezier(.34,1.45,.64,1),rotate .9s cubic-bezier(.34,1.45,.64,1);
  transition-delay:.12s;
}
body.pa-story-static-programs .home-program.pa-art-ready:not(.pa-art-in) .home-program-visual { opacity:0 !important; translate:0 48px; scale:.78; rotate:-7deg; }
body.pa-story-static-programs .home-program.pa-art-in .home-program-visual img { animation:pa-art-float 5.5s ease-in-out 1s infinite alternate; }
@keyframes pa-art-float { from { transform:translateY(0) rotate(-1.5deg); } to { transform:translateY(-10px) rotate(1.5deg); } }
/* Stronger, slower phone entrance so it reads clearly. */
body.pa-story-static-programs .home-program-visual { transition-duration:.7s,1.1s,1.1s,1.1s; }
body.pa-story-static-programs .home-program.pa-art-ready:not(.pa-art-in) .home-program-visual { translate:0 70px; scale:.7; rotate:-9deg; }

/* Tablet/phone: the contact grid layer must not climb over the Garden card. */
@media (max-width:1100px) {
  .home-contact::before { top:0; }
}
/* Phones/tablet: the contact mark sits inside the panel, below the heading,
   and the panel grows to hold it — it no longer hangs over the form. */
@media (max-width:1100px) {
  .home-contact-copy { height:auto !important; padding-bottom:clamp(40px,8vw,64px) !important; }
  .home-contact-copy > img { position:relative !important; left:auto !important; bottom:auto !important; top:auto !important; display:block; width:min(250px,62vw) !important; height:auto !important; aspect-ratio:1; margin:28px auto 0; transform:none !important; }
}
/* The grid-zone fade mask is a desktop device; on narrow screens it washed
   out the bottom of the Garden card. */
@media (max-width:1100px) { .home-project-grid-zone { -webkit-mask-image:none; mask-image:none; } }
/* Exit upwards when the card has scrolled past the top. */
body.pa-story-static-programs .home-program.pa-art-ready.pa-art-above:not(.pa-art-in) .home-program-visual { translate:0 -60px; scale:.8; rotate:7deg; }

/* Scroll cue always reads above the travelling mark (story layer z 7); on
   phones it sits over the portal, so it gets a translucent navy pill. */
.home-hero-scroll-cue { z-index:9; }
@media (max-width:980px) {
  .home-hero-scroll-cue { padding:6px 14px 6px 6px; border-radius:999px; background:rgba(3,23,95,.62); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
}
/* A mobile rule left the deck at z-index 1 — the same layer as the story,
   which then painted over the cards. */
.home-project-deck { z-index:2 !important; }

/* TecPro summary card — Figma component «TAG de texto» (1728 frame):
   837×163 navy card with grain, 18px copy, white tag straddling the bottom
   edge and the scalloped robot seal overhanging the right edge by 56px. */
@media (min-width:981px) {
  .pa-tecpro-page .pa-summary-card {
    position:relative;
    width:min(837px,48.44vw);
    min-height:min(163px,9.43vw);
    margin:0 auto clamp(56px,4.4vw,76px);
    padding:clamp(22px,1.85vw,32px) clamp(80px,6.8vw,118px) clamp(36px,2.9vw,50px);
    border-radius:clamp(16px,1.27vw,22px);
    background-color:#001795;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    box-shadow:0 14px 26px rgba(0,16,96,.28);
    text-align:center;
  }
  .pa-tecpro-page .pa-summary-card > p { max-width:623px; margin:0 auto; color:#fff; font-size:clamp(14px,1.04vw,18px); font-weight:400; line-height:1.32; }
  .pa-tecpro-page .pa-summary-card > p strong { font-weight:700; }
  .pa-tecpro-page .pa-summary-card > span {
    position:absolute; left:50%; bottom:0; translate:-50% 50%;
    min-width:min(388px,22.45vw); padding:clamp(10px,.8vw,14px) clamp(20px,1.6vw,28px);
    border-radius:999px; background:#fff; color:#001795;
    font-size:clamp(14px,1.04vw,18px); font-weight:600; line-height:1.2; letter-spacing:0; text-transform:uppercase; white-space:nowrap;
    box-shadow:0 8px 16px rgba(0,16,96,.22);
  }
  .pa-tecpro-page .pa-summary-card > i {
    right:calc(-1 * min(56px,3.24vw)); top:50%;
    width:min(129px,7.47vw); height:auto; aspect-ratio:298/312;
    border-radius:0; box-shadow:none; transform:translateY(-50%);
    background:url("../images/tecpro/summary-seal-robot.png") center / contain no-repeat !important;
  }
}

/* TecPro «El proyecto» cards — Figma 1728 frame: three 391×434 cards with
   71px gaps (grid 1314 wide, 85px below the summary tag), 63px coloured
   header, 315×159 photo 20px under it, bullets inset 45px. */
@media (min-width:981px) {
  .pa-tecpro-page .pa-tecpro-overview-grid { width:min(1314px,76.04vw); margin:min(85px,4.92vw) auto 0; grid-template-columns:repeat(3,minmax(0,1fr)); gap:min(71px,4.11vw); }
  .pa-tecpro-page .pa-tecpro-overview-grid article.pa-tecpro-feature { min-height:min(434px,25.12vw); padding:0 0 min(30px,1.74vw); border-radius:min(16px,.93vw); box-shadow:0 10px 24px rgba(4,32,120,.14); }
  .pa-tecpro-page .pa-tecpro-overview-grid .pa-tecpro-feature > h3 { display:flex; align-items:center; justify-content:center; height:min(63px,3.65vw); margin:0 0 min(20px,1.16vw); padding:0 16px; font-size:min(24px,1.39vw); }
  .pa-tecpro-page .pa-tecpro-overview-grid .pa-tecpro-feature > img { width:80.6%; aspect-ratio:315/159; margin:0 auto min(26px,1.5vw); border-radius:min(10px,.58vw); }
  .pa-tecpro-page .pa-tecpro-overview-grid .pa-tecpro-feature ul { padding:0 9.7% 0 14.3%; font-size:min(16px,.93vw); line-height:1.5; }
  .pa-tecpro-page .pa-tecpro-overview-grid .pa-tecpro-feature > p { padding:0 9.7%; font-size:min(16px,.93vw); line-height:1.5; }
}

/* ===== TecPro tabs 2–4 rebuilt from the Figma frames (1728px) ===== */
/* Shared: navy summary card with grain; seal variants. */
.pa-tecpro-page .pa-summary-card--circuit > i { background:url("../images/tecpro/summary-seal.png") center / contain no-repeat !important; }
.pa-tecpro-page .pa-summary-card--circuit > i::after { content:""; position:absolute; inset:27%; background:url("../images/tecpro/summary-icon-circuit.png") center / contain no-repeat; }
.pa-tecpro-page .pa-summary-card--plain { padding-right:clamp(40px,4vw,70px) !important; }
.pa-tecpro-page .pa-summary-card--plain > i,.pa-tecpro-page .pa-summary-card--plain > span { display:none !important; }

/* Tab 2: two 590×281 cards visible, plain navy arrows, CTA on the edge. */
.pa-tecpro-components-carousel { width:min(1520px,100%); margin:min(64px,3.7vw) auto 0; display:grid; grid-template-columns:56px minmax(0,1212px) 56px; justify-content:center; align-items:center; gap:min(48px,2.8vw); }
.pa-tecpro-components-carousel .pa-carousel-viewport { overflow:hidden; margin:-20px -16px -44px; padding:20px 16px 44px; }
.pa-tecpro-components-carousel .pa-carousel-track { display:flex; gap:32px; }
.pa-tecpro-components-carousel .pa-carousel-arrow { width:48px; height:48px; border:0; background:transparent; box-shadow:none; color:#0b1f8f; font-size:34px; }
.pa-tecpro-components-carousel .pa-carousel-arrow:hover,.pa-tecpro-components-carousel .pa-carousel-arrow:focus-visible { background:rgba(11,31,143,.08); }
.pa-tecpro-component-card { --head:#e3004f; position:relative; flex:0 0 calc(50% - 16px); min-height:281px; padding:0 0 44px; border-radius:22px; background:#fff; color:#0b1f8f; box-shadow:0 10px 22px rgba(4,32,120,.16); text-align:left; }
.pa-tecpro-component-card--blue { --head:#2585c9; }
.pa-tecpro-component-card--green { --head:#95c13d; }
.pa-tecpro-component-card--purple { --head:#842a83; }
.pa-tecpro-component-card > h3 { margin:0; padding:9px 18px; border-radius:22px 22px 0 0; background:var(--head); color:#fff; font-size:clamp(18px,1.3vw,22px); font-weight:700; text-align:center; }
.pa-tecpro-component-card > div { display:grid; grid-template-columns:1.05fr .95fr; gap:22px; align-items:center; padding:30px 34px 0 36px; }
.pa-tecpro-component-copy { font-size:clamp(14px,.95vw,16px); line-height:1.55; }
.pa-tecpro-component-copy strong { font-weight:700; }
.pa-tecpro-component-copy ul { margin:4px 0 0; padding-left:22px; }
.pa-tecpro-component-card img { display:block; width:100%; height:auto; max-height:150px; object-fit:contain; border-radius:14px; }
.pa-tecpro-component-card > .pa-tecpro-pill-cta { position:absolute; left:50%; bottom:0; translate:-50% 50%; transform:none; min-height:44px; padding:0 26px; font-size:16px; white-space:nowrap; }
.pa-tecpro-component-card > .pa-tecpro-pill-cta:hover,.pa-tecpro-component-card > .pa-tecpro-pill-cta:focus-visible { transform:translateY(-3px); }

/* Tab 3: summary (no tag/seal) tucked behind a white timeline card. */
#tecpro-panel-3 .pa-summary-card { width:min(1095px,63.4vw); margin-bottom:0; padding-bottom:clamp(48px,3.5vw,60px); }
#tecpro-panel-3 .pa-tecpro-timeline { position:relative; z-index:2; width:min(1530px,88.5vw); margin:-26px auto 0; padding:26px 30px 34px; grid-template-columns:3fr 15fr 3fr 6fr 3fr; gap:0; border-radius:22px; }
.pa-tecpro-stage { position:relative; }
.pa-tecpro-stage h3 { font-size:clamp(17px,1.32vw,24px); }
.pa-tecpro-stage small { margin:2px 0 10px; font-size:13px; }
.pa-tecpro-stage-bar { gap:0; padding:0 1px; }
.pa-tecpro-stage-bar i { height:18px; border-radius:999px; margin-left:-6px; box-shadow:-1px 0 0 rgba(255,255,255,.55); }
.pa-tecpro-stage-bar i:first-child { margin-left:0; }
.pa-tecpro-stage::after { content:""; position:absolute; left:50%; top:calc(100% - 100% + var(--bar-y,62px)); width:2px; height:22px; background:var(--c); }
.pa-tecpro-stage p { position:relative; max-width:min(220px,90%); margin-top:24px; border-radius:12px; background:#fff; font-size:clamp(12px,.85vw,15px); text-align:center; }
.pa-tecpro-stage--blue p { max-width:min(260px,90%); }
.pa-tecpro-stage p::before { content:""; position:absolute; left:50%; top:-26px; width:2px; height:24px; background:var(--c); }
.pa-tecpro-stage::after { content:none; }

/* Tab 4: intro card + overlapping categories table + CTA. */
.pa-tecpro-challenge-layout { width:min(1240px,72vw); margin-top:min(70px,4vw); grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); }
.pa-tecpro-challenge-intro { margin:30px -36px 0 0; padding:clamp(36px,2.9vw,50px) clamp(70px,5.5vw,96px) clamp(36px,2.9vw,50px) clamp(48px,3.8vw,66px); border-radius:18px; background-color:#001795; font-size:clamp(14px,1.04vw,18px); }
.pa-tecpro-challenge-table { border:1.5px solid #0b1f8f; border-radius:16px; }
.pa-tecpro-challenge-table th { padding:12px; font-size:clamp(16px,1.2vw,22px); }
.pa-tecpro-challenge-table td { padding:12px; font-size:clamp(13px,.9vw,16px); font-weight:600; }
.pa-tecpro-pill-cta--arrow span { margin-left:10px; font-size:1.2em; }

@media (max-width:820px) {
  .pa-tecpro-components-carousel { grid-template-columns:36px minmax(0,1fr) 36px; gap:6px; }
  .pa-tecpro-component-card { flex-basis:100%; }
  .pa-tecpro-component-card > div { grid-template-columns:1fr; padding:22px 20px 0; }
  #tecpro-panel-3 .pa-summary-card { width:100%; }
  #tecpro-panel-3 .pa-tecpro-timeline { width:100%; grid-template-columns:1fr; }
  .pa-tecpro-stage-bar i { margin-left:-4px; }
  .pa-tecpro-stage p::before { content:none; }
  .pa-tecpro-challenge-layout { width:100%; }
  .pa-tecpro-challenge-intro { margin:0 0 -18px; }
}
.pa-tecpro-page .pa-summary-card > span { transform:none !important; font-weight:700; }
.pa-tecpro-components-carousel .pa-carousel-viewport { background:transparent !important; box-shadow:none !important; }
.pa-tecpro-challenge-intro { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* ===== Digital House hero — Figma 1728 frame (title sizes kept per #41) ===== */
@media (min-width:1181px) {
  .pa-digital-hero { min-height:min(700px,40.5vw); padding-top:0; display:flex; align-items:center; }
  .pa-digital-hero .pa-project-hero-copy { width:auto; max-width:52%; padding-top:min(110px,6.4vw); }
  .pa-digital-hero .pa-digital-logo { width:min(440px,25.5vw); height:auto; }
  .pa-digital-hero h1 { margin-top:min(14px,.8vw); line-height:.98; }
  .pa-digital-hero .pa-project-hero-copy > p:not(.pa-brand-word) { max-width:min(640px,37vw); margin-top:min(26px,1.5vw); font-size:min(18px,1.04vw); line-height:1.4; }
  .pa-digital-hero .pa-monitor { left:59.8%; right:auto; top:min(206px,11.9vw); width:min(539px,31.2vw); height:min(313px,18.1vw); border-width:min(14px,.81vw); border-radius:min(10px,.58vw); }
  .pa-digital-hero .pa-monitor::after { width:44.4%; height:min(95px,5.5vw); top:100%; clip-path:polygon(33% 0,67% 0,67% 62%,100% 62%,100% 100%,0 100%,0 62%,33% 62%); }
  .pa-digital-hero .pa-monitor::before { content:""; position:absolute; left:-8.8%; right:-9%; top:calc(100% + min(97px,5.6vw)); height:2px; background:#0b1f5c; }
}
/* Glossy Figma play button on both video players. */
.pa-play { width:clamp(64px,4.6vw,80px); height:clamp(64px,4.6vw,80px); border:0; border-radius:50%; background:url("../images/global/play-button-glossy.png") center / contain no-repeat; box-shadow:0 0 22px rgba(120,200,255,.55); color:transparent; font-size:0; }
.pa-play > span { display:none; }
.pa-play.is-disabled { opacity:.85; }

/* ===== Digital House — Playground / Alianza (Figma composition) ===== */
.pa-digital-page .pa-digital-platform { position:relative; width:min(1466px,84.8vw); margin:min(90px,5.2vw) auto 0; display:block; min-height:min(460px,26.6vw); }
.pa-digital-page .pa-digital-platform-photo { position:relative; z-index:1; display:block; width:min(522px,30.2vw); height:auto; min-height:0; object-fit:contain; border-radius:0; }
.pa-digital-page .pa-digital-platform article.pa-digital-tag-card { position:absolute; z-index:2; width:min(484px,28vw); min-height:min(243px,14.1vw); padding:min(70px,4.05vw) min(48px,2.8vw) min(46px,2.66vw); border-radius:min(20px,1.16vw); background:#0b2bb0 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); color:#fff; box-shadow:0 14px 26px rgba(0,16,96,.28); text-align:center; }
.pa-digital-page .pa-digital-platform article.pa-digital-tag-card--playground { left:min(442px,25.6vw); top:min(107px,6.2vw); rotate:-3deg; }
.pa-digital-page .pa-digital-platform article.pa-digital-tag-card--schools { left:min(974px,56.4vw); top:min(8px,.5vw); rotate:3.2deg; }
.pa-digital-page .pa-digital-platform article.pa-digital-tag-card > h3 { position:absolute; left:-4px; top:calc(-1 * min(20px,1.16vw)); margin:0; padding:min(12px,.7vw) min(30px,1.75vw) min(12px,.7vw) min(20px,1.16vw); border-radius:min(14px,.8vw) min(14px,.8vw) min(14px,.8vw) 0; background:#fff; color:#0b1f8f; font-size:min(24px,1.39vw); font-weight:700; line-height:1.1; box-shadow:0 6px 12px rgba(0,16,96,.18); }
.pa-digital-page .pa-digital-platform article.pa-digital-tag-card > p { margin:0; font-size:min(18px,1.04vw); line-height:1.38; }
.pa-digital-page .pa-digital-platform article.pa-digital-tag-card > p strong { font-weight:700; }
.pa-digital-tag-seal { position:absolute; right:calc(-1 * min(26px,1.5vw)); bottom:calc(-1 * min(44px,2.55vw)); width:min(78px,4.5vw); height:auto; transition:rotate .5s ease; }
.pa-digital-page .pa-digital-platform article.pa-digital-tag-card:hover .pa-digital-tag-seal { rotate:20deg; }
.pa-digital-page .pa-digital-platform article.pa-digital-tag-card { transition:translate .3s ease,box-shadow .3s ease; }
.pa-digital-page .pa-digital-platform article.pa-digital-tag-card:hover { translate:0 -6px; box-shadow:0 20px 32px rgba(0,16,96,.32); }
@media (max-width:820px) {
  .pa-digital-page .pa-digital-platform { display:grid; gap:44px; width:calc(100% - 32px); min-height:0; }
  .pa-digital-page .pa-digital-platform-photo { width:100%; }
  .pa-digital-page .pa-digital-platform article.pa-digital-tag-card { position:relative; inset:auto; width:auto; padding:56px 24px 40px; rotate:0deg !important; }
  .pa-digital-page .pa-digital-platform article.pa-digital-tag-card > h3 { top:-18px; font-size:19px; padding:10px 22px 10px 16px; }
  .pa-digital-page .pa-digital-platform article.pa-digital-tag-card > p { font-size:15px; }
  .pa-digital-tag-seal { width:64px; right:-8px; bottom:-30px; }
}
.pa-digital-page .pa-digital-platform article.pa-digital-tag-card > h3 { margin:0; }
.pa-digital-page .pa-digital-platform article.pa-digital-tag-card > p { color:#fff; }

/* ===== Digital House — «marco de habilidades del futuro» (Figma) ===== */
.pa-digital-page .pa-digital-future { padding:min(64px,3.7vw) max(6vw,24px) min(60px,3.5vw); background:#07155a; color:#fff; text-align:center; }
.pa-digital-future-title { margin:0 0 min(30px,1.7vw); color:#fff; font-size:clamp(30px,3.24vw,56px); font-weight:700; line-height:1.12; }
.pa-digital-page .pa-digital-future-layout { width:min(1530px,100%); margin:0 auto; display:grid; grid-template-columns:minmax(0,.84fr) minmax(0,1fr); gap:min(70px,4vw); align-items:center; }
.pa-digital-future-pills { margin:0; padding:0; display:grid; gap:min(48px,2.8vw); list-style:none; }
.pa-digital-future-pills li { display:flex; align-items:center; justify-content:center; gap:min(22px,1.3vw); min-height:min(88px,5.1vw); padding:0 min(28px,1.6vw); border:1.5px solid #0b1f8f; border-radius:999px; background:#fff; color:#0b1f8f; font-size:clamp(17px,1.5vw,26px); font-weight:600; transition:translate .25s ease,box-shadow .25s ease; }
.pa-digital-future-pills li:hover { translate:0 -3px; box-shadow:0 10px 22px rgba(0,0,0,.25); }
.pa-digital-future-pills img { width:auto; height:min(46px,2.66vw); }
.pa-digital-page .pa-digital-future-laptop { width:100%; max-height:none; object-fit:contain; }
@media (max-width:820px) {
  .pa-digital-page .pa-digital-future { padding:48px 20px; }
  .pa-digital-page .pa-digital-future-layout { grid-template-columns:1fr; gap:30px; }
  .pa-digital-future-pills { gap:16px; }
  .pa-digital-future-pills li { min-height:56px; font-size:16px; }
  .pa-digital-future-pills img { height:28px; }
}

/* ===== Digital House — Diploma cards (Figma «Número» Default/Press) ===== */
.pa-diploma .pa-carousel-track { gap:min(34px,2vw); padding-top:min(34px,2vw); }
.pa-diploma-card { position:relative; flex:0 0 min(548px,31.7vw); min-height:min(260px,15vw); margin-top:min(26px,1.5vw); padding:min(40px,2.3vw) min(36px,2.1vw) min(34px,2vw); border:2px solid transparent; border-radius:0 min(22px,1.27vw) min(22px,1.27vw) min(22px,1.27vw); background:#3b72ff; color:#fff; text-align:left; transition:background .3s ease,border-color .3s ease,box-shadow .3s ease; outline:none; }
.pa-diploma-card:hover,.pa-diploma-card:focus-visible,.pa-diploma-card[aria-current="true"]:hover { background:#001795; border-color:#fff; box-shadow:0 12px 24px rgba(0,16,96,.3); }
.pa-diploma-tag { position:absolute; left:-2px; bottom:100%; margin:0; padding:min(12px,.7vw) min(64px,3.7vw) min(10px,.6vw) min(24px,1.4vw); border-radius:min(16px,.93vw) min(16px,.93vw) 0 0; background:#fff; color:#0b1f8f; font-size:min(20px,1.16vw); font-weight:700; white-space:nowrap; box-shadow:0 -4px 10px rgba(0,16,96,.06); }
.pa-diploma-seal { position:absolute; left:min(255px,14.8vw); top:calc(-1 * min(68px,3.9vw)); display:grid; place-items:center; width:min(70px,4.05vw); aspect-ratio:224/238; background:url("../images/digital-house/seal-yellow.png") center / contain no-repeat; color:#7a5c00; font-size:min(30px,1.74vw); font-weight:700; transition:rotate .4s ease; }
.pa-diploma-card:hover .pa-diploma-seal { rotate:-12deg; }
.pa-diploma-card h3 { margin:0 0 min(10px,.6vw); color:#fff; font-size:min(38px,2.2vw); font-weight:700; }
.pa-diploma-copy { margin:0; color:#fff; font-size:min(17px,.98vw); line-height:1.4; }
.pa-diploma-copy strong { font-weight:700; }
@media (max-width:820px) {
  .pa-diploma-card { flex-basis:calc(100% - 4px); padding:28px 20px; }
  .pa-diploma-tag { font-size:15px; padding:9px 48px 8px 16px; }
  .pa-diploma-seal { left:auto; right:12px; top:-46px; width:52px; font-size:22px; }
  .pa-diploma-card h3 { font-size:26px; }
  .pa-diploma-copy { font-size:14px; }
}
@media (min-width:821px) {
  .pa-diploma .pa-carousel { display:grid; grid-template-columns:66px min(1130px,66vw) 66px; justify-content:center; align-items:center; gap:min(64px,3.7vw); width:100%; }
  .pa-diploma .pa-carousel-viewport { overflow:hidden; margin:-10px -24px -40px; padding:10px 24px 40px; background:transparent !important; }
  .pa-diploma .pa-carousel-track { gap:34px; }
  .pa-diploma-card { flex:0 0 calc(50% - 17px); }
}

/* ===== Spark — hero (Figma 1728×800 frame) ===== */
.pa-spark-hero { background-color:#a8feaf !important; background-image:url("../images/spark/pattern-figma.png") !important; background-size:max(100%,1728px) auto !important; background-position:center top !important; background-repeat:repeat !important; }
@media (min-width:1101px) {
  .pa-spark-hero { position:relative; min-height:min(800px,46.3vw); padding:0; display:block; }
  .pa-spark-heading { position:absolute; left:50%; top:min(222px,12.85vw); width:min(1000px,58vw); max-width:none; padding:0; translate:-50% 0; text-align:center; }
  .pa-spark-heading > img { display:block; width:min(293px,17vw); height:auto; margin:0 auto min(26px,1.5vw); }
  .pa-spark-heading h1 { margin:0; line-height:1; }
  .pa-spark-heading h1 span { font-size:min(52px,3.01vw); }
  .pa-spark-heading h1 strong { max-width:none; font-size:min(100px,5.79vw); line-height:1; letter-spacing:-.01em; }
  .pa-spark-heading > p { max-width:min(816px,47.2vw); margin:min(40px,2.3vw) auto 0; font-size:min(18px,1.04vw); line-height:1.5; }
  .pa-spark-globe { position:absolute; left:min(296px,17.13vw); top:min(289px,16.7vw); right:auto; width:min(212px,12.27vw); height:auto; }
  .pa-spark-network { position:absolute; left:min(1214px,70.25vw); top:min(402px,23.26vw); right:auto; width:min(95px,5.5vw); height:auto; }
}

/* ===== Spark — content: panel + cards + laptop overhanging the panel ===== */
@media (min-width:1101px) {
  .pa-spark-page .pa-spark-content { position:relative; width:min(1398px,80.9vw); min-height:min(649px,37.56vw); margin:min(70px,4vw) 0 min(110px,6.4vw) max(5.5vw,calc((100vw - 1549px) / 2)); padding:min(66px,3.82vw) 0 min(60px,3.5vw) min(66px,3.82vw); display:block; border-radius:min(22px,1.27vw); background:#a8feaf; box-shadow:0 12px 28px rgba(0,60,30,.22); }
  .pa-spark-page .pa-spark-features { width:min(728px,42.1vw); padding:0; gap:min(36px,2.1vw); }
  .pa-spark-page .pa-spark-feature { min-height:0; padding:min(34px,1.97vw) min(36px,2.1vw) min(22px,1.27vw) min(46px,2.66vw); border-radius:min(16px,.93vw); box-shadow:8px 10px 14px rgba(0,34,82,.25); }
  .pa-spark-page .pa-spark-feature h2 { top:calc(-1 * min(20px,1.16vw)); min-width:0; padding:min(9px,.52vw) min(34px,1.97vw) min(9px,.52vw) min(26px,1.5vw); font-size:min(19px,1.1vw); }
  .pa-spark-page .pa-spark-feature p { margin:0; font-size:min(17px,.98vw); line-height:1.45; }
  .pa-spark-page .pa-laptop-video { position:absolute; left:min(892px,51.6vw); top:min(122px,7.06vw); width:min(656px,37.96vw); min-height:0; overflow:visible; display:block; }
  .pa-spark-page .pa-laptop-video > .pa-laptop-frame { display:block; width:100%; height:auto; transform:none; clip-path:none; }
  .pa-spark-atom { position:absolute; z-index:3; left:89%; top:-11%; width:min(96px,5.56vw); height:auto; pointer-events:none; animation:pa-generation-icon-swing 5s ease-in-out infinite; }
  .pa-spark-page .pa-spark-video-hit { left:42.4%; top:30.6%; width:15.2%; }
}
@media (max-width:1100px) {
  .pa-spark-atom { position:absolute; right:-6px; top:-14px; width:64px; z-index:3; }
  .pa-spark-page .pa-laptop-video > .pa-laptop-frame { transform:none; clip-path:none; }
}
html.reduced-motion .pa-spark-atom { animation:none; }
.pa-spark-page { background:#fff; }

/* ===== Garden — «Facilidad de implementación» (Figma export proportions,
   container units so the composition never clips) ===== */
.pa-garden-page section.pa-garden-implementation { container-type:inline-size; position:relative; display:block !important; width:min(1558px,calc(100% - 64px)); min-height:0; margin:min(80px,4.6vw) auto min(40px,2.3vw); padding:0 0 0; background:none; overflow:visible; }
.pa-garden-page section.pa-garden-implementation::before { content:""; position:absolute; z-index:0; left:0; top:0; width:88.5cqw; height:40.2cqw; border-radius:2.2cqw; background:#00938e; }
.pa-garden-page section.pa-garden-implementation > h2 { position:relative; z-index:1; margin:0; padding:5cqw 0 0 6.5cqw; color:#fff; font-size:4.6cqw; font-weight:700; line-height:1; letter-spacing:-.01em; text-align:left; }
.pa-garden-page section.pa-garden-implementation > ul { position:relative; z-index:1; width:68cqw; margin:3.6cqw 0 0 6.4cqw; padding:0; display:grid; grid-template-columns:repeat(2,25.1cqw); gap:1.3cqw 3.7cqw; list-style:none; }
.pa-garden-page section.pa-garden-implementation li { display:flex; align-items:center; gap:1.4cqw; min-height:4.15cqw; padding:.55cqw 1.4cqw .55cqw .6cqw; border-radius:1.25cqw; background:#fff; color:#0b2b9e; font-size:clamp(11px,1.12cqw,18px); line-height:1.2; font-weight:400; }
.pa-garden-page section.pa-garden-implementation li img { width:2.95cqw; height:2.95cqw; flex:none; }
.pa-garden-page section.pa-garden-implementation li:nth-child(1) { grid-column:1; grid-row:1; }
.pa-garden-page section.pa-garden-implementation li:nth-child(2) { grid-column:2; grid-row:1; }
.pa-garden-page section.pa-garden-implementation li:nth-child(3) { grid-column:1; grid-row:2; }
.pa-garden-page section.pa-garden-implementation li:nth-child(4) { grid-column:2; grid-row:2; }
.pa-garden-page section.pa-garden-implementation li:nth-child(5) { grid-column:1; grid-row:3; }
.pa-garden-implementation-visual { position:absolute; z-index:2; left:66.5cqw; top:1.6cqw; width:33.2cqw; }
.pa-garden-page .pa-garden-implementation-visual .pa-garden-implementation-photo { position:static; display:block; width:100%; height:auto; max-height:none; margin:0; transform:none; }
.pa-garden-implementation-icon { position:absolute; width:6cqw; height:auto; animation:pa-generation-icon-swing 5s ease-in-out infinite; }
.pa-garden-implementation-icon--laptop { left:-1.2cqw; top:13%; }
.pa-garden-implementation-icon--puzzle { left:41%; bottom:-2%; animation-delay:-2.3s; }
.pa-garden-page section.pa-garden-implementation > .pa-garden-maria { position:relative; z-index:1; display:flex; align-items:center; gap:2.3cqw; width:61.3cqw; margin:4.1cqw 0 0; padding:1.6cqw 2.5cqw 1.6cqw .8cqw; border-radius:0 1.6cqw 1.6cqw 0; background:#fff; color:#0b2b9e; font-size:clamp(12px,1.25cqw,20px); line-height:1.4; }
.pa-garden-maria-logo { width:15.2cqw; height:auto; flex:none; object-fit:contain; }
.pa-garden-page section.pa-garden-implementation { padding-bottom:2.6cqw; }
html.reduced-motion .pa-garden-implementation-icon { animation:none; }
@media (max-width:820px) {
  .pa-garden-page section.pa-garden-implementation { width:calc(100% - 24px); padding-bottom:20px; }
  .pa-garden-page section.pa-garden-implementation::before { width:100%; height:100%; border-radius:22px; }
  .pa-garden-page section.pa-garden-implementation > h2 { padding:28px 20px 0; font-size:30px; }
  .pa-garden-page section.pa-garden-implementation > ul { width:auto; margin:18px 14px 0; grid-template-columns:1fr; gap:10px; }
  .pa-garden-page section.pa-garden-implementation li { grid-column:1 !important; grid-row:auto !important; gap:12px; min-height:54px; padding:8px 14px 8px 8px; border-radius:12px; font-size:14px; }
  .pa-garden-page section.pa-garden-implementation li img { width:38px; height:38px; }
  .pa-garden-implementation-visual { position:relative; left:auto; top:auto; width:78%; margin:26px auto 0; }
  .pa-garden-implementation-icon { width:20%; }
  .pa-garden-page section.pa-garden-implementation > .pa-garden-maria { width:auto; margin:22px 12px 0; padding:14px 16px; border-radius:14px; flex-direction:column; align-items:flex-start; gap:8px; font-size:14px; }
  .pa-garden-maria-logo { width:120px; }
}
.pa-garden-page section.pa-garden-implementation img.pa-garden-implementation-icon { position:absolute; width:6cqw; height:auto; max-height:none; margin:0; object-fit:contain; }
.pa-garden-page section.pa-garden-implementation img.pa-garden-implementation-icon--laptop { left:-1.2cqw; top:13%; }
.pa-garden-page section.pa-garden-implementation img.pa-garden-implementation-icon--puzzle { left:41%; top:auto; bottom:-2%; }
.pa-garden-page section.pa-garden-implementation img.pa-garden-maria-logo { position:static; width:15.2cqw; height:auto; max-height:none; margin:0; flex:none; object-fit:contain; }
.pa-garden-page section.pa-garden-implementation > .pa-garden-maria > span { flex:1; }
@media (max-width:820px) {
  .pa-garden-page section.pa-garden-implementation img.pa-garden-implementation-icon { width:20%; }
  .pa-garden-page section.pa-garden-implementation img.pa-garden-maria-logo { width:120px; }
}
@media (min-width:821px) {
  .pa-garden-page section.pa-garden-implementation::before { height:auto; bottom:0; }
  .pa-garden-page section.pa-garden-implementation { padding-bottom:3.4cqw; }
  .pa-garden-page section.pa-garden-implementation > h2 { font-size:4.15cqw; }
}

/* ===== Garden — problems carousel, arrows and virtuous cycle (Figma) ===== */
.pa-garden-page .pa-carousel-arrow { width:min(62px,3.6vw); min-width:44px; height:auto; aspect-ratio:1; border:0; background:url("../images/garden/arrow-next.png") center / contain no-repeat; box-shadow:0 6px 14px rgba(0,60,70,.18); color:transparent; font-size:0; }
.pa-garden-page .pa-carousel-arrow[data-prev] { background-image:url("../images/garden/arrow-prev.png"); }
.pa-garden-page .pa-carousel-arrow:hover,.pa-garden-page .pa-carousel-arrow:focus-visible { background-color:transparent; }
@media (min-width:1101px) {
  .pa-garden-problems { padding-top:min(60px,3.5vw); padding-bottom:0; }
  .pa-garden-problems h2 { padding:min(12px,.7vw) min(68px,3.94vw); font-size:min(20px,1.16vw); box-shadow:0 8px 16px rgba(0,16,96,.22); }
  .pa-garden-problems .pa-carousel { display:grid; grid-template-columns:min(62px,3.6vw) min(1135px,65.7vw) min(62px,3.6vw); justify-content:center; align-items:center; gap:min(56px,3.24vw); margin-top:min(44px,2.55vw); }
  .pa-garden-problems .pa-carousel-track { gap:min(32px,1.85vw); }
  .pa-garden-page .pa-garden-problems .pa-carousel-track > * { flex:0 0 calc((100% - 2 * min(32px,1.85vw)) / 3); max-height:none; }
  .pa-garden-page .pa-garden-cycle { min-height:0; padding:min(110px,6.4vw) 0 0; background:linear-gradient(#fff 0 calc(min(110px,6.4vw) + min(68px,3.94vw)),#bfe6e3 0); }
  .pa-garden-page .pa-garden-cycle-band { width:min(1527px,88.4vw); min-height:min(136px,7.87vw); margin:0 auto; padding:0 min(300px,17.4vw) 0 min(60px,3.5vw); }
  .pa-garden-page .pa-garden-cycle-band img { right:min(120px,6.94vw); top:calc(-1 * min(49px,2.84vw)); width:min(295px,17.07vw); height:auto; transform:none; }
  .pa-garden-page .pa-garden-system { margin-top:min(32px,1.85vw); }
  .pa-garden-page .pa-garden-cycle { position:relative; z-index:3; }
}
@media (min-width:1101px) { .pa-garden-problems h2 { margin-bottom:0; } }

/* Digital House: Figma arrow icons on both carousels. */
.pa-digital-page .pa-carousel-arrow { width:min(62px,3.6vw); min-width:44px; height:auto; aspect-ratio:1; border:0; background:url("../images/digital-house/arrow-next.png") center / contain no-repeat; box-shadow:0 6px 14px rgba(120,80,0,.16); color:transparent; font-size:0; }
.pa-digital-page .pa-carousel-arrow[data-prev] { background-image:url("../images/digital-house/arrow-prev.png"); }
.pa-digital-page .pa-carousel-arrow:hover,.pa-digital-page .pa-carousel-arrow:focus-visible { background-color:transparent; }

/* Garden hero: tighter vertical rhythm, closer to the Figma frame. */
@media (min-width:1101px) {
  .pa-garden-page .pa-garden-hero { min-height:0; padding-top:max(150px,9vw); padding-bottom:min(70px,4vw); }
}
@media (min-width:1101px) {
  /* Figma frame proportions: hero ≈46% of the width, puzzle 33% wide. */
  .pa-garden-page .pa-garden-hero { min-height:min(46vw,860px); padding-top:min(15vw,270px); padding-bottom:min(50px,3vw); }
  .pa-garden-page .pa-garden-hero .pa-project-hero-copy > img { width:min(310px,18vw); height:auto; }
  .pa-garden-page .pa-garden-puzzle { top:min(11vw,200px); right:8vw; width:min(33vw,620px); height:auto; }
}
@media (min-width:1101px) {
  .pa-garden-page .pa-garden-hero { min-height:min(41.5vw,800px); padding-top:min(13vw,240px); }
}

/* Projects submenu (Figma): one dark panel that wraps the «✦ Proyectos»
   trigger as its header, with the four project pills below. The panel
   starts above the trigger, so moving the pointer down never leaves it. */
@media (min-width:981px) {
  .pa-nav-projects { position:relative; }
  .pa-nav-projects > .pa-nav-link { position:relative; z-index:5011; }
  .pa-nav-projects:hover > .pa-nav-link,
  .pa-nav-projects:focus-within > .pa-nav-link,
  .pa-nav-projects.is-open > .pa-nav-link { background:transparent !important; border-color:transparent !important; box-shadow:none !important; color:#fff !important; }
  .pa-nav-projects:hover > .pa-nav-link::before,
  .pa-nav-projects:focus-within > .pa-nav-link::before,
  .pa-nav-projects.is-open > .pa-nav-link::before { color:#8b57ff; }
  .pa-nav .pa-projects-dropdown {
    top:-12px; left:50%;
    width:max(100% + 24px,214px);
    padding:82px 20px 20px;
    border:1px solid rgba(91,133,255,.28);
    border-radius:22px;
    background:#00113f;
    box-shadow:0 18px 32px rgba(0,10,61,.35);
    display:grid; gap:10px;
    transform:translate(-50%,-4px);
  }
  .pa-nav-projects:hover .pa-projects-dropdown,
  .pa-nav-projects:focus-within .pa-projects-dropdown,
  .pa-nav-projects.is-open .pa-projects-dropdown { transform:translate(-50%,0); }
  .pa-nav .pa-projects-dropdown a { min-height:46px; margin:0; padding:0 18px; border:1px solid rgba(133,164,255,.3); background:rgba(53,79,150,.38); font-size:13px; font-weight:600; }
  .pa-nav .pa-projects-dropdown a:hover,
  .pa-nav .pa-projects-dropdown a:focus-visible { background:#14327f; border-color:#8aaeff; }
  .pa-nav .pa-projects-dropdown a:hover i,
  .pa-nav .pa-projects-dropdown a:focus-visible i,
  .pa-nav .pa-projects-dropdown a[aria-current="page"] i { color:#9a6cff; }
}

/* ===== Mobile: Digital House carousels ===== */
@media (max-width:820px) {
  .pa-skill-card { flex:0 0 210px !important; width:210px; height:233px; }
  /* Skills: a fixed offset (third card centred) instead of justify-content:center,
     so the loop clone appended on "next" no longer re-centres the row mid-slide. */
  .pa-card-carousel .pa-carousel-track { justify-content:flex-start; margin-left:calc(50% - 105px - 2 * (210px + 12px)); gap:12px; }
  .pa-card-carousel .pa-carousel-track > * { animation:none !important; }
}
@media (max-width:820px) {
  /* Diploma: room above the card for the certificate tab and the seal. */
  .pa-diploma .pa-carousel-viewport { margin-block:-6px -28px; padding-block:6px 28px; }
  .pa-diploma .pa-carousel-track { padding-top:50px; }
  .pa-diploma-card { margin-top:0; }
}

/* ===== Mobile: TecPro Challenge (Figma mobile — wide surface + table below) ===== */
@media (max-width:820px) {
  .pa-tecpro-challenge-layout { grid-template-columns:1fr; gap:0; width:100%; }
  .pa-tecpro-challenge-intro { position:relative; z-index:0; margin:0 0 -22px; padding:24px 22px 42px; border-radius:16px; text-align:left; font-size:15px; line-height:1.45; background:#001795 url("../images/tecpro/challenge-surface-mobile.jpg") center / cover no-repeat; }
  .pa-tecpro-challenge-table { position:relative; z-index:1; width:calc(100% - 20px); justify-self:center; border-radius:16px; }
  .pa-tecpro-challenge-table th { padding:12px 8px; font-size:20px; }
  .pa-tecpro-challenge-table td { padding:11px 8px; font-size:15px; font-weight:600; }
  .pa-tecpro-challenge-layout > .pa-tecpro-pill-cta { margin-top:28px; }
}

/* ===== Garden viewer built from parts (header, screen, close) so each is
   editable in «Carruseles y tarjetas». Positions/sizes measured on the former
   Figma composite and expressed in dialog-width units, so the result matches. */
.pa-garden-viewer-dialog { container-type:inline-size; }
.pa-garden-viewer-dialog > img.pa-garden-viewer-head[data-garden-viewer-head] { position:absolute; left:3.05cqw; top:2.9cqw; width:auto; height:auto; max-width:70cqw; max-height:10.9cqw; margin:0; transform:none; }
.pa-garden-viewer-dialog > img.pa-garden-viewer-screen[data-garden-viewer-image] { position:absolute; left:11.69cqw; top:15.97cqw; width:77.34cqw; height:53.69cqw; max-width:none; max-height:none; margin:0; border-radius:0; object-fit:contain; transform:none; }
.pa-garden-viewer-close { right:2.94cqw; top:2.94cqw; width:3.84cqw; min-width:0; }
.pa-garden-viewer-close img { opacity:1; }
.pa-garden-viewer-close::before { inset:-12px; }

/* ===== Home video: inline playback in the preview (no modal). ===== */
.home-video-frame.is-inline-playing .home-video-preview { opacity:1; filter:none; }
.home-video-frame.is-inline-playing .home-video-placeholder { opacity:0; }
.home-video-inline-embed { position:absolute; z-index:4; inset:18px; width:calc(100% - 36px); height:calc(100% - 36px); border:0; border-radius:34px; background:#061f69; }
@media (max-width:640px) {
  .home-video-inline-embed { inset:8px; width:calc(100% - 16px); height:calc(100% - 16px); border-radius:17px; }
}

/* Garden Intervención: optional admin icon inside the orange square. */
.pa-garden-skill-icon.has-image img { display:block; width:64%; height:64%; object-fit:contain; }

/* Home video poster (admin image or YouTube thumbnail) before inline play:
   same dimmed look as the MP4 frame preview. */
.home-video-frame:not(.is-inline-playing) .home-video-placeholder[style*="background-image"] { filter:saturate(.92) brightness(.82); }