/* m-final — vista móvil de «Cómo trabajamos», el Diary y el pie.
   Todo va dentro de media queries: en escritorio no cambia nada. */

/* ================= CÓMO TRABAJAMOS ================= */
@media (max-width:640px){
  .proceso2 .intro2 h2{font-size:clamp(38px,11vw,46px);line-height:1.02;margin:20px 0 20px}
  .proceso2 .intro2 p{font-size:16.5px;line-height:1.6;margin-bottom:30px;max-width:34ch}
  .proceso2 .intro2 .boton{width:100%;justify-content:space-between}
  .proceso2 .dos{gap:52px}

  /* línea de tiempo: más fina y con brillo, los puntos a la altura del número */
  .proceso2 .pasos{padding-left:28px;gap:18px}
  .proceso2 .pasos::before{left:6px;top:46px;bottom:46px;width:2px;
    background:linear-gradient(rgb(143 99 255 / 0),#8f63ff 8%,#6b2bff 92%,rgb(107 43 255 / 0));
    box-shadow:0 0 12px rgb(124 77 255 / .55)}
  .proceso2 .pasos li::before{left:-28px;top:46px;margin-top:-7px;width:14px;height:14px;
    background:#c9b8ff;box-shadow:0 0 0 4px rgb(143 99 255 / .22),0 0 16px #8f63ff}

  /* tarjeta: número y rótulo arriba a la izquierda, icono grande arriba a la
     derecha y el texto a todo el ancho debajo (antes iba en una columna estrecha) */
  .proceso2 .pasos li{
    grid-template-columns:minmax(0,1fr) 112px;
    grid-template-areas:"num img" "txt txt";
    align-items:center;gap:6px 12px;padding:22px 20px 24px;border-radius:20px;
    border-color:rgb(157 123 255 / .18);
    background:
      radial-gradient(120% 80% at 100% 0%,rgb(107 43 255 / .22),transparent 60%),
      linear-gradient(160deg,rgb(34 24 66 / .72),rgb(12 11 18 / .9));
    box-shadow:inset 0 1px 0 rgb(255 255 255 / .05),0 24px 50px -30px rgb(107 43 255 / .55)}
  .proceso2 .p-num{grid-area:num;grid-column:auto;flex-direction:column;align-items:flex-start;gap:10px;
    padding:0;border:0;align-self:center}
  .proceso2 .p-num b{font-size:40px;letter-spacing:-.02em;line-height:.9;
    background:linear-gradient(180deg,#e9e2ff,#8f63ff);-webkit-background-clip:text;background-clip:text;color:transparent}
  .proceso2 .p-num span{font-size:10.5px;letter-spacing:.2em;color:#a98bff;
    padding:6px 10px;border:1px solid rgb(157 123 255 / .3);border-radius:999px;background:rgb(107 43 255 / .1)}
  .proceso2 .pasos img{grid-area:img;justify-self:end;width:112px;height:112px;margin:-10px -8px -6px 0;
    transform:scale(1.32);transform-origin:center}
  .proceso2 .p-txt{grid-area:txt;padding-top:10px;border-top:1px solid rgb(157 123 255 / .14);margin-top:6px}
  .proceso2 .p-txt h3{font-size:23px;line-height:1.15;margin:12px 0 8px}
  .proceso2 .p-txt p{font-size:15.5px;line-height:1.6;color:#c4c3cd}
}
@media (max-width:370px){
  .proceso2 .pasos li{grid-template-columns:minmax(0,1fr) 96px;padding:20px 18px 22px}
  .proceso2 .pasos img{width:96px;height:96px}
  .proceso2 .p-num b{font-size:34px}
}

/* ================= DIARY ================= */
@media (max-width:640px){
  .diary3 h2{font-size:clamp(40px,11.5vw,48px);margin-top:20px}
  .diary3-der{gap:24px}
  .diary3-der p{font-size:16.5px;line-height:1.6}
  .diary3-rejilla{gap:18px}
}
/* tarjetas con la flecha sobre la foto y el texto a todo el ancho: móvil y tableta */
@media (max-width:900px){
  .diary3-rejilla .nota,.diary3-rejilla .nota.grande{border-radius:22px;border-color:rgb(157 123 255 / .16);
    box-shadow:0 30px 60px -36px rgb(107 43 255 / .6)}
  .diary3-rejilla .nota .nota-img,.diary3-rejilla .nota.grande .nota-img{aspect-ratio:4/3}
  /* foto que se funde con la tarjeta, sin corte duro */
  .diary3-rejilla .nota .nota-img::after,.diary3-rejilla .nota.grande .nota-img::after{
    content:"";display:block;position:absolute;top:auto;left:0;right:0;bottom:0;height:38%;
    background:linear-gradient(0deg,rgb(14 13 22 / .95),transparent)}
  /* texto a todo el ancho: la flecha sube a la esquina de la foto */
  .diary3-rejilla .nota .nota-txt,.diary3-rejilla .nota.grande .nota-txt{padding:4px 22px 26px;gap:12px}
  .diary3-rejilla .nota h3,.diary3-rejilla .nota.grande h3{font-size:24px;line-height:1.18}
  .diary3-rejilla .nota p{font-size:15.5px;line-height:1.6;max-width:none}
  .diary3-rejilla .nota-ir,.diary3-rejilla .nota.grande .nota-ir{top:16px;right:16px;bottom:auto;width:46px;height:46px;
    border-color:rgb(255 255 255 / .22);background:rgb(12 10 24 / .45);
    backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
}

/* tableta: las dos notas lado a lado en vez de dos fotos enormes apiladas */
@media (min-width:641px) and (max-width:900px){
  .diary3-rejilla{grid-template-columns:1fr 1fr;gap:18px}
  .diary3-rejilla .nota h3,.diary3-rejilla .nota.grande h3{font-size:22px}
  .diary3-rejilla .nota .nota-txt,.diary3-rejilla .nota.grande .nota-txt{padding:4px 20px 24px}
}

/* ================= PIE ================= */
/* tableta: marca arriba y Servicios · Estudio · Málaga en tres columnas */
@media (min-width:641px) and (max-width:900px){
  .pie2-cols{grid-template-columns:repeat(3,minmax(0,1fr));gap:44px 28px}
}
@media (max-width:640px){
  .pie2{padding-top:72px}
  .pie2-top{gap:30px;padding-bottom:48px}
  .pie2-top h2{font-size:clamp(46px,13.6vw,58px);line-height:.98}
  .pie2-mail{font-size:clamp(21px,6.3vw,27px);gap:14px;width:100%;justify-content:space-between;
    padding:18px 18px 18px 22px;border-radius:999px;border:1px solid rgb(157 123 255 / .28);
    background:linear-gradient(135deg,rgb(107 43 255 / .18),rgb(14 12 24 / .6));background-size:auto;
    box-shadow:0 20px 50px -28px rgb(107 43 255 / .8)}
  .pie2-mail:hover{background-size:auto}
  .pie2-mail .circ{flex:none;width:48px;height:48px;margin:-8px -6px -8px 0;box-shadow:0 0 24px rgb(124 77 255 / .7)}

  .pie2-cols{grid-template-columns:1fr 1fr;gap:40px 20px;padding:52px 0 44px}
  .pie2-marca img{height:30px;margin-bottom:18px}
  .pie2-marca p{font-size:15.5px;max-width:30ch}
  .pie2 h3{margin-bottom:18px}
  .pie2 nav{gap:14px}
  .pie2 nav a{font-size:16px}
  /* Málaga: tarjeta de cristal a todo el ancho con la hora grande */
  .pie2-cols > div:last-child{grid-column:1 / -1;display:grid;grid-template-columns:auto 1fr;align-items:end;gap:6px 22px;
    padding:22px;border-radius:20px;border:1px solid rgb(157 123 255 / .2);
    background:radial-gradient(90% 120% at 0% 0%,rgb(107 43 255 / .2),transparent 60%),rgb(14 12 22 / .55)}
  .pie2-cols > div:last-child h3{grid-column:1 / -1;margin-bottom:10px}
  .pie2-hora{margin:0;display:flex;flex-direction:column;gap:6px;font-size:12px;font-family:var(--mono);letter-spacing:.14em;text-transform:uppercase}
  .pie2-hora b{font-size:46px;margin:0;font-variant-numeric:tabular-nums}
  .pie2-dir{font-size:13.5px;line-height:1.55;justify-self:end;text-align:right}

}
/* barra final (móvil y tableta): legales arriba, copyright y «volver arriba» en la misma fila */
@media (max-width:900px){
  .pie2-bajo{display:grid;grid-template-columns:1fr auto;align-items:center;gap:22px 16px;padding-top:26px}
  .pie2-bajo > span{grid-row:2;font-size:11px;letter-spacing:.08em;line-height:1.5}
  .pie2 .pie2-legal{grid-row:1;grid-column:1 / -1;margin:0;width:auto;gap:12px 20px}
  .pie2-arriba{grid-row:2;grid-column:2;width:48px;height:48px;border-color:rgb(157 123 255 / .4);
    background:rgb(107 43 255 / .14)}
}
@media (max-width:370px){
  .pie2-cols > div:last-child{grid-template-columns:1fr}
  .pie2-dir{justify-self:start;text-align:left}
}

@media (prefers-reduced-motion:reduce){
  .diary3-rejilla .nota,.pie2-mail .circ{transition:none}
}

/* === integrador === */
/* Móvil: menos vacío entre «Cómo trabajamos» y el diary, y aire al final del pie
   para que el botón flotante de juegos no se monte sobre la última fila. */
@media (max-width:640px){
  main > #proceso.proceso2{padding-bottom:56px}
  main > #diary.diary3{padding-top:64px}
  .pie2{padding-bottom:96px}
}

/* ================= RITMO VERTICAL (3-oct) =================
   «Hay demasiados espacios»: las secciones llevaban hasta 160 px arriba y abajo (en escritorio, 345 px de vacío
   entre el último texto de una y el primero de la siguiente; en móvil, ~290). Esto va FUERA de media query a
   propósito: también recorta el escritorio. Lo que tenga una regla propia más específica (#proceso, .sv-escenas,
   .sv-grupo…) la conserva. */
.seccion{padding-block:clamp(64px,7.5vw,112px)}
.pie2{padding-top:clamp(72px,7vw,112px)}
.pie2-top{padding-bottom:clamp(48px,5vw,80px)}
.legal{padding-top:clamp(116px,11vw,160px);padding-bottom:clamp(64px,7vw,104px)}
@media (max-width:640px){.legal{padding-top:108px}}
/* el «compás» de escritorio de pulido.css (104-140 px) baja al mismo de arriba */
@media (min-width:641px){
  main > #servicios,main > .caso,main > .proceso2,main > .diary3{padding-block:clamp(80px,7.5vw,112px)}
  main > .qh{padding-block:clamp(72px,7vw,104px)}
}
/* el botón de juegos se aparta mientras taparía los botones del hero (lo decide un script de index.html) */
html.ovni-aparte:not(.modo-ovni) .ovni-boton{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s,visibility 0s .3s}
html:not(.ovni-aparte) .ovni-boton{transition:opacity .3s}
@media (prefers-reduced-motion:reduce){html .ovni-boton{transition:none}}
/* legales en una sola fila también a 360 px: el hueco entre enlaces ya lo dan sus propios rellenos */
@media (max-width:900px){
  .pie2 .pie2-bajo .pie2-legal{gap:0;flex-wrap:nowrap;justify-content:space-between;justify-self:stretch}
}
@media (max-width:380px){
  .pie2 .pie2-bajo .pie2-legal a{padding:9px 12px}
}