/* ============================================================================ EXPANDIA.TECH — HOJA DE ESTILOS ÚNICA (styles.css) ---------------------------------------------------------------------------- Este archivo controla el diseño de TODO el sitio (ES, EN y ZH). Editas aquí una vez → cambia en las 21 páginas. CÓMO EDITAR LO MÁS HABITUAL · Colores → sección 01 (variables --red, --ink, --paper…) · Tipografías → sección 01 (variables --fd, --fb, --fm) * Recuerda cargar la fuente nueva en el de las páginas (enlace de Google Fonts) si cambias de familia. · Tamaños de título → sección 04 (.h2) y 08 (.hero h1) · Botones → sección 05 · Espaciados → --pad (lateral) en sección 01 y .block en sección 10 ÍNDICE 01 TOKENS DE DISEÑO (colores, fuentes, bordes) ← EDITA AQUÍ 02 AJUSTES PARA CHINO (html[lang^="zh"]) 03 RESET Y BASE 04 UTILIDADES DE TEXTO (eyebrow, .h2, flechas) 05 BOTONES 06 BARRA SUPERIOR (nav) + SELECTOR DE IDIOMA 07 MENÚ MÓVIL 08 HERO (portada) 09 TICKER (marquesina roja) 10 SECCIONES BASE (.block) Y CABECERAS (.head) 11 MANIFIESTO 12 REJILLA DE TARJETAS (.capgrid — capacidades, público, soluciones) 13 MÉTODO (pasos numerados, fondo negro) 14 PRINCIPIOS (bloque rojo) 15 LISTA DE SERVICIOS (página Servicios) 16 BLOQUE PROMO CRUZADA (.xpromo) 17 FAQ (desplegables) 18 PROSA LEGAL (.prose) 19 PÁGINA DE CONTACTO (dos columnas + tarjeta formulario) 20 CTA (llamadas a la acción grandes) 21 BANNER PARTNERS (mundoFranquicia / F+) 22 PIE DE PÁGINA (footer) 23 BOTÓN FLOTANTE X (fab) 24 MODAL DE CONTACTO 25 CABECERA DE PÁGINA INTERIOR (pagehero + migas) 26 ANIMACIONES DE ENTRADA (rise / reveal) 27 RESPONSIVE (móvil y tablet) 28 ACCESIBILIDAD (reduced motion) ========================================================================== */ /* ==== 01 · TOKENS DE DISEÑO ============================================== */ /* Cambia un valor aquí y se aplica a todo el sitio. */ :root{ /* Colores de marca */ --paper:#ffffff; /* fondo general */ --paper-2:#f4f0ea; /* fondo de campos de formulario / notas */ --ink:#0d0b0a; /* negro tinta (texto y bordes) */ --red:#e23a16; /* rojo Expandia (extraído del logo) */ --red-bright:#ff4a1e; /* rojo brillante (acentos puntuales) */ --maroon:#7e1d0a; /* granate oscuro (sombras del logo) */ /* Líneas y bordes */ --line-soft:rgba(13,11,10,.16); --edge:2px solid var(--ink); /* Tipografías (cárgalas también en el si cambias de familia) --fd = display/títulos · --fb = cuerpo · --fm = mono/etiquetas */ --fd:"Bricolage Grotesque",sans-serif; --fb:"Archivo",sans-serif; --fm:"JetBrains Mono",monospace; /* Espaciado lateral del contenido */ --pad:clamp(20px,5vw,80px); } /* ==== 02 · AJUSTES PARA CHINO ============================================ */ /* Las páginas /zh usan Noto Sans SC además de las fuentes base. */ /* Los ideogramas necesitan más interlineado y sin tracking negativo. */ html[lang^="zh"]{ --fd:"Bricolage Grotesque","Noto Sans SC",sans-serif; --fb:"Noto Sans SC","Archivo",sans-serif; --fm:"JetBrains Mono","Noto Sans SC",monospace; } html[lang^="zh"] body{line-height:1.75} html[lang^="zh"] .hero h1{line-height:1.04;letter-spacing:.01em} html[lang^="zh"] .h2, html[lang^="zh"] .pagehero h1, html[lang^="zh"] .cta h2{line-height:1.08;letter-spacing:.01em} html[lang^="zh"] .mani__big{line-height:1.32;letter-spacing:.01em} html[lang^="zh"] .cap h3, html[lang^="zh"] .prin__t, html[lang^="zh"] .svc__b h2, html[lang^="zh"] .step h4, html[lang^="zh"] .faq summary, html[lang^="zh"] .partner__item{letter-spacing:.02em;line-height:1.2} /* ==== 03 · RESET Y BASE ================================================== */ *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{ font-family:var(--fb); background:var(--paper); color:var(--ink); overflow-x:hidden; line-height:1.55; -webkit-font-smoothing:antialiased; } ::selection{background:var(--red);color:#fff} a{color:inherit;text-decoration:none} img{display:block;max-width:100%} .wrap{max-width:1480px;margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)} /* Textura de grano y barra de progreso de scroll */ .grain{position:fixed;inset:0;z-index:9998;pointer-events:none;opacity:.05;mix-blend-mode:multiply} .progress{position:fixed;top:0;left:0;height:3px;width:0;background:var(--red);z-index:10000;transition:width .08s linear} /* ==== 04 · UTILIDADES DE TEXTO =========================================== */ /* .eyebrow = etiqueta pequeña con guion rojo antes de un título */ .eyebrow{ font-family:var(--fm);font-size:.72rem;font-weight:500; letter-spacing:.3em;text-transform:uppercase;color:var(--red); display:inline-flex;align-items:center;gap:.7em; } .eyebrow::before{content:"";width:26px;height:2px;background:var(--red);flex:none} .eyebrow--ink{color:var(--ink)} .eyebrow--ink::before{background:var(--ink)} /* En bloques rojos, la etiqueta pasa a blanco */ .block--red .eyebrow{color:#fff} .block--red .eyebrow::before{background:#fff} /* .h2 = título grande de sección */ .h2{ font-family:var(--fd);font-weight:800;text-transform:uppercase; font-size:clamp(2.3rem,6.4vw,5.4rem);line-height:.9;letter-spacing:-.02em; } .red{color:var(--red)} /* Flecha ↗ que se desplaza al hacer hover en su contenedor */ .arrow{display:inline-block;transition:transform .35s cubic-bezier(.2,.8,.2,1)} /* ==== 05 · BOTONES ======================================================= */ .btn{ font-family:var(--fm);font-weight:700;font-size:.82rem;letter-spacing:.12em; text-transform:uppercase;cursor:pointer;border:var(--edge);background:var(--ink); color:#fff;padding:1.05em 1.6em;display:inline-flex;align-items:center;gap:.7em; transition:transform .25s cubic-bezier(.2,.8,.2,1),background .25s,color .25s; line-height:1; } .btn:hover{background:var(--red);transform:translate(-3px,-3px)} .btn:hover .arrow{transform:translate(4px,-4px)} .btn:active{transform:translate(0,0)} .btn--ghost{background:transparent;color:var(--ink)} .btn--ghost:hover{background:var(--ink);color:#fff} .btn--red{background:var(--red)} .btn--red:hover{background:var(--ink)} .btn--sm{padding:.75em 1.05em;font-size:.72rem} /* ==== 06 · BARRA SUPERIOR + SELECTOR DE IDIOMA =========================== */ .nav{ position:sticky;top:0;z-index:9000;background:rgba(255,255,255,.9); backdrop-filter:blur(10px);border-bottom:var(--edge); } .nav__in{display:flex;align-items:center;justify-content:space-between;height:74px;gap:20px} .nav__logo img{height:30px;width:auto} .nav__links{display:flex;gap:26px;font-family:var(--fm);font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;font-weight:500} .nav__links a{position:relative;padding:4px 0;transition:color .2s} .nav__links a::after{content:"";position:absolute;left:0;bottom:-2px;height:2px;width:0;background:var(--red);transition:width .25s} .nav__links a:hover{color:var(--red)} .nav__links a:hover::after{width:100%} .nav__links a.is-active{color:var(--red)} .nav__links a.is-active::after{width:100%} .nav__right{display:flex;align-items:center;gap:14px} .nav__meta{font-family:var(--fm);font-size:.7rem;letter-spacing:.18em;opacity:.55;text-transform:uppercase} /* Selector de idioma ES / EN / 中文 */ .lang{display:flex;border:2px solid var(--ink)} .lang a{font-family:var(--fm);font-size:.66rem;font-weight:700;letter-spacing:.08em;padding:.55em .7em;transition:background .2s,color .2s} .lang a+a{border-left:2px solid var(--ink)} .lang a:hover{background:var(--red);color:#fff} .lang a.is-active{background:var(--ink);color:#fff} .burger{display:none;font-size:1.6rem;line-height:1;background:none;border:none;cursor:pointer;color:var(--ink)} /* ==== 07 · MENÚ MÓVIL ==================================================== */ .mobile{position:fixed;inset:0;z-index:9500;background:var(--ink);color:#fff;display:flex;flex-direction:column;justify-content:center;padding:var(--pad);transform:translateY(-100%);transition:transform .5s cubic-bezier(.7,0,.2,1)} .mobile.open{transform:translateY(0)} .mobile > a{font-family:var(--fd);font-weight:800;text-transform:uppercase;font-size:clamp(1.9rem,9.5vw,3.6rem);line-height:1.05;padding:.14em 0;letter-spacing:-.02em;border-bottom:1px solid rgba(255,255,255,.16)} .mobile > a .arrow{color:var(--red)} .mobile__close{position:absolute;top:24px;right:var(--pad);font-size:2rem;background:none;border:none;color:#fff;cursor:pointer} .mobile__lang{display:flex;gap:10px;margin-top:30px} .mobile__lang a{font-family:var(--fm);font-size:.85rem;font-weight:700;letter-spacing:.1em;border:2px solid #fff;padding:.6em .95em} .mobile__lang a.is-active{background:var(--red);border-color:var(--red)} .mobile__meta{font-family:var(--fm);font-size:.72rem;letter-spacing:.2em;opacity:.55;margin-top:26px;text-transform:uppercase} /* ==== 08 · HERO (portada) ================================================ */ .hero{position:relative;padding:clamp(48px,8vw,110px) 0 clamp(40px,6vw,80px);overflow:hidden} .hero__grid{position:absolute;inset:0;z-index:0; background-image:linear-gradient(var(--line-soft) 1px,transparent 1px),linear-gradient(90deg,var(--line-soft) 1px,transparent 1px); background-size:clamp(60px,8vw,120px) clamp(60px,8vw,120px); -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 55%,transparent 100%); mask-image:linear-gradient(180deg,#000 0%,#000 55%,transparent 100%)} .hero__ghost{position:absolute;right:-6%;top:-4%;width:min(58vw,720px);opacity:.06;z-index:0;transform:rotate(-4deg);pointer-events:none} .hero__in{position:relative;z-index:2;display:grid;grid-template-columns:1.35fr .8fr;gap:clamp(24px,4vw,60px);align-items:center} .hero__tag{margin-bottom:clamp(22px,3vw,34px)} .hero h1{font-family:var(--fd);font-weight:800;text-transform:uppercase;font-size:clamp(3.2rem,12.5vw,11rem);line-height:.84;letter-spacing:-.035em} .hero h1 .bigarrow{font-size:.62em;color:var(--red);display:inline-block;transform:translateY(-.06em);margin-left:.04em;animation:nudge 2.6s ease-in-out infinite} @keyframes nudge{0%,100%{transform:translate(0,-.06em)}50%{transform:translate(.12em,-.2em)}} .hero__sub{margin:clamp(26px,3vw,38px) 0 clamp(28px,3vw,40px);max-width:46ch;font-size:clamp(1.05rem,1.55vw,1.35rem)} .hero__cta{display:flex;gap:14px;flex-wrap:wrap} .hero__visual{position:relative;display:flex;justify-content:center;align-items:center} .hero__x{width:clamp(170px,24vw,330px);filter:drop-shadow(0 22px 40px rgba(126,29,10,.28));animation:floaty 6s ease-in-out infinite} @keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}} .hero__chip{position:absolute;bottom:-6px;right:6%;font-family:var(--fm);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;border:2px solid var(--ink);background:var(--paper);padding:.5em .8em;transform:rotate(-3deg)} /* ==== 09 · TICKER ======================================================== */ .ticker{background:var(--red);color:#fff;border-top:var(--edge);border-bottom:var(--edge);overflow:hidden;padding:.55em 0} .ticker__track{display:flex;white-space:nowrap;width:max-content;animation:scroll 34s linear infinite} .ticker:hover .ticker__track{animation-play-state:paused} .ticker span{font-family:var(--fd);font-weight:700;text-transform:uppercase;font-size:clamp(1.1rem,2.4vw,1.9rem);letter-spacing:-.01em;padding:0 .5em;display:inline-flex;align-items:center;gap:.45em} .ticker .dot{color:var(--ink);font-size:.6em} @keyframes scroll{to{transform:translateX(-50%)}} /* ==== 10 · SECCIONES BASE ================================================ */ section{position:relative} .block{padding:clamp(70px,9vw,150px) 0} .subblock{padding:clamp(54px,7vw,110px) 0} .block--ink{background:var(--ink);color:#fff} .block--red{background:var(--red);color:#fff} .head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap;margin-bottom:clamp(34px,4vw,64px)} .head__idx{font-family:var(--fm);font-size:.8rem;letter-spacing:.2em;opacity:.5} /* ==== 11 · MANIFIESTO ==================================================== */ .mani{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,80px);align-items:start} .mani__big{font-family:var(--fd);font-weight:700;font-size:clamp(1.9rem,3.6vw,3.3rem);line-height:1.06;letter-spacing:-.02em;text-transform:uppercase} .mani__big em{font-style:normal;color:var(--red)} .mani__body p{font-size:clamp(1rem,1.3vw,1.18rem);margin-bottom:1.1em;max-width:48ch} .mani__body p:last-child{margin-bottom:0} .mani__kw{margin-top:1.6em;display:flex;flex-wrap:wrap;gap:8px} .mani__kw span{font-family:var(--fm);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;border:1.5px solid var(--ink);padding:.4em .7em} /* ==== 12 · REJILLA DE TARJETAS (.capgrid) ================================ */ /* Se usa para: Capacidades (inicio), Para quién (inicio) y Soluciones para franquicias. Las tarjetas se invierten a rojo al pasar el ratón. */ .capgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--ink);border:var(--edge)} .cap{background:var(--paper);padding:clamp(26px,2.6vw,44px);min-height:clamp(210px,23vw,290px);display:flex;flex-direction:column;justify-content:space-between;transition:background .3s,color .3s;overflow:hidden} .cap:hover{background:var(--red);color:#fff} .cap__top{display:flex;justify-content:space-between;align-items:flex-start} .cap__num{font-family:var(--fm);font-size:.82rem;letter-spacing:.18em;opacity:.55} .cap:hover .cap__num{opacity:.85} .cap__arrow{font-size:1.5rem;line-height:1;transition:transform .3s} .cap:hover .cap__arrow{transform:translate(5px,-5px)} .cap h3{font-family:var(--fd);font-weight:800;text-transform:uppercase;font-size:clamp(1.3rem,2.1vw,1.9rem);line-height:.98;letter-spacing:-.01em;margin-top:auto;padding-top:24px} .cap p{font-size:.95rem;line-height:1.45;margin-top:.7em;max-width:36ch;opacity:.82} .cap:hover p{opacity:.95} /* Enlace "más" dentro de una tarjeta */ .cap .more{margin-top:1em;font-family:var(--fm);font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;display:inline-flex;align-items:center;gap:.5em;border-bottom:2px solid var(--red);padding-bottom:2px;width:fit-content} .cap:hover .more{border-color:#fff} /* ==== 13 · MÉTODO (fondo negro) ========================================== */ .steps{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid rgba(255,255,255,.18)} .step{padding:clamp(28px,3vw,48px) clamp(20px,2vw,34px) clamp(28px,3vw,48px) 0;border-right:1px solid rgba(255,255,255,.18);transition:background .3s} .step:last-child{border-right:none} .step:hover{background:rgba(255,255,255,.04)} .step__n{font-family:var(--fd);font-weight:800;font-size:clamp(2.8rem,7vw,6rem);line-height:.85;color:var(--red);letter-spacing:-.03em} .step h4{font-family:var(--fd);font-weight:700;text-transform:uppercase;font-size:clamp(1.15rem,1.8vw,1.5rem);margin:.5em 0 .4em;letter-spacing:-.01em} .step p{font-size:.92rem;opacity:.7;line-height:1.45;max-width:30ch} /* ==== 14 · PRINCIPIOS (bloque rojo) ====================================== */ .prin{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:rgba(255,255,255,.35);border:2px solid #fff} .prin__c{background:var(--red);padding:clamp(28px,3.2vw,52px);display:flex;flex-direction:column;gap:14px} .prin__n{font-family:var(--fm);font-size:.82rem;letter-spacing:.2em} .prin__t{font-family:var(--fd);font-weight:800;text-transform:uppercase;font-size:clamp(1.7rem,3.4vw,3rem);line-height:.92;letter-spacing:-.02em} .prin__d{font-size:.98rem;opacity:.9;max-width:30ch} /* ==== 15 · LISTA DE SERVICIOS ============================================ */ .svc{border-top:var(--edge)} .svc__item{display:grid;grid-template-columns:auto 1fr;gap:clamp(18px,3vw,54px);padding:clamp(32px,4vw,58px) 0;border-bottom:1.5px solid var(--line-soft)} .svc__num{font-family:var(--fd);font-weight:800;font-size:clamp(2.2rem,5vw,4rem);color:var(--red);line-height:.8} .svc__b h2{font-family:var(--fd);font-weight:800;text-transform:uppercase;font-size:clamp(1.55rem,3vw,2.6rem);line-height:.96;letter-spacing:-.02em} .svc__b p{margin-top:.7em;max-width:64ch;font-size:1.05rem;opacity:.85} .svc__b .deliver{margin-top:.7em;font-family:var(--fm);font-size:.82rem;opacity:.6;max-width:64ch} .svc__tags{margin-top:1.1em;display:flex;flex-wrap:wrap;gap:8px} .svc__tags span{font-family:var(--fm);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;border:1.5px solid var(--ink);padding:.42em .7em} /* ==== 16 · BLOQUE PROMO CRUZADA (.xpromo) ================================ */ .xpromo{border:var(--edge);box-shadow:12px 12px 0 var(--red);padding:clamp(26px,3.4vw,48px);display:flex;justify-content:space-between;align-items:center;gap:26px;flex-wrap:wrap;background:var(--paper)} .xpromo h3{font-family:var(--fd);font-weight:800;text-transform:uppercase;font-size:clamp(1.5rem,3vw,2.4rem);line-height:.95;letter-spacing:-.02em} .xpromo p{max-width:54ch;opacity:.85;margin-top:.55em} /* ==== 17 · FAQ =========================================================== */ .faq{border-top:var(--edge)} .faq details{border-bottom:1.5px solid var(--line-soft)} .faq summary{list-style:none;cursor:pointer;padding:clamp(20px,2.4vw,30px) 0;display:flex;justify-content:space-between;align-items:center;gap:24px;font-family:var(--fd);font-weight:700;text-transform:uppercase;font-size:clamp(1.05rem,2vw,1.5rem);letter-spacing:-.01em} .faq summary::-webkit-details-marker{display:none} .faq summary:hover{color:var(--red)} .faq summary .ic{font-family:var(--fm);color:var(--red);font-size:1.3em;transition:transform .3s;flex:none} .faq details[open] summary .ic{transform:rotate(45deg)} .faq .ans{padding:0 0 clamp(20px,2.4vw,28px);max-width:66ch;opacity:.82;font-size:1.02rem;line-height:1.55} /* ==== 18 · PROSA LEGAL =================================================== */ .prose{max-width:75ch} .prose h2{font-family:var(--fd);font-weight:800;text-transform:uppercase;font-size:clamp(1.35rem,2.6vw,2rem);margin:1.8em 0 .5em;letter-spacing:-.01em} .prose h2:first-of-type{margin-top:0} .prose p,.prose li{font-size:1.02rem;line-height:1.62;opacity:.86} .prose p{margin-bottom:1em} .prose ul{margin:0 0 1.1em 1.2em} .prose li{margin-bottom:.45em} .prose a{color:var(--red);border-bottom:1px solid var(--red)} .prose .note{font-family:var(--fm);font-size:.82rem;line-height:1.5;background:var(--paper-2);border:2px solid var(--ink);padding:1em 1.1em;margin:0 0 1.8em;opacity:1} /* ==== 19 · PÁGINA DE CONTACTO ============================================ */ .cpage{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,70px);align-items:start} .cpage__info p{font-size:1.08rem;margin-bottom:1.1em;max-width:42ch;opacity:.86} .cpage__info .chan{margin-top:1.5em;display:flex;flex-direction:column;gap:14px} .cpage__info .chan a,.cpage__info .chan span{font-family:var(--fm);font-size:.94rem;display:inline-flex;align-items:center;gap:.5em} .cpage__info .chan a{border-bottom:2px solid var(--red);padding-bottom:3px;width:fit-content} .cpage__info .chan a:hover{color:var(--red)} .formcard{border:var(--edge);padding:clamp(26px,3vw,40px);box-shadow:12px 12px 0 var(--red)} /* Campos de formulario (modal y página de contacto) */ .field{margin-bottom:18px} .field label{display:block;font-family:var(--fm);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;margin-bottom:8px;opacity:.7} .field label .req{color:var(--red)} .field input,.field textarea{width:100%;font-family:var(--fb);font-size:1rem;padding:.85em .9em;border:2px solid var(--ink);background:var(--paper-2);color:var(--ink);transition:border-color .2s,background .2s} .field input:focus,.field textarea:focus{outline:none;border-color:var(--red);background:#fff} .field textarea{resize:vertical;min-height:104px} /* Mensaje de éxito tras enviar */ .success{padding:clamp(24px,3vw,36px) 0 0;display:none} .success.show{display:block;animation:rise .6s cubic-bezier(.16,.84,.3,1) both} .success .tick{font-family:var(--fd);font-weight:800;font-size:clamp(2rem,5vw,3rem);color:var(--red);line-height:.9;text-transform:uppercase} .success p{margin-top:14px;font-size:1rem;opacity:.8;max-width:40ch} .success .btn{margin-top:22px} /* ==== 20 · CTA =========================================================== */ .cta{display:grid;grid-template-columns:1.4fr .9fr;gap:clamp(30px,5vw,70px);align-items:center} .cta h2{font-family:var(--fd);font-weight:800;text-transform:uppercase;font-size:clamp(2.6rem,8.5vw,7rem);line-height:.84;letter-spacing:-.03em} .cta__side{border-left:var(--edge);padding-left:clamp(22px,2.4vw,40px)} .block--ink .cta__side{border-color:rgba(255,255,255,.3)} .cta__side p{font-size:1.05rem;margin-bottom:1.4em;max-width:30ch} .cta__mail{font-family:var(--fm);font-size:.84rem;letter-spacing:.06em;display:inline-flex;align-items:center;gap:.5em;border-bottom:2px solid var(--red);padding-bottom:3px;margin-top:1.6em} .cta__mail:hover{color:var(--red)} /* ==== 21 · BANNER PARTNERS =============================================== */ .partner{background:var(--red);color:#fff;border-top:var(--edge);border-bottom:var(--edge);padding:clamp(40px,5vw,72px) 0} .partner__lbl{font-family:var(--fm);font-size:.74rem;letter-spacing:.32em;text-transform:uppercase;margin-bottom:clamp(20px,2.4vw,32px);display:flex;align-items:center;gap:.7em} .partner__lbl::before{content:"";width:30px;height:2px;background:#fff;flex:none} .partner__row{display:flex;flex-wrap:wrap;gap:clamp(16px,3vw,28px) clamp(30px,6vw,80px);align-items:center} .partner__item{font-family:var(--fd);font-weight:800;text-transform:uppercase;font-size:clamp(1.8rem,5vw,4rem);line-height:.9;letter-spacing:-.025em;display:inline-flex;align-items:center;gap:.18em;border-bottom:3px solid transparent;transition:border-color .25s} .partner__item:hover{border-bottom-color:#fff} .partner__item .arrow{font-size:.55em;transform:translateY(-.18em)} .partner__item:hover .arrow{transform:translate(.1em,-.32em)} .partner__note{font-family:var(--fm);font-size:.72rem;letter-spacing:.08em;opacity:.85;margin-top:clamp(20px,2.4vw,30px);max-width:60ch} /* ==== 22 · PIE DE PÁGINA ================================================= */ .foot{background:var(--ink);color:#fff;padding:clamp(56px,7vw,100px) 0 40px} .foot__top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;padding-bottom:clamp(40px,5vw,70px);border-bottom:1px solid rgba(255,255,255,.16)} .foot__logo img{height:34px;width:auto;margin-bottom:22px} .foot__top p{opacity:.66;font-size:.96rem;max-width:34ch} .foot__col h5{font-family:var(--fm);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;opacity:.5;margin-bottom:18px} .foot__col a,.foot__col span{display:block;font-size:.98rem;opacity:.82;margin-bottom:11px;transition:opacity .2s,color .2s} .foot__col a:hover{opacity:1;color:var(--red-bright)} .foot__bottom{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;padding-top:30px;font-family:var(--fm);font-size:.72rem;letter-spacing:.08em;opacity:.6;text-transform:uppercase} .totop{cursor:pointer;display:inline-flex;align-items:center;gap:.5em} .totop:hover .arrow{transform:translate(3px,-3px)} /* ==== 23 · BOTÓN FLOTANTE X ============================================== */ .fab{ position:fixed;right:clamp(18px,3vw,40px);bottom:clamp(18px,3vw,40px);z-index:9300; width:clamp(58px,7vw,76px);height:clamp(58px,7vw,76px);border-radius:50%; background:#fff;border:2.5px solid var(--ink);cursor:pointer; display:flex;align-items:center;justify-content:center; box-shadow:0 14px 30px rgba(126,29,10,.32); transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s,border-color .3s; } .fab::after{content:"";position:absolute;inset:-2.5px;border-radius:50%;border:2px solid var(--red);opacity:.6;animation:pulse 2.4s ease-out infinite} @keyframes pulse{0%{transform:scale(1);opacity:.6}70%{transform:scale(1.45);opacity:0}100%{opacity:0}} .fab img{width:60%;height:60%;object-fit:contain} .fab:hover{transform:scale(1.08) rotate(-6deg);border-color:var(--red);box-shadow:0 18px 38px rgba(126,29,10,.42)} .fab__tip{position:absolute;right:calc(100% + 12px);top:50%;transform:translateY(-50%);background:var(--ink);color:#fff;font-family:var(--fm);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;padding:.55em .8em;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .25s} .fab:hover .fab__tip{opacity:1} /* ==== 24 · MODAL DE CONTACTO ============================================= */ .modal{position:fixed;inset:0;z-index:9600;display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s} .modal.open{opacity:1;visibility:visible} .modal__bg{position:absolute;inset:0;background:rgba(13,11,10,.72);backdrop-filter:blur(4px)} .modal__card{position:relative;z-index:2;background:var(--paper);border:var(--edge);width:min(560px,100%);max-height:92vh;overflow-y:auto;box-shadow:14px 14px 0 var(--red);transform:translateY(26px) scale(.97);transition:transform .4s cubic-bezier(.16,.84,.3,1)} .modal.open .modal__card{transform:none} .modal__head{display:flex;justify-content:space-between;align-items:flex-start;padding:clamp(24px,3vw,34px) clamp(24px,3vw,38px) 0} .modal__idx{font-family:var(--fm);font-size:.72rem;letter-spacing:.2em;color:var(--red);text-transform:uppercase} .modal__head h3{font-family:var(--fd);font-weight:800;text-transform:uppercase;font-size:clamp(1.7rem,4vw,2.5rem);line-height:.9;letter-spacing:-.02em;margin-top:10px} html[lang^="zh"] .modal__head h3{line-height:1.15;letter-spacing:.01em} .modal__close{font-size:1.7rem;line-height:1;background:none;border:none;cursor:pointer;color:var(--ink);transition:transform .2s,color .2s} .modal__close:hover{color:var(--red);transform:rotate(90deg)} .modal__form{padding:clamp(20px,2.6vw,30px) clamp(24px,3vw,38px) clamp(26px,3vw,38px)} .modal__form p.intro{font-size:.96rem;opacity:.7;margin-bottom:24px;max-width:42ch} .modal .success{padding:clamp(30px,4vw,48px) clamp(24px,3vw,38px)} /* ==== 25 · CABECERA DE PÁGINA INTERIOR =================================== */ .pagehero{position:relative;padding:clamp(44px,6vw,92px) 0 clamp(30px,4vw,52px);border-bottom:var(--edge);overflow:hidden} .pagehero__grid{position:absolute;inset:0;z-index:0;background-image:linear-gradient(var(--line-soft) 1px,transparent 1px),linear-gradient(90deg,var(--line-soft) 1px,transparent 1px);background-size:clamp(60px,8vw,120px) clamp(60px,8vw,120px);-webkit-mask-image:linear-gradient(180deg,#000,transparent);mask-image:linear-gradient(180deg,#000,transparent)} .pagehero .wrap{position:relative;z-index:2} .crumb{font-family:var(--fm);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;opacity:.6;margin-bottom:clamp(18px,2.4vw,30px);display:flex;gap:.6em;flex-wrap:wrap} .crumb a:hover{color:var(--red)} .crumb .sep{opacity:.45} .pagehero h1{font-family:var(--fd);font-weight:800;text-transform:uppercase;font-size:clamp(2.6rem,8.5vw,6.2rem);line-height:.84;letter-spacing:-.03em} .pagehero .intro{margin-top:clamp(20px,2.4vw,30px);max-width:58ch;font-size:clamp(1.05rem,1.5vw,1.3rem)} /* ==== 26 · ANIMACIONES DE ENTRADA ======================================== */ /* .rise (con .d1–.d5) = entrada escalonada al cargar la portada. .reveal = aparece al entrar en pantalla haciendo scroll. */ .rise{opacity:0;transform:translateY(30px)} .loaded .rise{animation:rise .9s cubic-bezier(.16,.84,.3,1) forwards} .loaded .d1{animation-delay:.05s}.loaded .d2{animation-delay:.18s} .loaded .d3{animation-delay:.32s}.loaded .d4{animation-delay:.46s} .loaded .d5{animation-delay:.6s} @keyframes rise{to{opacity:1;transform:none}} .reveal{opacity:0;transform:translateY(34px);transition:opacity .8s cubic-bezier(.16,.84,.3,1),transform .8s cubic-bezier(.16,.84,.3,1)} .reveal.in{opacity:1;transform:none} /* ==== 27 · RESPONSIVE ==================================================== */ @media(max-width:1120px){ .hero__in{grid-template-columns:1fr} .hero__visual{order:-1;justify-content:flex-start} .hero__x{width:clamp(150px,38vw,250px)} .hero__chip{right:auto;left:34%} .capgrid{grid-template-columns:repeat(2,1fr)} .steps{grid-template-columns:repeat(2,1fr)} .step:nth-child(2){border-right:none} .step{border-bottom:1px solid rgba(255,255,255,.18)} .prin{grid-template-columns:1fr} .cta{grid-template-columns:1fr} .cta__side{border-left:none;border-top:var(--edge);padding-left:0;padding-top:30px} .block--ink .cta__side{border-color:rgba(255,255,255,.3)} .foot__top{grid-template-columns:1fr 1fr} } @media(max-width:940px){ .nav__links,.nav__meta{display:none} .burger{display:block} } @media(max-width:880px){ .cpage{grid-template-columns:1fr} } @media(max-width:680px){ .nav .btn{display:none} .capgrid{grid-template-columns:1fr} .steps{grid-template-columns:1fr} .step,.step:nth-child(2){border-right:none} .mani{grid-template-columns:1fr} .svc__item{grid-template-columns:1fr;gap:10px} .foot__top{grid-template-columns:1fr} .head{align-items:flex-start} } @media(max-width:420px){ .lang a{padding:.5em .55em} } /* ==== 28 · ACCESIBILIDAD ================================================= */ @media(prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important} .rise,.reveal{opacity:1!important;transform:none!important} } /* ==== 29 · GUÍA DPP (línea de tiempo, diagnóstico, etiquetas) ============ */ /* Componentes exclusivos de las páginas del Pasaporte Digital de Producto. */ .dpp-tl{border-top:var(--edge)} .dpp-tl__row{display:grid;grid-template-columns:minmax(120px,190px) 1fr;gap:18px;padding:17px 0;border-bottom:1.5px solid var(--line-soft)} .dpp-tl--w .dpp-tl__row{grid-template-columns:minmax(150px,280px) 1fr} .dpp-tl__d{font-family:var(--fm);font-weight:700;color:var(--red);font-size:.85rem;letter-spacing:.04em;line-height:1.4} .dpp-tl__row p{opacity:.85;font-size:.98rem;line-height:1.5} .block--ink .dpp-tl{border-top-color:rgba(255,255,255,.4)} .block--ink .dpp-tl__row{border-bottom-color:rgba(255,255,255,.18)} .block--ink .dpp-tl__d{color:var(--red-bright)} /* Diagnóstico por sectores */ .diag__hint{max-width:60ch;opacity:.8;font-size:1.02rem;margin-bottom:22px} .diag__btns{display:flex;flex-wrap:wrap;gap:8px} .diag__btns button{font-family:var(--fm);font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;border:2px solid var(--ink);background:var(--paper);color:var(--ink);padding:.65em .95em;cursor:pointer;transition:background .2s,color .2s,border-color .2s} .diag__btns button:hover{background:var(--ink);color:#fff} .diag__btns button[aria-pressed="true"]{background:var(--red);border-color:var(--red);color:#fff} .diag__res{display:none;margin-top:26px;border:var(--edge);background:var(--paper);box-shadow:12px 12px 0 var(--red);padding:clamp(22px,3vw,36px)} .diag__res.show{display:block;animation:rise .5s cubic-bezier(.16,.84,.3,1) both} .diag__res h3{font-family:var(--fd);font-weight:800;text-transform:uppercase;font-size:clamp(1.3rem,2.6vw,2rem);letter-spacing:-.01em;line-height:1;display:flex;align-items:center;gap:.6em;flex-wrap:wrap} html[lang^="zh"] .diag__res h3{letter-spacing:.02em;line-height:1.2} .tag{font-family:var(--fm);font-size:.6rem;letter-spacing:.12em;padding:.4em .75em;border:2px solid var(--ink);text-transform:uppercase;font-weight:700;line-height:1} .tag--hot{background:var(--red);border-color:var(--red);color:#fff} .tag--mid{background:var(--ink);color:#fff} .tag--out{background:transparent;color:var(--ink)} .dr__block{margin-top:18px} .dr__label{font-family:var(--fm);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--red);display:block;margin-bottom:6px} .dr__block p,.dr__block li{font-size:.98rem;opacity:.85;line-height:1.5} .dr__block ul{margin:.2em 0 0 1.15em} .dr__block .btn{margin-top:6px}