/* Marcas y clientes, Contactos y Asistencia: composición basada en los PSD 7–9. */
#clientes, #contactos, #asistencia{background:#000}
#clientes::before, #contactos::before, #asistencia::before{display:none}

/* Marcas y clientes */
#clientes{padding:58px max(5%,calc((100% - 1280px)/2)) 90px}
#clientes .intro{max-width:1150px;margin:0 auto 45px}
#clientes .intro h1{font-family:Quedora,sans-serif;font-size:clamp(32px,3.1vw,53px);font-weight:600;letter-spacing:.14em;line-height:1.1;margin:0 0 9px;background:radial-gradient(ellipse at 50% 85%,#006ce69c,transparent 55%);white-space:nowrap}
#clientes .brand-subtitle{font-family:Quedora,sans-serif;font-size:clamp(16px,1.7vw,29px);font-weight:500;letter-spacing:.14em;line-height:1.2;margin:0 0 25px;white-space:nowrap}
#clientes .intro p{font-family:Quedora,sans-serif;font-size:clamp(14px,1.15vw,18px);line-height:1.35;color:#e9edf5;max-width:660px;margin:0 auto}
#clientes .brand-ribbons{max-width:1260px;margin:0 auto 45px;overflow:hidden}
#clientes .brand-ribbon{display:flex;align-items:center;justify-content:space-around;gap:28px}
#clientes .brand-ribbon img{display:block;object-fit:contain;flex:0 0 auto;max-width:100%;filter:grayscale(1);transition:filter .2s,transform .2s}
#clientes .brand-ribbon img:hover{filter:none;transform:translateY(-3px)}
#clientes .brand-ribbon-top img{width:22%;aspect-ratio:284/190}
#clientes .brand-ribbon-bottom{margin-top:-12px}
#clientes .brand-ribbon-bottom img{width:18%;aspect-ratio:1.48;object-fit:contain}
#clientes .brand-ribbons + .client-section-heading, #clientes .model2-clients{display:none}
#clientes .client-section-heading{max-width:1260px;margin:0 auto 25px;padding-top:20px;border-top:1px solid #263039}
#clientes .client-section-heading .eyebrow, #clientes .ref-featured-head .eyebrow{font-family:Quedora,sans-serif;font-size:11px;letter-spacing:.12em;color:#aeb9c5;margin:0}
#clientes .client-section-heading h2, #clientes .ref-featured-head h2{font-family:Quedora,sans-serif;font-size:clamp(24px,2vw,33px);font-weight:500;line-height:1.2;margin:5px 0 0}
#clientes .ref-stories{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;overflow:visible;max-width:1260px;margin:0 auto 24px}
#clientes .ref-story{min-width:0;flex:auto;padding:5px 5px 11px;border:0;border-radius:11px;background:#101919;color:#e8eef5;cursor:pointer}
#clientes .ref-story img{border-radius:7px 7px 3px 3px;width:100%;aspect-ratio:.77;object-fit:cover}
#clientes .ref-story strong{font-family:Quedora,sans-serif;font-size:14px;line-height:1.15;margin:5px 0 2px;padding:0 4px}
#clientes .ref-story span{font-family:Quedora,sans-serif;font-size:10px;line-height:1.25;padding:0 4px;color:#9eafbd}
#clientes .model2-video-library{max-width:1260px;margin:0 auto 38px;padding:0;border:0;background:transparent}
#clientes .model2-video-library>summary{display:inline-block;list-style:none;padding:8px 17px;border-radius:5px;background:#066ccf;color:#fff;font-family:Quedora,sans-serif;font-size:12px;font-weight:600;letter-spacing:.02em}
#clientes .model2-video-library>summary::-webkit-details-marker{display:none}
#clientes .model2-video-library>summary::after{content:' ↗';font-size:18px;vertical-align:-1px}
#clientes .model2-video-library[open]>summary{margin-bottom:28px}
#clientes .ref-featured{max-width:1260px;margin:30px auto 0;padding-top:24px;border-color:#263039}
#clientes .ref-featured-head{display:flex;align-items:end;justify-content:space-between;margin-bottom:26px}
#clientes .ref-featured-head>div:last-child{display:flex;align-items:center;gap:13px}
#clientes #featured-counter{font-family:Quedora,sans-serif;font-size:14px;letter-spacing:.12em;color:#148bef;margin-right:22px}
#clientes .ref-featured-head button{display:grid;place-items:center;width:39px;height:39px;margin:0;border:1px solid #284766;color:#168ff9;font-size:25px;cursor:pointer}
#clientes .ref-featured-card{display:grid;grid-template-columns:40% 1fr;grid-template-rows:400px;gap:0;padding:0;height:400px;min-height:0;border:0;background:none;clip-path:none}
#clientes .ref-featured-card>img{display:block;width:100%;height:400px;min-width:0;min-height:0;max-height:400px;object-fit:cover;object-position:center;clip-path:polygon(24% 0,82% 0,100% 23%,100% 77%,82% 100%,24% 100%,0 77%,0 23%)}
#clientes .ref-featured-card>div{margin-left:-25px;padding:48px 55px 34px 90px;border:1px solid #006fba;clip-path:polygon(0 0,93% 0,100% 11%,100% 89%,93% 100%,0 100%,11% 77%,11% 23%);background:radial-gradient(ellipse at 42% 110%,#006ad080,transparent 60%),#020814}
#clientes .ref-featured-card .eyebrow{font-size:11px;color:#edf4ff}
#clientes .ref-featured-card blockquote{max-width:620px;margin:14px 0 22px;font-family:Quedora,sans-serif;font-size:clamp(18px,1.8vw,27px);font-style:italic;line-height:1.4}
#clientes .ref-featured-card h3{font-family:Quedora,sans-serif;color:#f01760;font-size:21px;letter-spacing:.04em}
#clientes .ref-featured-card #featured-role{margin:0 0 20px;color:#9fb4c8}
#clientes .featured-seal{padding-top:16px;border-top:1px solid #087bcf;color:#86a9c9;font-size:10px;letter-spacing:2px}

/* Contactos */
#contactos{padding:55px max(5%,calc((100% - 1280px)/2)) 85px;min-height:860px}
#contactos .contact-heading{text-align:center;margin:0 auto 54px;background:radial-gradient(ellipse at 50% 42%,#006ee575,transparent 34%)}
#contactos .contact-heading h1{font-family:Quedora,sans-serif;font-weight:600;font-size:clamp(33px,3.25vw,55px);letter-spacing:.14em;line-height:1.1;white-space:nowrap;margin:0}
#contactos .contact-heading p{font-family:Quedora,sans-serif;font-size:clamp(20px,2vw,33px);letter-spacing:.14em;margin:5px 0 0}
#contactos .contact-grid{max-width:1190px;display:grid;grid-template-columns:42% 1fr;gap:70px;align-items:center}
#contactos .contact-details{padding:0 0 50px 10px;display:flex;flex-direction:column;align-items:flex-start}
#contactos .contact-details .eyebrow{font-family:Quedora,sans-serif;font-size:11px;letter-spacing:.22em;color:#93a6b8;margin:0 0 15px}
#contactos .contact-details h2{font-family:Quedora,sans-serif;font-size:clamp(24px,2vw,31px);font-weight:500;margin:0 0 8px}
#contactos .contact-details p:not(.eyebrow){font-family:Quedora,sans-serif;color:#a9bdcf;font-size:14px;line-height:1.25;margin:0 0 32px}
#contactos .contact-details .contact-phone{font-family:Quedora,sans-serif;font-size:clamp(28px,2.5vw,38px);line-height:1.1;margin:-10px 0 34px}
#contactos .contact-details>a:last-child{font-family:Quedora,sans-serif;font-size:15px;margin-top:-10px}
#contactos #quote-form{padding:25px 36px 28px;border:0;border-radius:25px;background:radial-gradient(ellipse at 12% 45%,#102136aa,transparent 70%),linear-gradient(135deg,#071522,#030609 85%);box-shadow:none}
#contactos #quote-form .form-intro{font-family:Quedora,sans-serif;font-size:13px;color:#a5aab5;margin:0 0 18px;line-height:1.4}
#contactos #quote-form .form-intro strong{color:#e9edf4}
#contactos #quote-form input, #contactos #quote-form select, #contactos #quote-form textarea{width:100%;min-height:42px;margin:0 0 13px;padding:9px 20px;border:1px solid #253342;border-radius:5px;background:#070d17;color:#e4e8ee;font-family:Quedora,sans-serif;font-size:14px}
#contactos #quote-form input::placeholder{color:#6f7784}
#contactos #quote-form select{cursor:pointer}
#contactos #quote-form select:invalid{color:#b5bbc6}
#contactos #quote-form textarea{height:77px;margin:0;resize:vertical}
#contactos #quote-form input:focus, #contactos #quote-form select:focus, #contactos #quote-form textarea:focus{border-color:#0794eb;box-shadow:0 0 0 1px #0794eb}
#contactos .quote-details-label{display:block;font-family:Quedora,sans-serif;font-size:13px;color:#e0e5ec;margin:-2px 0 5px}
#contactos .quote-details-label span{color:#aeb6c3}
#contactos .contact-actions{display:flex;gap:14px;justify-content:center;margin-top:20px}
#contactos .contact-actions button{border:1px solid #343941;border-radius:24px;background:linear-gradient(#17191b,#080909);color:#fff;font-family:Quedora,sans-serif;font-size:13px;font-weight:600;white-space:nowrap;padding:7px 15px;cursor:pointer}
#contactos .contact-actions button:hover, #contactos .contact-actions button:focus-visible{border-color:#148beb;box-shadow:0 0 13px #006de355}
#contactos #quote-form .form-note{text-align:center;max-width:420px;margin:23px auto 0;font-family:Quedora,sans-serif;font-size:10px;line-height:1.5;color:#7b8592}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Asistencia */
#asistencia{padding:58px max(5%,calc((100% - 1280px)/2)) 75px;min-height:0}
#asistencia .assistance-hero{text-align:center;padding:0 0 55px}
#asistencia .assistance-hero h1{font-family:Quedora,sans-serif;font-weight:600;font-size:clamp(28px,2.65vw,46px);line-height:1.2;letter-spacing:.13em;margin:0 auto 24px;background:radial-gradient(ellipse at 50% 80%,#0079f292,transparent 50%)}
#asistencia .assistance-hero h2{width:max-content;max-width:100%;margin:0 auto 10px;padding:5px 30px;border:1px solid #26323d;border-radius:25px;background:linear-gradient(110deg,#122536,#030607);font-family:Quedora,sans-serif;font-size:15px;font-weight:500;color:#a6b7c9}
#asistencia .assistance-hero>p{font-family:Quedora,sans-serif;font-size:13px;line-height:1.18;color:#8e929b;margin:0 auto 28px}
#asistencia .assistance-choices{display:flex;align-items:stretch;justify-content:center;gap:0}
#asistencia .assistance-choice{min-width:155px;display:flex;flex-direction:column;align-items:center;gap:10px;padding:0 25px;border:0;background:transparent;color:#fff;font-family:Quedora,sans-serif;font-size:12px;font-weight:600;letter-spacing:.12em;text-decoration:none;cursor:pointer}
#asistencia .assistance-choice:first-child{border-right:1px solid #43494e}
#asistencia .assistance-choice .hex-icon{width:60px;height:70px;background:linear-gradient(160deg,#262626,#070707);color:#eee}
#asistencia .assistance-choice svg{width:35px;height:35px}
#asistencia .assistance-choice:hover .hex-icon, #asistencia .assistance-choice:focus-visible .hex-icon{filter:drop-shadow(0 0 10px #1678dc)}
#asistencia .assistance-faq{max-width:1170px;margin:0 auto;border-top:1px solid #454545;padding:16px 22px 0}
#asistencia .assistance-faq>h2{font-family:Quedora,sans-serif;font-size:21px;letter-spacing:.08em;color:#c7c0c0;margin:0 0 26px}
#asistencia .assistance-faq details{padding:23px 0;border-bottom:1px solid #454545}
#asistencia .assistance-faq summary{font-family:Quedora,sans-serif;font-size:clamp(15px,1.3vw,19px);font-weight:600;color:#f3f4f6;line-height:1.35;list-style:none}
#asistencia .assistance-faq summary::-webkit-details-marker{display:none}
#asistencia .assistance-faq summary::before{content:'▶';display:inline-block;font-size:15px;margin-right:10px;transition:transform .2s}
#asistencia .assistance-faq details[open] summary::before{transform:rotate(90deg)}
#asistencia .assistance-faq details p{font-family:Quedora,sans-serif;font-size:clamp(14px,1.15vw,17px);line-height:1.25;color:#858d9c;max-width:1010px;margin:15px 0 4px}

/* Body copy in the references uses the softer text face; Quedora is reserved for display headings. */
body:has(#clientes:not([hidden]),#contactos:not([hidden]),#asistencia:not([hidden])) header nav a,
body:has(#clientes:not([hidden]),#contactos:not([hidden]),#asistencia:not([hidden])) header nav button,
#clientes .intro p,#clientes .client-section-heading h2,#clientes .ref-featured-head h2,
#clientes .ref-story strong,#clientes .ref-story span,#clientes .ref-featured-card blockquote,
#clientes .ref-featured-card h3,#clientes .ref-featured-card #featured-role,
#contactos .contact-details h2,#contactos .contact-details p:not(.eyebrow),#contactos .contact-details a,
#contactos #quote-form .form-intro,#contactos #quote-form input,#contactos #quote-form select,
#contactos #quote-form textarea,#contactos .quote-details-label,#contactos .contact-actions button,
#contactos #quote-form .form-note,#asistencia .assistance-hero h2,#asistencia .assistance-hero>p,
#asistencia .assistance-choice,#asistencia .assistance-faq>h2,
#asistencia .assistance-faq summary,#asistencia .assistance-faq details p{font-family:Poppins,Arial,sans-serif}
#contactos .contact-details .contact-phone,#contactos .contact-details>a:last-child{font-family:Poppins,Arial,sans-serif}

@media(max-width:850px){
  #clientes .intro h1,#clientes .brand-subtitle,#contactos .contact-heading h1{white-space:normal}
  #clientes .brand-ribbon{gap:8px}
  #clientes .ref-stories{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:10px}
  #clientes .ref-story{flex:0 0 185px;scroll-snap-align:start}
  #clientes .ref-featured-card{grid-template-columns:1fr;grid-template-rows:320px auto;height:auto}
  #clientes .ref-featured-card>img{width:min(100%,450px);height:320px;max-height:320px;min-height:0;margin:auto}
  #clientes .ref-featured-card>div{margin:-15px 0 0;padding:45px 35px;clip-path:none;border-radius:14px}
  #contactos .contact-grid{gap:30px}
  #contactos #quote-form{padding:25px}
}
@media(max-width:650px){
  #clientes,#contactos,#asistencia{padding-left:5%;padding-right:5%}
  #clientes{padding-top:38px}
  #clientes .intro{margin-bottom:28px}
  #clientes .intro h1{font-size:30px;letter-spacing:.08em}
  #clientes .brand-subtitle{font-size:16px;letter-spacing:.06em;white-space:normal}
  #clientes .intro p{font-size:13px}
  #clientes .brand-ribbon{width:max-content;justify-content:flex-start}
  #clientes .brand-ribbon img{width:140px}
  #clientes .brand-ribbons{overflow-x:auto}
  #clientes .brand-ribbon-bottom{margin-top:0}
  #clientes .ref-featured-head{align-items:flex-start;gap:15px;flex-direction:column}
  #clientes .ref-featured-card>div{padding:32px 25px}
  #contactos{padding-top:40px;min-height:0}
  #contactos .contact-heading{margin-bottom:40px}
  #contactos .contact-heading h1{font-size:31px}
  #contactos .contact-heading p{font-size:18px}
  #contactos .contact-grid{grid-template-columns:1fr}
  #contactos .contact-details{padding:0}
  #contactos #quote-form{padding:24px 18px}
  #contactos .contact-actions{flex-wrap:wrap}
  #asistencia{padding-top:38px}
  #asistencia .assistance-hero h1{font-size:25px;letter-spacing:.07em}
  #asistencia .assistance-hero h2{font-size:12px;padding:6px 12px}
  #asistencia .assistance-hero>p{font-size:12px}
  #asistencia .desktop-break{display:none}
  #asistencia .assistance-choice{min-width:0;padding:0 18px;font-size:10px}
  #asistencia .assistance-faq{padding:18px 0 0}
  #asistencia .assistance-faq>h2{font-size:18px}
}