/* Capa "Refactoring UI" (2026-10-21) para home, servicios, contacto y nosotros de hypecloud.cl.
   Reglas de github.com/s0xDk/refactoring-ui-skill: escalas fijas (espacio, tipo, grises, sombras),
   jerarquía con peso y color en vez de tamaño, máx. 3 colores de texto, 1 radio, menos bordes.
   Solo CSS, enlazada última en <head>. Fuente: Web_principal_respaldo_2026-10-10/2026-10-21_refactoring-ui. */

html:root{
  /* Grises fríos, mismo tono que el fondo #0A0A14 (hsl 240). 950 = fondo */
  --g-950:hsl(240,33%,6%);
  --g-900:hsl(240,22%,9%);
  --g-850:hsl(240,18%,12%);
  --g-800:hsl(240,14%,17%);
  --g-700:hsl(240,10%,26%);
  --g-500:hsl(240,7%,58%);   /* terciario: 5.9:1 sobre el fondo */
  --g-400:hsl(240,9%,70%);   /* secundario */
  --g-200:hsl(240,14%,90%);  /* primario de párrafo */
  /* Roles */
  --t-1:#fff; --t-2:var(--g-400); --t-3:var(--g-500);
  --line:var(--g-800);
  --r:6px;                     /* un solo radio en todo el sitio */
  --sh-1:0 1px 3px hsla(0,0%,0%,.3);
  --sh-3:0 5px 15px hsla(0,0%,0%,.35);
  --sh-4:0 10px 24px hsla(0,0%,0%,.4);
  /* tokens del sitio apuntando a la escala */
  --c-surface:var(--g-900);
  --c-surface-2:var(--g-850);
  --c-border:var(--g-800);
  --c-border-hi:var(--g-800);
  --c-muted:var(--g-400);
  --radius-sm:var(--r); --radius-md:var(--r); --radius-lg:var(--r)
}

