/* El cuerpo desmontado · elcuerpodesmontado.es (maqueta 18/10/2026). Misma identidad que los reels: ciruela, nácar,
   coral y menta; Bricolage Grotesque + Atkinson Hyperlegible Next; pastillas redondeadas y silueta localizadora. */
@font-face { font-family: 'Bricolage'; src: url('fuentes/BricolageGrotesque-opsz-wdth-wght.ttf') format('truetype');
             font-weight: 200 800; font-stretch: 75% 100%; font-display: swap; }
@font-face { font-family: 'Atkinson'; src: url('fuentes/AtkinsonHyperlegibleNext-wght.ttf') format('truetype');
             font-weight: 200 800; font-display: swap; }
:root { --ciruela: #1B0F24; --ciruela2: #2E1A3B; --ciruela3: #3E2248; --nacar: #F7ECE6; --coral: #FF5C74;
        --menta: #5FE3C0; --gris: #CDBFD6; --borde: rgba(247,236,230,.18); }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--ciruela); color: var(--nacar); font-family: 'Atkinson', system-ui, sans-serif;
       font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased;
       background-image: radial-gradient(ellipse 80% 50% at 70% 0%, rgba(74,42,85,.75), transparent 70%); }
a { color: var(--menta); }
h1, h2, h3 { font-family: 'Bricolage', sans-serif; font-weight: 800; font-stretch: 88%; letter-spacing: -0.015em;
             line-height: 1.04; margin: 0 0 .5em; }
h1 { font-size: clamp(40px, 7vw, 76px); }
h2 { font-size: clamp(28px, 4vw, 40px); }
h3 { font-size: 20px; line-height: 1.12; }
.ac { color: var(--coral); }
main { max-width: 1160px; margin: 0 auto; padding: 0 16px; }
section { padding: 48px 0; }

.barra { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between;
         gap: 12px; padding: 12px 16px; background: rgba(27,15,36,.86); backdrop-filter: blur(10px);
         border-bottom: 1px solid var(--borde); }
.marca { font-family: 'Bricolage', sans-serif; font-weight: 800; letter-spacing: .14em; font-size: 13px;
         color: var(--nacar); text-decoration: none; white-space: nowrap; }
.punto { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--coral);
         margin-right: 8px; vertical-align: 1px; box-shadow: 0 0 10px var(--coral); }
