/* La marca como caso (26/09/2026, Miguel: "como en Behance"): portada negra con el logo gigante,
   partes numeradas, imágenes grandes en tarjetas claras, el color y la letra como láminas, y el
   cierre negro del caso. Va después de sitio.css y solo lo carga /marca. */
body{overflow-x:clip}
.identidad{padding-bottom:0}

/* Portada: negra, el logo gigante se conecta al entrar */
.id-portada{background:var(--oscuro);color:#fff;padding:120px 0 96px;border-radius:0 0 50% 50% / 0 0 80px 80px}
.id-logo{margin:0 0 72px;text-align:center;font-size:clamp(120px,22vw,300px)}
.id-logo .logo-punto{background:#8fa2f0}
.id-logo .logo-mds::after{background:radial-gradient(circle at .08em 50%,currentColor .065em,transparent .08em),radial-gradient(circle at calc(100% - .1em) 50%,#8fa2f0 .065em,transparent .08em),linear-gradient(currentColor,currentColor) center/calc(100% - .2em) .05em no-repeat}
.id-etiqueta{margin:0 0 20px;font:500 14px/1.4 var(--serif);letter-spacing:.08em;color:#8fa2f0}
.id-portada h1{margin:0 0 28px;font-size:clamp(46px,7.4vw,112px);font-weight:500;line-height:.98;letter-spacing:-.045em}
.id-bajada{max-width:24em;font-size:clamp(21px,2vw,26px);line-height:1.4;color:rgb(255 255 255 / .7)}
.id-ficha{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin:56px 0 0;padding:28px 0;border-block:1px solid rgb(255 255 255 / .14)}
.id-ficha dt{margin-bottom:6px;font:500 13px/1.5 var(--serif);letter-spacing:.08em;text-transform:uppercase;color:rgb(255 255 255 / .6)}
.id-ficha dd{margin:0;font-size:17px}
.id-ficha a{color:#fff}
.id-portada ::selection{background:var(--acento);color:#fff}

/* Cada parte: número en azul, título grande */
.id-parte{max-width:1180px;padding-top:128px}
.id-num{margin:0 0 12px;font:500 14px/1 var(--serif);letter-spacing:.08em;color:var(--acento)}
.id-parte h2{margin:0 0 40px;font-size:clamp(40px,5vw,72px);font-weight:500;line-height:1;letter-spacing:-.04em}
.id-sub{margin:96px 0 24px;font-size:clamp(26px,2.6vw,34px);font-weight:500;letter-spacing:-.02em}
.id-texto{max-width:36em;font-size:21px;line-height:1.55;color:var(--gris-texto)}
.id-texto strong{color:var(--tinta);font-weight:500}
.id-grande{margin:0;font-size:clamp(26px,2.8vw,38px);line-height:1.25;letter-spacing:-.02em}
.id-dos{display:grid;grid-template-columns:1.2fr 1fr;gap:64px;align-items:start}
.id-dos>div>p{color:var(--gris-texto)}
.id-reglas{margin:0;padding:0;list-style:none;display:grid;gap:16px}
.id-reglas li{padding:24px;border-radius:20px;background:#f5f5f5;color:var(--gris-texto);line-height:1.5}
.id-reglas strong{display:block;margin-bottom:6px;color:var(--tinta);font-weight:500}
.id-veredicto{max-width:36em;margin:40px 0 0;padding:28px 32px;border-left:2px solid var(--acento);font-size:21px;line-height:1.5}
.id-veredicto span{font-weight:500}
.id-nota{margin-top:24px;font-size:16px;color:var(--gris-texto)}

/* Imágenes: tarjetas claras con el pie abajo */
.id-img{margin:0;padding:12px;border-radius:28px;background:#f5f5f5}
.id-img img{width:100%;border-radius:16px;background:#ececec;color:var(--tinta)}
.id-img figcaption{padding:14px 8px 4px;font-size:16px;line-height:1.45;color:var(--gris-texto)}
.id-img figcaption strong{color:var(--tinta);font-weight:500}
.id-ancha{margin-top:24px}
.id-par{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:24px}

/* El logo final, en claro y en oscuro */
.id-final{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:24px 0 32px}
.id-final>div{display:grid;place-items:center;min-height:320px;border-radius:28px}
.id-final-claro{background:#f5f5f5}
.id-final-oscuro{background:var(--oscuro);color:#fff}
.id-final-oscuro .logo-punto{background:#8fa2f0}
.id-final-oscuro .logo-mds::after{background:radial-gradient(circle at .08em 50%,currentColor .065em,transparent .08em),radial-gradient(circle at calc(100% - .1em) 50%,#8fa2f0 .065em,transparent .08em),linear-gradient(currentColor,currentColor) center/calc(100% - .2em) .05em no-repeat}
.id-logo-grande{font-size:clamp(72px,9vw,128px)}
.id-logo-medio{font-size:clamp(48px,5vw,64px)}
.id-piezas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin:40px 0 0;padding:0;list-style:none}
.id-piezas li{padding:28px;border:1px solid var(--linea);border-radius:24px}
.id-pieza-num{display:grid;place-items:center;width:32px;height:32px;margin-bottom:20px;border-radius:50%;background:var(--acento);color:#fff;font-size:15px;font-weight:500}
.id-piezas h3{margin:0 0 8px;font-size:22px;font-weight:500}
.id-piezas p{margin:0;font-size:17px;line-height:1.5;color:var(--gris-texto)}

/* La animación del logo, congelada en cuatro momentos */
.id-cuadros{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:0;padding:0;list-style:none}
.id-cuadros li{display:grid;justify-items:center;gap:20px;padding:40px 16px 24px;border-radius:24px;background:#f5f5f5}
.id-cuadros p{margin:0;font-size:16px;color:var(--gris-texto)}
.logo-etapa .logo-punto,.logo-etapa.logo-mds::after{animation:none}
.logo-etapa-1 .logo-punto{transform:scale(1.35)}
.logo-etapa-1.logo-mds::after{clip-path:inset(0 0 0 100%)}
.logo-etapa-2.logo-mds::after{clip-path:inset(0 0 0 calc(100% - .28em))}
.logo-etapa-3.logo-mds::after{clip-path:inset(0 0 0 45%)}

/* Color: láminas con el nombre y el código */
.id-colores{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;margin:0;padding:0;list-style:none}
.id-colores li{display:flex;flex-direction:column;min-height:300px;padding:24px;border-radius:24px}
.id-colores strong{font-size:20px;font-weight:500}
.id-colores span{margin-top:4px;font-size:15px;letter-spacing:.04em;opacity:.75}
.id-colores p{margin:auto 0 0;font-size:15px;line-height:1.45;opacity:.8}
.id-color-gris{background:var(--papel);box-shadow:inset 0 0 0 1px var(--linea)}
.id-color-tinta{background:var(--tinta);color:#fff}
.id-color-oscuro{background:var(--oscuro);color:#fff}
.id-color-cobalto{background:var(--acento);color:#fff}
.id-color-claro{background:#8fa2f0;color:var(--tinta)}

/* Tipografía */
.id-letra{display:grid;grid-template-columns:auto 1fr;gap:64px;align-items:start}
.id-aa{margin:0;font-size:clamp(160px,20vw,280px);font-weight:500;line-height:.8;letter-spacing:-.05em}
.id-familia{margin:0 0 12px;font-size:32px;font-weight:500;letter-spacing:-.02em}
.id-peso{margin:0 0 12px;padding-top:12px;border-top:1px solid var(--linea);font-size:24px;letter-spacing:-.01em}
.id-peso-500{font-weight:500}
.id-abc{margin-top:28px;font-size:18px;line-height:1.7;letter-spacing:.02em;color:var(--gris-texto);overflow-wrap:anywhere}

/* Fotos y pantallas */
.id-fotos{display:grid;grid-template-columns:1.14fr .8fr;gap:24px;align-items:start}
.id-pantallas{display:grid;grid-template-columns:1fr 280px;gap:24px;align-items:start}
.id-como{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:0;padding:0;list-style:none}
.id-error{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:0;padding:0;list-style:none}

/* El cierre, como en el caso */
.id-cierre{max-width:none;margin-top:128px;padding:140px 32px 96px;background:var(--oscuro);color:#fff;border-radius:50% 50% 0 0 / 80px 80px 0 0;display:flex;flex-direction:column;align-items:center;gap:24px;text-align:center}
.id-cierre p{max-width:16em;margin:0;font-size:clamp(34px,4.6vw,64px);font-weight:500;line-height:1.05;letter-spacing:-.035em}
.id-cierre .boton{min-height:60px;padding:0 32px;gap:12px;background:var(--acento);border-color:var(--acento);color:#fff}
.id-cierre .boton:focus-visible{outline-color:#fff}
.id-cierre .volver{margin:0;color:rgb(255 255 255 / .6)}
.id-cierre .volver:hover,.id-cierre .volver:focus-visible{color:#fff}
.id-cierre ::selection{background:var(--acento);color:#fff}
.identidad ~ .pie{background:var(--oscuro);color:rgb(255 255 255 / .6)}
.identidad ~ .pie .pie-privacidad,.identidad ~ .pie .lema{color:rgb(255 255 255 / .6);text-shadow:none}
@media(hover:hover) and (pointer:fine){.id-cierre .boton:hover{background:#fff;border-color:#fff;color:var(--tinta)}}

@media(max-width:959px){
 .id-dos,.id-letra{grid-template-columns:1fr;gap:32px}
 .id-piezas{grid-template-columns:1fr}
 .id-cuadros{grid-template-columns:1fr 1fr}
 .id-colores{grid-template-columns:1fr 1fr}
 .id-colores li{min-height:200px}
 .id-ficha{grid-template-columns:1fr 1fr}
}
@media(max-width:759px){
 .id-portada{padding:88px 0 72px;border-radius:0 0 50% 50% / 0 0 44px 44px}
 .id-logo{margin-bottom:48px}
 .id-parte{padding-top:88px}
 .id-par,.id-final,.id-fotos,.id-pantallas,.id-como{grid-template-columns:1fr}
 .id-final>div{min-height:220px}
 .id-movil{max-width:320px}
 .id-error{grid-template-columns:1fr}
 .id-texto,.id-veredicto{font-size:19px}
 .id-img{padding:8px;border-radius:22px}
 .id-img img{border-radius:14px}
 .id-cierre{margin-top:88px;padding:104px 24px 72px;border-radius:50% 50% 0 0 / 44px 44px 0 0}
}
@media(max-width:479px){
 .id-colores,.id-cuadros,.id-ficha{grid-template-columns:1fr}
}