/* ── 1. HERO: un solo foco ── */
html body .hero__desc.hero__desc{
  text-transform:none;letter-spacing:0;font-size:1.125rem;line-height:1.6;
  color:var(--g-200);max-width:34em
}
html body .hero__desc + .hero__divider{display:none}          /* 2ª línea amarilla sobraba */
html body .hero__sub.hero__sub{
  color:var(--t-2);font-size:.75rem;font-weight:600;letter-spacing:.12em;margin-top:-.25rem
}
/* Acción principal = Cotizar (sólido); Ver servicios = secundaria (borde) */
html body .hero__actions{display:flex;flex-wrap:wrap;gap:1rem}
html body .hero__actions .btn--ghost.btn--ghost{
  order:-1;background:var(--c-accent);color:#0A0A14;border-color:var(--c-accent);box-shadow:var(--sh-1)
}
html body .hero__actions .btn--ghost.btn--ghost:hover{background:var(--c-accent-hi);color:#0A0A14}
html body .hero__actions .btn--accent.btn--accent{
  background:transparent;color:#fff;box-shadow:inset 0 0 0 2px var(--g-700)
}
html body .hero__actions .btn--accent.btn--accent:hover{box-shadow:inset 0 0 0 2px #fff;background:transparent}
html body .btn.btn:active,html body .btn-cta:active{transform:translateY(1px);box-shadow:none}

/* ── 2. CIFRAS: gris frío del sistema, separadores suaves, etiqueta secundaria ── */
html body section.stats{background:var(--g-900);border-bottom:0}
html body .stats__item.stats__item{border-right-color:var(--g-800)}
html body .stats__label,html body .stats__item span:last-child{color:var(--t-2)}

/* ── 3. "Marcas con las que hemos trabajado" es una etiqueta, no un titular ── */
html body section.clients .section-title.section-title{
  font-family:var(--ff-body);font-stretch:100%;font-size:.875rem;font-weight:600;
  letter-spacing:.14em;line-height:1.6;word-spacing:0;color:var(--t-2)
}
html body section.clients .section-title *{color:inherit}
html body section.clients .section-header{margin-bottom:2rem}

/* ── 4. 4 CAPAS: sin marco de color; acento arriba, superficie y sombra ── */
html body .capas__card.capas__card{
  border:0;border-top:3px solid var(--card-color);background:var(--g-900);box-shadow:var(--sh-1);
  transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s
}
html body .capas__card.capas__card:hover{box-shadow:var(--sh-4)}
html body .capas__card-img img{opacity:.85}
html body .capas__card-list.capas__card-list{border-top-color:var(--g-800);gap:.5rem}
html body .capas__card-list.capas__card-list.capas__card-list li{
  text-transform:none;letter-spacing:0;font-size:.9375rem;color:var(--g-200)
}
html body .capas__sub.capas__sub{color:var(--t-2);font-size:1.125rem}
html body .capas__sub em{font-style:normal}

/* ── 5. Textos largos: nunca en mayúsculas, 3 niveles de color, ancho de lectura ── */
html body .agencias__list.agencias__list.agencias__list li{
  text-transform:none;letter-spacing:0;font-size:1rem;color:var(--g-200);line-height:1.5
}
html body .agencias__list.agencias__list{gap:1rem}
html body .como__desc,html body .agencias__desc,html body .s3d__text p,html body .rvr p:not(.rvr__cap),
html body .cta-band__sub{color:var(--g-200);line-height:1.65;max-width:36em}
html body .como__pill-desc,html body .proc__step p{color:var(--t-2)}

/* ── 6. Menos cajas: fotos y visores sin borde, con sombra ── */
html body .como__img,html body .s3d__view,html body .rvr__frame,html body .agencias__foto,
html body .proyectos__item{border:0;box-shadow:var(--sh-3);border-radius:var(--r)}
html body .s3d__chip,html body .rvr__tabs button,html body .rvr__tag,html body .s3d__size,html body .s3d__hint{border-radius:var(--r)}

/* ── 7. FOOTER: enlaces en gris (no todos de color), blanco al pasar ── */
html body .footer__col.footer__col.footer__col a{color:var(--t-2)}
html body .footer__col.footer__col.footer__col a:hover{color:#fff}
html body .footer__col-title.footer__col-title{color:#fff;letter-spacing:.12em}
html body .footer__bottom{border-top-color:var(--g-800)}
html body .footer__bottom-inner,html body .footer__bottom-inner *{color:var(--t-3)}

/* Etiquetas en mayúscula: tracking ≥ .05em ya cumplido; tag de sección en gris secundario */
html body .tag{color:var(--t-2)}

/* Las dos acciones del hero con el mismo tamaño (la jerarquía la da el relleno, no el tamaño) */
html body .hero__actions .btn.btn{font-size:.95rem;padding:.875rem 1.5rem;min-height:48px}

/* Títulos sin palabra huérfana ("PRODUCIMOS LO / QUE") */
html body .section-title,html body .agencias__title,html body .como__title,html body .cta-band__title{text-wrap:balance}
/* Logos: la franja ya no lleva titular grande, menos aire alrededor */
html body section.clients.section{padding-block:4rem}

/* ════ SERVICIOS ════ */
/* 6 botones amarillos iguales = ningún foco. Por servicio: enlace (acción terciaria); el sólido queda en la franja final */
html body .svc .btn--accent.btn--accent.btn--accent{
  background:none;color:var(--c-accent);padding:.5rem 0;min-height:0;box-shadow:none;
  border-bottom:2px solid transparent;border-radius:0
}
html body .svc .btn--accent.btn--accent.btn--accent:hover{border-bottom-color:var(--c-accent);transform:none}
/* Bajada del servicio: blanca y con peso (el amarillo ya lo tienen el número y los puntos) */
html body .svc__subtitle.svc__subtitle.svc__subtitle{color:#fff;font-weight:600;font-size:1.125rem}
html body .svc__desc.svc__desc{color:var(--g-200);line-height:1.65;max-width:36em}
html body .svc__feature.svc__feature.svc__feature{color:var(--t-2);font-size:.9375rem}
html body .svc__features{row-gap:.75rem}
html body .page-hero__desc{color:var(--g-200)}

/* ════ CONTACTO ════ */
/* Campos: fondo un paso más claro + borde que identifica el control (≥3:1), foco amarillo */
html body .form-field.form-field.form-field input,
html body .form-field.form-field.form-field select,
html body .form-field.form-field.form-field textarea{
  background-color:var(--g-900);border:1px solid hsl(240,8%,44%);border-radius:var(--r);color:#fff
}
html body .form-field.form-field.form-field input:focus,
html body .form-field.form-field.form-field select:focus,
html body .form-field.form-field.form-field textarea:focus{border-color:var(--c-accent);box-shadow:0 0 0 3px hsla(72,100%,50%,.2);outline:0}
html body .form-field.form-field.form-field input::placeholder,
html body .form-field.form-field.form-field textarea::placeholder{color:var(--g-500)}
html body .form-field.form-field.form-field label{font-weight:600}
/* Chips del tipo de evento: mismo radio que todo, borde visible */
html body .chip.chip.chip span{border-radius:var(--r);border-color:hsl(240,8%,44%);color:var(--g-200)}
html body .chip.chip.chip input:checked+span{border-color:var(--c-accent);color:var(--c-accent)}
/* Tarjeta de datos: sin borde, superficie + sombra; etiquetas (EMAIL…) secundarias, valor blanco */
html body .contact-info.contact-info{border:0;background:var(--g-900);box-shadow:var(--sh-3)}
html body .contact-info__label{color:var(--t-2)}
html body .contact-info__value{color:#fff}
/* Preguntas frecuentes: sin borde, superficie del sistema */
html body .faq__item.faq__item{border:0;background:var(--g-900)}
html body .faq__item.faq__item:hover{background:var(--g-850)}
html body .faq__answer{color:var(--g-200)}
html body .form-note{color:var(--t-3)}

/* ════ SERVICIOS · Cómo trabajamos: sin cuadrícula de cajas; línea superior + número ════ */
html body .process__grid.process__grid{background:none;border:0;border-radius:0;gap:2.5rem}
html body .process__step.process__step{background:none;padding:1.5rem 0 0;border-top:2px solid var(--g-800);position:relative}
html body .process__step.process__step::before{content:"";position:absolute;left:0;top:-2px;width:48px;height:2px;background:var(--c-accent);transition:width .4s cubic-bezier(.16,1,.3,1)}
html body .process__step.process__step:hover{background:none}
html body .process__step.process__step:hover::before{width:100%}
html body .process__n.process__n{font-size:.875rem}
html body .process__step-desc.process__step-desc{color:var(--t-2);font-size:.9375rem}

/* ════ LOGOS DE CLIENTES: mismo peso visual. Los cuadrados (Burger King, Comic Con…) se
   veían diminutos al lado de los logotipos anchos: se agrandan según su proporción ════ */
html body .clients__logo.clients__logo{max-width:150px}
html body .clients__logo[alt="Burger King"],html body .clients__logo[alt="Comic Con"],
html body .clients__logo[alt="HP"],
html body .clients__logo[alt="Lollapalooza"],html body .clients__logo[alt="Fanta"],
html body .clients__logo[alt="Jägermeister"],html body .clients__logo[alt="Ministerio de las Culturas"]{height:52px;max-height:52px}
html body .clients__logo[alt="Valdivieso"],html body .clients__logo[alt="Stake"],
html body .clients__logo[alt="Red Bull"],html body .clients__logo[alt="Logitech"]{height:46px;max-height:46px}
html body .clients__logo[alt="Domino's"],html body .clients__logo[alt="EstelarBet"],
html body .clients__logo[alt="Sandisk"],html body .clients__logo[alt="Fever"],
html body .clients__logo[alt="Coolbet"],html body .clients__logo[alt="Gigabyte"],html body .clients__logo[alt="UGREEN"],html body .clients__logo[alt="Casa Royal"]{height:30px;max-height:30px}
@media (max-width:600px){
  html body .clients__logo[alt="Burger King"],html body .clients__logo[alt="Comic Con"],
  html body .clients__logo[alt="HP"],
  html body .clients__logo[alt="Lollapalooza"],html body .clients__logo[alt="Fanta"],
  html body .clients__logo[alt="Jägermeister"],html body .clients__logo[alt="Ministerio de las Culturas"]{height:40px;max-height:40px}
  html body .clients__logo[alt="Valdivieso"],html body .clients__logo[alt="Stake"],
  html body .clients__logo[alt="Red Bull"],html body .clients__logo[alt="Logitech"]{height:34px;max-height:34px}
  html body .clients__logo[alt="Domino's"],html body .clients__logo[alt="EstelarBet"],
  html body .clients__logo[alt="Sandisk"],html body .clients__logo[alt="Fever"],
  html body .clients__logo[alt="Coolbet"],html body .clients__logo[alt="Gigabyte"],html body .clients__logo[alt="UGREEN"],html body .clients__logo[alt="Casa Royal"]{height:22px;max-height:22px}
}

/* ════ NOSOTROS: la página usaba variables que no existen (--wh, --mg, --bk…): textos sin color,
   "DEL" invisible, botón sin fondo. Se definen sobre la escala del sitio ════ */
html:root{--wh:#fff;--wh08:var(--g-800);--wh55:var(--g-400);--bk:var(--g-950);--bk3:var(--g-900);--mg:var(--c-accent)}
html body .btn-fill.btn-fill{color:#0A0A14;border-radius:var(--r);box-shadow:var(--sh-1)}
html body .btn-fill.btn-fill:hover{background:var(--c-accent-hi)}
html body .stat-label.stat-label{color:var(--t-2)}
html body .val-body.val-body{color:var(--g-200);font-weight:400}
html body .manif-text.manif-text{font-weight:400}
html body .val-num.val-num{color:var(--c-accent)}
html body .cl-grid.cl-grid{grid-template-columns:repeat(6,1fr);background:none;gap:0}
html body .cl-cell.cl-cell{background:none;aspect-ratio:auto;padding:1.5rem}
html body .cl-logo-grid.cl-logo-grid{width:auto;height:36px;max-height:none;max-width:130px;object-fit:contain;filter:grayscale(1) brightness(1.3);opacity:.7;transition:filter .3s,opacity .3s}
html body .cl-cell.cl-cell:hover .cl-logo-grid.cl-logo-grid{filter:none;opacity:1;transform:none}
html body .cl-logo-grid.cl-logo-grid[alt="Burger King"],html body .cl-logo-grid.cl-logo-grid[alt="Comic Con"],html body .cl-logo-grid.cl-logo-grid[alt="Gigabyte"],
html body .cl-logo-grid.cl-logo-grid[alt="HP"],html body .cl-logo-grid.cl-logo-grid[alt="Lollapalooza"]{height:52px}
html body .cl-logo-grid.cl-logo-grid[alt="Fever"],html body .cl-logo-grid.cl-logo-grid[alt="Domino's"]{height:28px}
html body .cl-logo-grid.cl-logo-grid[alt="Logitech"]{height:44px}
@media (max-width:900px){html body .cl-grid.cl-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:600px){html body .cl-logo-grid.cl-logo-grid{height:26px}html body .cl-logo-grid.cl-logo-grid[alt]:is([alt="Burger King"],[alt="Comic Con"],[alt="Gigabyte"],[alt="HP"],[alt="Lollapalooza"]){height:38px}}

/* Logotipos planos de un color oscuro (rojo/azul) quedaban casi invisibles en gris:
   en reposo van en blanco como el resto; al pasar el mouse, su color real */
html body .clients__logo.clients__logo:is([alt="Netflix"],[alt="Sandisk"],[alt="Gigabyte"]){filter:brightness(0) invert(1);opacity:.6}
html body .clients__item:hover .clients__logo.clients__logo:is([alt="Netflix"],[alt="Sandisk"],[alt="Gigabyte"]){filter:none;opacity:1}

/* HYPE 2026-10-21 SEO: contraste AA de la etiqueta magenta en las 4 capas (3,4:1 -> 4,9:1) */
[style*="--card-color:#CE0063"] .capas__card-tag{color:#dd4d92}