.barra nav { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.barra nav a { color: var(--nacar); text-decoration: none; font-size: 14px; padding: 4px 10px; border-radius: 999px;
               border: 1px solid var(--borde); }
.barra nav a:hover { border-color: var(--menta); }

.kicker { margin: 0 0 14px; display: flex; gap: 8px; flex-wrap: wrap; }
.kicker .f, .ep .f { display: inline-block; background: var(--coral); color: #fff; font-family: 'Bricolage', sans-serif;
                     font-weight: 800; font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
                     padding: 3px 11px; border-radius: 999px; }
.kicker .p, .ep .p { display: inline-block; color: var(--menta); font-family: 'Bricolage', sans-serif; font-weight: 800;
                     font-size: 12px; letter-spacing: .12em; padding: 3px 0; }
.intro { font-size: 19px; color: #EADDEB; max-width: 34em; }
.aviso-corto { display: inline-block; font-size: 14px; color: var(--menta); border: 1px solid rgba(95,227,192,.45);
               border-radius: 999px; padding: 3px 12px; }
.botones { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
.boton { display: inline-block; background: var(--coral); color: #fff; text-decoration: none; font-weight: 700;
         padding: 11px 20px; border-radius: 999px; }
.boton.sec { background: transparent; color: var(--nacar); border: 1.5px solid var(--borde); }

.hero { display: grid; grid-template-columns: 1.15fr .85fr; gap: 40px; align-items: center; padding-top: 56px; }
.hero-vid, .reel, .bucle { margin: 0; }
.hero-vid video, .reel video, .bucle video { width: 100%; max-width: 380px; aspect-ratio: 9 / 16; display: block;
        margin: 0 auto; border-radius: 22px; background: var(--ciruela2); box-shadow: 0 30px 80px rgba(0,0,0,.45);
        border: 1px solid var(--borde); object-fit: cover; }
figcaption { text-align: center; font-size: 13px; color: var(--gris); margin-top: 10px; }

.mapa { display: grid; grid-template-columns: 300px 1fr; gap: 40px; align-items: center;
        border-top: 1px solid var(--borde); }
.mapa-sil { position: relative; width: 220px; margin: 0 auto; aspect-ratio: 40 / 86; }
svg.grande { width: 100%; height: 100%; }
svg path { fill: rgba(247,236,230,.12); stroke: rgba(247,236,230,.8); stroke-width: .5; }
svg .zona { fill: var(--menta); }
svg.todo path { fill: rgba(95,227,192,.38); stroke: var(--menta); }
.zp { position: absolute; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; border: 2px solid var(--ciruela);
      background: var(--nacar); box-shadow: 0 0 0 2px var(--nacar); cursor: pointer; padding: 0; }
.zp span { display: none; }
.zp:hover span, .zp.activo span { display: block; position: absolute; left: 20px; top: -6px; white-space: nowrap;
      background: var(--ciruela2); padding: 2px 9px; border-radius: 999px; font-size: 13px; color: var(--nacar); }
.zp.activo, .zp:hover { background: var(--menta); box-shadow: 0 0 0 2px var(--menta), 0 0 14px var(--menta); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.chip { font: inherit; font-size: 14px; color: var(--nacar); background: transparent; border: 1px solid var(--borde);
        border-radius: 999px; padding: 4px 12px; cursor: pointer; }
.chip.activo { background: var(--menta); color: var(--ciruela); border-color: var(--menta); font-weight: 700; }
.cuenta b { color: var(--coral); font-size: 1.3em; }

.nota { color: var(--gris); font-size: 15px; }
.rejilla { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 16px;
           grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.ep { background: var(--ciruela2); border: 1px solid var(--borde); border-radius: 20px; overflow: hidden;
      display: flex; flex-direction: column; }
.ep > a { color: inherit; text-decoration: none; display: flex; flex-direction: column; height: 100%; }
.ep img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; object-position: center 55%; display: block; }
.ep .tx { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.ep .tx .f { align-self: flex-start; font-size: 10.5px; }
.ep h3 { margin: 4px 0 2px; }
.ep p { margin: 0; font-size: 15px; color: #E3D6E6; }
.ep .cuando { margin-top: auto; padding-top: 8px; font-size: 13px; color: var(--gris); }
.ep.abierto { border-color: rgba(255,92,116,.7); box-shadow: 0 0 0 1px rgba(255,92,116,.35); }
.ep.abierto .cuando { color: var(--menta); }
.ep.cerrado .bloq { aspect-ratio: 1 / 1; position: relative; display: grid; place-items: center;
                    background: radial-gradient(circle at 50% 40%, var(--ciruela3), var(--ciruela) 75%); }
.ep.cerrado .bloq svg.sil { width: 38%; height: auto; opacity: .6; }
.ep.cerrado .candado { position: absolute; right: 12px; top: 12px; width: 34px; height: 34px; border-radius: 50%;
                       background: rgba(27,15,36,.85); display: grid; place-items: center; border: 1px solid var(--borde); }
.ep.cerrado .candado svg { width: 17px; height: 17px; }
.ep.cerrado .candado path { fill: var(--nacar); stroke: none; }
.ep.cerrado h3, .ep.cerrado p { opacity: .82; }
.ep.oculto { display: none; }

.formatos ul { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.formatos li { border: 1px solid var(--borde); border-radius: 18px; padding: 14px 16px; display: flex; flex-direction: column; gap: 3px; }
.formatos b { font-family: 'Bricolage', sans-serif; font-size: 19px; color: var(--coral); }
.formatos span { color: #E3D6E6; font-size: 15px; }

/* ficha */
.ficha-hero { display: grid; grid-template-columns: 1.2fr .8fr; gap: 40px; align-items: center; padding-top: 56px; }
.meta { display: flex; align-items: center; gap: 10px; color: var(--gris); font-size: 15px; }
svg.mini { width: 26px; height: 56px; flex: none; }
.paradas ol { list-style: none; padding: 0; margin: 0; display: grid; gap: 18px; }
.paradas li { display: grid; grid-template-columns: 200px 1fr; gap: 22px; align-items: center; background: var(--ciruela2);
              border: 1px solid var(--borde); border-radius: 22px; padding: 14px; }
.paradas figure { margin: 0; }
.paradas img { width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 14px; display: block; }
.paradas .n { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
              background: var(--coral); color: #fff; font-family: 'Bricolage', sans-serif; font-weight: 800; margin-bottom: 8px; }
.paradas p { margin: 0; color: #EADDEB; }
.mito { display: grid; grid-template-columns: 1fr 300px; gap: 10px 40px; align-items: center;
        border: 1.5px solid rgba(95,227,192,.5); border-radius: 26px; padding: 30px; margin: 30px 0;
        background: linear-gradient(135deg, rgba(95,227,192,.08), transparent 60%); }
.mito .sello { grid-column: 1 / -1; justify-self: start; background: var(--menta); color: var(--ciruela); font-weight: 800;
               font-family: 'Bricolage', sans-serif; letter-spacing: .1em; text-transform: uppercase; font-size: 12px;
               padding: 3px 11px; border-radius: 999px; }
.mito { align-items: start; }
.mito .sello { grid-row: 1; }
.mito h2 { grid-column: 1; grid-row: 2; margin-top: 6px; }
.mito p { grid-column: 1; grid-row: 3; margin-top: 0; }
.mito .bucle { grid-column: 2; grid-row: 1 / span 3; align-self: center; }
.mito b { color: var(--menta); }
.cifras ul { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.cifras li { border: 1px solid var(--borde); border-radius: 20px; padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; }
.cifras li b { font-family: 'Bricolage', sans-serif; font-size: 34px; color: var(--coral); line-height: 1; }
.cifras li span { color: #EADDEB; }
.cifras li a { font-size: 13px; }
.fuentes ol { padding-left: 20px; }
.fuentes li { margin: 6px 0; }
.sig { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 24px 0 56px;
       border-top: 1px solid var(--borde); color: var(--gris); }

.pie { border-top: 1px solid var(--borde); padding: 28px 16px 40px; max-width: 1160px; margin: 0 auto; color: var(--gris); font-size: 14px; }
.pie .aviso { color: var(--nacar); border-left: 3px solid var(--coral); padding-left: 12px; }
.pie .ia { font-family: 'Bricolage', sans-serif; font-weight: 700; letter-spacing: .1em; font-size: 12px; }

@media (max-width: 820px) {
  body { font-size: 16px; }
  section { padding: 36px 0; }
  .hero, .ficha-hero, .mapa { grid-template-columns: 1fr; gap: 26px; }
  .hero-vid video, .reel video { max-width: 300px; }
  .mapa-sil { width: 160px; }
  .paradas li { grid-template-columns: 110px 1fr; gap: 14px; padding: 10px; }
  .mito { grid-template-columns: 1fr; padding: 22px 18px; }
  .mito .sello, .mito h2, .mito p, .mito .bucle { grid-column: 1; grid-row: auto; }
  .mito .bucle video { max-width: 240px; }
  .barra nav a { font-size: 13px; padding: 3px 8px; }
  .marca { font-size: 11px; letter-spacing: .1em; }
}
@media (max-width: 420px) {
  .barra { flex-direction: column; align-items: flex-start; gap: 8px; }
  .rejilla { grid-template-columns: 1fr 1fr; gap: 10px; }
  .ep .tx { padding: 10px 11px 12px; }
  .ep h3 { font-size: 16px; }
  .ep p { font-size: 13.5px; }
  .ep .cuando { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }