/* Sobre mí: una libreta verde oliva sobre chocolate que se abre al tocarla (sobre-mi.js).
   Estados (clases en .libreta, las pone sobre-mi.js; html.js sale en el <head>, así no hay salto al cargar):
     · cerrada: .js .libreta sin is-abierta. Se ve solo la portada, centrada y algo más pequeña.
     · girando: is-girando. La portada gira desde el lomo; las páginas aún sin contenido.
     · abierta: is-abierta (sin is-girando). Doble página con la foto y la historia; crece con el texto.
   Cerrada, da saltitos y lleva «ábreme» en la portada. Sin JavaScript (html sin .js) se ve directamente abierta. Con movimiento reducido no hay giro: fundido. */

.libreta-escena {
  /* Ancho de una página (la libreta abierta mide dos) y alto; cerrada se ve a --cerrada */
  --W: min(40vw, calc((100vh - 190px) * 0.64), 540px);
  --W: min(40vw, calc((100svh - 190px) * 0.64), 540px);
  --H: calc(var(--W) / 0.64);
  --cerrada: 0.8;
  --oliva: #6d6847;
  --tablero: #3b3826;
  --papel: #f2ecdd;                /* el crema liso de una Moleskine */
  --tinta: #2F2217;
  --dur: 1.15s;
  --curva: cubic-bezier(0.55, 0.06, 0.22, 1);
  position: relative;
  overflow: hidden;                 /* la portada, al girar, no crea scroll lateral */
  display: grid;
  justify-items: center;
  padding: 5.5rem 1.25rem 6rem;
  color: var(--marfil-texto);
  background: transparent;           /* la pared la pone <main>, común con «Mi forma de trabajar» */
}
/* Fotos apagadas alrededor de la libreta (ordenador), para que la pared no se vea tan vacía */
.libreta-escena__fotos { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.libreta-escena__foto { position: absolute; display: block; opacity: 0.32; filter: grayscale(1) sepia(0.4) brightness(0.9); }
/* Cada hueco lleva varias fotos apiladas que se van turnando con un fundido lento (sobre-mi.js) */
.libreta-escena__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.6s ease; }
.libreta-escena__foto img.is-on { opacity: 1; }
.libreta-escena__foto--a { left: 6vw; top: 9%; width: 14vw; aspect-ratio: 3 / 4; height: auto; }
.libreta-escena__foto--b { right: 6.5vw; top: 30%; width: 12vw; aspect-ratio: 1; height: auto; }
.libreta-escena__foto--c { left: 13vw; bottom: 9%; width: 9.5vw; aspect-ratio: 4 / 5; height: auto; }
.libreta-escena__foto--d { right: 15vw; bottom: 6%; width: 11vw; aspect-ratio: 4 / 3; height: auto; }
.libreta { z-index: 1; }
@media (max-width: 699px) { .libreta-escena__fotos { display: none; } }

/* Una sola pared para la libreta y «Mi forma de trabajar», así no hay corte entre las dos */
main.sobre {
  background:
    linear-gradient(90deg, rgb(22 13 10 / 0.32), transparent 22%, transparent 78%, rgb(22 13 10 / 0.32)),
    #2F2217 url("../img/pared.jpg") 0 0 / 512px 512px;
}

/* Sin las marcas de doblez del papel (asomaban junto al logo) */
body.page-sobre::before,
body.page-sobre::after { display: none; }

/* --- La libreta ---------------------------------------------------------------------------------- */
.libreta { position: relative; width: calc(var(--W) * 2); perspective: 2600px; }
.libreta__cuerpo {
  position: relative;
  pointer-events: none;              /* en 3D el cuerpo quedaba delante de las páginas y se tragaba los clics */
  transform-style: preserve-3d;
  transform-origin: 50% 50%;          /* cerrada, queda centrada en el marrón (también en alto) */
  transition: transform var(--dur) var(--curva);
}
.libreta__cuerpo > * { pointer-events: auto; }
.libreta__cuerpo > .libreta__goma, .libreta__cuerpo > .libreta__cinta, .libreta__cuerpo > .libreta__tablero { pointer-events: none; }
/* Cerrada: solo la mitad derecha (la portada), centrada y algo más pequeña */
.js .libreta:not(.is-abierta) .libreta__cuerpo { transform: scale(var(--cerrada)) translateX(-25%); }
/* Mientras espera cerrada, da dos saltitos de vez en cuando, como llamando */
@keyframes libreta-saltitos {
  0%, 60%, 100% { translate: 0 0; animation-timing-function: ease-out; }
  66% { translate: 0 -16px; animation-timing-function: ease-in; }
  72% { translate: 0 0; animation-timing-function: ease-out; }
  77% { translate: 0 -7px; animation-timing-function: ease-in; }
  82% { translate: 0 0; }
}
.js .libreta:not(.is-abierta):not(.is-girando) .libreta__cuerpo { animation: libreta-saltitos 3.2s 1s infinite; }

/* Cartón de dentro de las tapas (asoma alrededor de las páginas) */
.libreta__tablero {
  position: absolute; top: 0; bottom: 0; width: 50%;
  transform: translateZ(-2px);
  background: var(--tablero) var(--texture-grain);
  box-shadow: 0 2px 3px rgb(8 4 2 / 0.4), 0 24px 50px -16px rgb(8 4 2 / 0.7), 0 50px 90px -40px rgb(8 4 2 / 0.6);
}
.libreta__tablero--izq { left: 0; border-radius: 13px 3px 3px 13px; }
.libreta__tablero--der { left: 50%; border-radius: 3px 13px 13px 3px; }

/* Páginas */
.libreta__paginas {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: minmax(0, 1fr);   /* las páginas miden lo que la libreta, no lo que su texto */
  min-height: var(--H);
  transform: translateZ(-1px);
  outline: none;
  transition: height 0.36s ease;
}
.libreta__pagina { position: relative; display: grid; min-height: 0; margin: calc(var(--H) * 0.022) 0; }
.libreta__pagina--izq { margin-left: calc(var(--W) * 0.028); border-radius: 12px 0 0 12px; box-shadow: -1px 1px 0 #e6dfcd, -2px 2px 0 #d9d0bb, -3px 3px 0 #cdc3ac, -4px 4px 0 #c2b79e; }
.libreta__pagina--der { margin-right: calc(var(--W) * 0.028); border-radius: 0 12px 12px 0; box-shadow: 1px 1px 0 #e6dfcd, 2px 2px 0 #d9d0bb, 3px 3px 0 #cdc3ac, 4px 4px 0 #c2b79e; }
/* El papel: como el de una Moleskine, crema liso, con un grano muy fino y las esquinas de fuera
   redondeadas (las hojas de debajo asoman en el canto) */
.libreta__pagina::before,
.libreta__papel {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(140% 110% at 50% 40%, transparent 65%, rgb(150 125 85 / 0.09) 100%),
    linear-gradient(rgb(242 236 221 / 0.82), rgb(242 236 221 / 0.82)),
    var(--texture-grain),
    var(--papel);
}
.libreta__papel { border-radius: 12px 0 0 12px; }
/* Cosido del lomo: tres puntadas de hilo, como en un cuaderno cosido */
.libreta__paginas::after {
  content: ""; position: absolute; z-index: 2; left: calc(50% - 1px); width: 2px;
  top: calc(var(--H) * 0.13); bottom: calc(var(--H) * 0.13);
  background: repeating-linear-gradient(180deg, transparent 0 4%, #d6bf86 4% 28%, transparent 28% 33.34%);
  border-radius: 1px;
  filter: drop-shadow(1px 0 0 rgb(70 50 25 / 0.55)) drop-shadow(-0.5px 0 0 rgb(255 250 235 / 0.6));
  pointer-events: none;
}
.js .libreta:not(.is-abierta) .libreta__paginas::after,
.libreta.is-girando .libreta__paginas::after { visibility: hidden; }
/* Pliegue central */
.libreta__pagina::after { content: ""; position: absolute; top: 0; bottom: 0; width: 14%; pointer-events: none; }
.libreta__pagina--izq::after { right: 0; background: linear-gradient(to left, rgb(70 48 30 / 0.24), rgb(70 48 30 / 0.06) 40%, transparent); }
.libreta__pagina--der::after { left: 0; background: linear-gradient(to right, rgb(70 48 30 / 0.28), rgb(70 48 30 / 0.07) 40%, transparent); }

.libreta__contenido { position: relative; z-index: 1; min-height: 0; transition: opacity 0.5s ease, translate 0.5s ease; }
/* Izquierda: la foto */
.libreta__pagina--izq .libreta__contenido { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 10% 11% 11%; }   /* la foto y el texto, juntos y centrados en la página */
.libreta__foto { flex: none; margin: 0; width: 64%; rotate: -0.6deg; }
/* Con texto debajo, la foto algo más pequeña */
.libreta__contenido:has(.libreta__texto--izq:not([hidden])) .libreta__foto { width: 42%; }
.libreta__foto img { display: block; width: 100%; height: auto; box-shadow: 0 1px 2px rgb(20 12 6 / 0.35), 0 8px 16px -8px rgb(20 12 6 / 0.5); }
/* Derecha: la historia, toda a mano (texto real y seleccionable). Al final, la firma y, en la
   esquina de abajo a la derecha, la flecha para cerrar */
.libreta__texto {
  align-self: stretch;
  display: flex; flex-direction: column;
  padding: 11% 10% 6% 10%;
  font: 400 clamp(1rem, calc(var(--W) * 0.042), 1.34rem) / 1.62 "La Belle Aurore", cursive;   /* pluma fina, ligada */
  color: var(--tinta);
}
.libreta__texto p { margin: 0; }
.libreta__texto p + p { margin-top: 0.85em; }
.libreta__texto .libreta__firma { margin-top: 1.2em; text-align: right; font-size: 1.15em; }
/* La historia se va escribiendo (sobre-mi.js): cada letra aparece con un fundido corto, como tinta */
.libreta.is-por-escribir .libreta__letra,
.polaroid.is-por-escribir .libreta__letra { opacity: 0; transition: opacity 0.22s ease; }
.libreta.is-por-escribir .libreta__letra.is-escrita,
.polaroid.is-por-escribir .libreta__letra.is-escrita { opacity: 1; }
.libreta__entera { user-select: none; -webkit-user-select: none; }

/* En móvil va una versión más corta de la historia (sobre_mi.parrafos_movil) */
.libreta__solo-movil { display: none; }
@media (max-width: 699px) {
  .libreta__solo-pc { display: none; }
  .libreta__solo-movil { display: block; }
}
/* Los párrafos que pasan a la página de la izquierda, bajo la foto */
.libreta__texto--izq { align-self: stretch; display: block; padding: 2.6em 0 0; }
.libreta__texto--izq[hidden] { display: none; }
/* En ordenador la libreta abierta mantiene su tamaño: el texto se reparte entre las dos páginas */
.libreta.is-midiendo .libreta__paginas,
.libreta.is-ajustada .libreta__paginas { height: var(--H); overflow: hidden; }

/* Flechas dibujadas (abrir y cerrar) */
.libreta__flecha { display: block; width: 100%; height: auto; overflow: visible; }
.libreta__flecha path { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }

/* Cinta marcadora, colgando junto al lomo */
.libreta__cinta {
  position: absolute; z-index: 0;
  left: calc(50% + var(--W) * 0.035);
  top: calc(100% - var(--H) * 0.03);
  width: calc(var(--W) * 0.028);
  height: calc(var(--H) * 0.17);
  transform: translateZ(-1.5px);      /* entre el cartón y las páginas: asoma por debajo */
  background: linear-gradient(90deg, #6f5d3e, #95815b 45%, #6c5a3c);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 90%, 0 100%);
}

/* --- La portada ------------------------------------------------------------------------------------ */
.libreta__tapa {
  position: absolute; z-index: 3; top: 0; bottom: 0; left: 50%; width: 50%;
  transform-origin: 0 50%;               /* gira desde el lomo */
  transform-style: preserve-3d;
  transform: rotateY(-180deg);
  visibility: hidden;
  cursor: pointer;
  transition: transform var(--dur) var(--curva) 0.12s;
  -webkit-tap-highlight-color: transparent;
}
.js .libreta:not(.is-abierta) .libreta__tapa { transform: rotateY(0deg); visibility: visible; }
.libreta.is-girando .libreta__tapa { visibility: visible; }
.libreta__tapa-frente,
.libreta__tapa-dorso {
  position: absolute; inset: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
/* Por fuera: verde oliva con textura sutil, el filo de las hojas junto al lomo, sombra de objeto real */
.libreta__tapa-frente {
  border-radius: 3px 13px 13px 3px;
  background:
    linear-gradient(90deg, #d6cdab 0, #cbc19d 1.6%, rgb(0 0 0 / 0.28) 1.6%, rgb(0 0 0 / 0.1) 3.2%, rgb(255 255 255 / 0.06) 4.2%, transparent 7%),
    radial-gradient(120% 90% at 35% 25%, rgb(255 255 255 / 0.07), transparent 60%),
    linear-gradient(180deg, rgb(255 255 255 / 0.03), rgb(0 0 0 / 0.08)),
    var(--oliva);
  box-shadow:
    inset -1px 0 0 rgb(255 255 255 / 0.06), inset 0 -2px 4px rgb(0 0 0 / 0.15),
    0 2px 3px rgb(8 4 2 / 0.4), 0 24px 50px -16px rgb(8 4 2 / 0.7), 0 50px 90px -40px rgb(8 4 2 / 0.6);
}
.libreta__tapa-frente::before {     /* textura sutil de la tela, sin que se vea granulada */
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: var(--texture-grain); opacity: 0.28; mix-blend-mode: multiply;
}
.libreta__tira {
  position: absolute; left: 38.5%; top: 16.6%; width: 24.6%; height: auto;
  border: 2px solid #141110;
  box-shadow: 0 1px 2px rgb(10 6 3 / 0.45);
}
/* Abrir: una flecha hacia la derecha bajo las fotos, centrada con ellas, que empuja suave */
@keyframes libreta-empuja { 0%, 100% { translate: -50% 0; } 50% { translate: calc(-50% + 6px) 0; } }
.libreta__abreme {
  position: absolute; left: 50.8%; top: 71%;
  translate: -50% 0;
  width: 19%;
  padding: 0.6rem 0.2rem;
  border: 0;
  background: none;
  color: var(--marfil-texto);
  cursor: pointer;
  animation: libreta-empuja 1.6s ease-in-out infinite;
}
.libreta__abreme:focus-visible { outline: 1px solid var(--marfil-texto); outline-offset: 4px; border-radius: 4px; }

/* Por dentro: el cartón con la primera página, en blanco (la foto aparece después, sin reflejarse) */
.libreta__tapa-dorso {
  transform: rotateY(180deg);
  border-radius: 13px 3px 3px 13px;
  background: var(--tablero) var(--texture-grain);
}
.libreta__papel { inset: calc(var(--H) * 0.022) 0 calc(var(--H) * 0.022) calc(var(--W) * 0.028); }
/* Luz que acompaña el giro: la portada se oscurece al levantarse y el dorso se aclara al posarse */
.libreta__tapa-frente::after,
.libreta__tapa-dorso::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(90deg, rgb(10 6 3 / 0.55), rgb(10 6 3 / 0.2));
  transition: opacity var(--dur) var(--curva) 0.12s;
}
.libreta__tapa-frente::after { opacity: 1; }
.libreta__tapa-dorso::after { opacity: 0; }
.js .libreta:not(.is-abierta) .libreta__tapa-frente::after { opacity: 0; }
.js .libreta:not(.is-abierta) .libreta__tapa-dorso::after { opacity: 1; }

/* Goma elástica: se aparta antes de abrir */
.libreta__goma {
  position: absolute; z-index: 4;
  top: -0.6%; bottom: -0.6%;
  left: calc(50% + var(--W) * 0.83);
  width: calc(var(--W) * 0.05);
  transform: translateZ(2px);
  border-radius: 2px;
  background:
    linear-gradient(90deg, rgb(0 0 0 / 0.35), transparent 30%, rgb(255 255 255 / 0.06) 55%, rgb(0 0 0 / 0.3)),
    repeating-linear-gradient(90deg, #2b2521 0 1.5px, #3d362e 1.5px 3px);
  box-shadow: 1px 0 2px rgb(0 0 0 / 0.45), -1px 0 1px rgb(0 0 0 / 0.3);
  opacity: 0;
  translate: calc(var(--W) * 0.12) 0;
  transition: opacity 0.3s ease, translate 0.3s ease;
  pointer-events: none;
}
.js .libreta:not(.is-abierta) .libreta__goma { opacity: 1; translate: 0 0; transition-delay: 0.9s; }

/* Mientras está cerrada o girando: sin contenido, sin la mitad izquierda y al alto de la portada */
.js .libreta:not(.is-abierta) .libreta__paginas,
.libreta.is-girando .libreta__paginas { height: var(--H); overflow: hidden; }
.js .libreta:not(.is-abierta) .libreta__pagina--izq,
.js .libreta:not(.is-abierta) .libreta__tablero--izq,
.libreta.is-girando .libreta__pagina--izq,
.libreta.is-girando .libreta__tablero--izq { visibility: hidden; }
.js .libreta:not(.is-abierta) .libreta__contenido,
.libreta.is-girando .libreta__contenido,
.libreta.is-ocultando .libreta__contenido { opacity: 0; translate: 0 6px; }


/* Cerrar: abajo a la derecha de la página, solo una flecha hacia atrás */
.libreta__cerrar {
  margin-top: auto;
  align-self: flex-end;
  display: inline-flex; align-items: center; gap: 0.45em;
  padding: 0.9em 0.2em 0.2em;
  border: 0;
  background: none;
  color: var(--tinta);
  font: inherit; font-size: 0.92em;
  cursor: pointer;
  opacity: 0.8;
  transition: opacity 0.25s ease, translate 0.25s ease;
}
.libreta__cerrar .libreta__flecha { width: 3.2em; }
.libreta__cerrar:hover, .libreta__cerrar:focus-visible { opacity: 1; translate: -3px 0; }
.libreta__cerrar:focus-visible { outline: 1px dashed var(--tinta); outline-offset: 4px; }
.libreta__cerrar[hidden] { display: none; }
html:not(.js) .libreta__cerrar,
html:not(.js) .libreta__abreme { display: none; }

/* --- Móvil: una libreta cosida arriba, de una sola hoja (como un bloc). La portada se levanta
       hacia arriba desde el canto de arriba y, debajo, una única página: la foto y el texto seguidos -- */
@media (max-width: 699px) {
  .libreta-escena {
    --W: 88vw;
    --H: min(calc(var(--W) / 0.68), calc((100vh - 160px) / 0.72));
    --H: min(calc(var(--W) / 0.68), calc((100svh - 160px) / 0.72));
    --cerrada: 0.72;
    --cinta-movil: #1d222c;
    padding: 2.4rem 6vw 3.5rem;
  }
  .libreta { width: var(--W); }
  .js .libreta:not(.is-abierta) .libreta__cuerpo { transform: scale(var(--cerrada)); }

  /* Cartón: recto arriba (el lomo) y redondeado abajo */
  .libreta__tablero--izq { display: none; }
  .libreta__tablero--der { left: 0; width: 100%; border-radius: 3px 3px 13px 13px; }

  /* Una sola hoja: la foto arriba y el texto debajo, sin corte entre medias */
  .libreta__paginas { grid-template-columns: 1fr; grid-template-rows: auto auto; }
  .js .libreta:not(.is-abierta) .libreta__pagina--izq,
  .libreta.is-girando .libreta__pagina--izq { visibility: visible; }
  .libreta__pagina--izq { margin: calc(var(--W) * 0.05) calc(var(--W) * 0.03) 0; border-radius: 0; box-shadow: none; }
  .libreta__pagina--der { margin: 0 calc(var(--W) * 0.03) calc(var(--W) * 0.03); border-radius: 0 0 12px 12px; box-shadow: none; }
  .libreta__pagina::after { display: none; }
  /* Un solo papel detrás de la foto y el texto: así se ven en la misma hoja, sin costura */
  .libreta__pagina::before { display: none; }
  .libreta__paginas::before {
    content: ""; position: absolute;
    inset: calc(var(--W) * 0.05) calc(var(--W) * 0.03) calc(var(--W) * 0.03);
    border-radius: 0 0 12px 12px;
    background: linear-gradient(rgb(242 236 221 / 0.82), rgb(242 236 221 / 0.82)), var(--texture-grain), var(--papel);
    /* el canto de las hojas de debajo, a los lados y abajo */
    box-shadow: 1px 0 0 #e6dfcd, 2px 0 0 #d9d0bb, -1px 0 0 #e6dfcd, -2px 0 0 #d9d0bb,
                0 1px 0 #e6dfcd, 0 2px 0 #d9d0bb, 0 3px 0 #cdc3ac, 0 4px 0 #c2b79e;
  }
  /* Cosido arriba: una fila de puntadas junto al lomo */
  .libreta__paginas::after {
    top: calc(var(--W) * 0.05 + 0.7rem); bottom: auto; left: 14%; right: 14%; width: auto; height: 1.5px;
    background: repeating-linear-gradient(90deg, transparent 0 3%, #d6bf86 3% 27%, transparent 27% 33.34%);
  }
  .libreta__pagina--izq .libreta__contenido { padding: 12% 12% 5%; }
  .libreta__foto { width: 50%; }
  .libreta__texto { padding: 6% 8% 5%; font-size: 1.12rem; line-height: 1.5; }
  .libreta__texto p + p { margin-top: 0.5em; }
  .libreta__texto .libreta__firma { margin-top: 0.8em; }
  .libreta__cerrar { padding-top: 0.8em; }

  /* La portada: cosida arriba (sin goma ni filo de hojas al lado), se levanta hacia arriba y se apaga */
  .libreta__tapa {
    left: 0; width: 100%;
    transform-origin: 50% 0;
    transform: rotateX(180deg);
    transition: transform var(--dur) var(--curva) 0.12s, opacity 0.42s ease 0.3s;
  }
  .js .libreta:not(.is-abierta) .libreta__tapa { transform: rotateX(0deg); opacity: 1; transition-delay: 0.12s, 0s; }
  .libreta.is-abierta .libreta__tapa { opacity: 0; }
  .libreta__tapa-frente {
    border-radius: 3px 3px 13px 13px;
    background:
      linear-gradient(180deg, rgb(0 0 0 / 0.26) 0, rgb(0 0 0 / 0.08) 1.6%, rgb(255 255 255 / 0.06) 2.4%, transparent 5%),
      radial-gradient(120% 90% at 35% 25%, rgb(255 255 255 / 0.07), transparent 60%),
      linear-gradient(180deg, rgb(255 255 255 / 0.03), rgb(0 0 0 / 0.08)),
      var(--oliva);
  }
  .libreta__tapa-frente::after { background: linear-gradient(180deg, rgb(10 6 3 / 0.55), rgb(10 6 3 / 0.2)); }
  .libreta__goma { display: none; }
  /* Flechas más pequeñas: la de abrir mira a la derecha y la de cerrar, hacia atrás (a la izquierda) */
  .libreta__abreme { top: 72%; width: 12%; }
  .libreta__cerrar { padding: 0.8em 0.3em 0.3em; }
  .libreta__cerrar .libreta__flecha { width: 1.9em; }
  /* La cinta asoma por el lado izquierdo, arriba */
  .libreta__cinta {
    top: calc(var(--H) * 0.035); left: calc(var(--W) * -0.1);
    width: calc(var(--W) * 0.13); height: calc(var(--W) * 0.035);
    background: linear-gradient(180deg, #2b313c, var(--cinta-movil) 60%, #12161d);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 14% 50%);
  }
}

/* --- Móvil: una polaroid en lugar de la libreta. Por delante, la foto con su marco blanco y una
       flecha abajo; al tocarla da la vuelta y por detrás se escribe la frase (sobre-mi.js) ---------- */
.polaroid { display: none; }
@media (max-width: 699px) {
  .libreta { display: none; }
  .polaroid { display: block; width: min(56vw, 240px); margin: 2.4rem auto 1rem; perspective: 1600px; }
}
.polaroid__carta {
  position: relative;
  aspect-ratio: 843 / 979;               /* las medidas de tu polaroid */
  transform-style: preserve-3d;
  transition: transform 0.95s cubic-bezier(0.45, 0.05, 0.25, 1);
}
.polaroid.is-girada .polaroid__carta { transform: rotateY(180deg); }
.polaroid__cara {
  position: absolute; inset: 0;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  border-radius: 2px;
  background: var(--fondo-papel);            /* el mismo papel que el fondo de la web (cabecera y pie) */
  background-size: var(--fondo-papel-size);
  box-shadow: 0 1px 2px rgb(8 4 2 / 0.4), 0 20px 40px -14px rgb(8 4 2 / 0.7);
}
.polaroid__cara--dorso { transform: rotateY(180deg); display: grid; place-items: center; padding: 9% 8% 21%; }
/* La cara que no se ve no recibe toques */
.polaroid.is-girada .polaroid__cara--frente,
.polaroid:not(.is-girada) .polaroid__cara--dorso { pointer-events: none; }
.polaroid__foto {
  position: absolute; left: 4.6%; top: 4.7%; width: 90.8%; height: 73.7%;
  object-fit: cover;
  outline: 1px solid rgb(20 14 10 / 0.25); outline-offset: -1px;
}
.polaroid__girar,
.polaroid__volver {
  position: absolute; left: 50%; bottom: 8%;
  translate: -50% 0;
  padding: 0.5rem 0.3rem;
  border: 0; background: none; color: var(--tinta); cursor: pointer;
}
.polaroid__girar { width: 17%; animation: libreta-empuja 1.6s ease-in-out infinite; }
.polaroid__volver { width: 13%; opacity: 0.8; }
.polaroid__girar:focus-visible, .polaroid__volver:focus-visible { outline: 1px dashed var(--tinta); outline-offset: 3px; border-radius: 3px; }
.polaroid__flecha { display: block; width: 100%; height: auto; overflow: visible; }
.polaroid__flecha path { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.polaroid__texto {
  margin: 0;
  font: 400 clamp(0.98rem, 4.2vw, 1.12rem) / 1.55 "La Belle Aurore", cursive;
  color: var(--tinta);
  text-align: center;
}
/* En móvil, al revés que la libreta: fondo crema (el papel de la web) y la polaroid en chocolate,
   con la frase y las flechas en crema */
@media (max-width: 699px) {
  .libreta-escena { background: var(--fondo-papel); background-size: var(--fondo-papel-size); }
  .polaroid__cara {
    background: var(--choco) var(--texture-papel-choco);
    background-size: var(--texture-papel-size);
    box-shadow: 0 1px 2px rgb(40 26 20 / 0.35), 0 18px 34px -14px rgb(40 26 20 / 0.55);
  }
  .polaroid__foto { outline-color: rgb(243 236 223 / 0.18); }
  .polaroid__girar, .polaroid__volver, .polaroid__texto { color: var(--marfil-texto); }
  .polaroid__girar:focus-visible, .polaroid__volver:focus-visible { outline-color: var(--marfil-texto); }
}

/* Sin JavaScript: las dos caras, una debajo de otra, sin botones */
html:not(.js) .polaroid__carta { aspect-ratio: auto; transform: none; }
html:not(.js) .polaroid__cara { position: relative; transform: none; aspect-ratio: 843 / 979; margin-bottom: 1.2rem; }
html:not(.js) .polaroid__girar, html:not(.js) .polaroid__volver { display: none; }

/* --- Movimiento reducido: sin giro ni recolocación; la portada se desvanece y aparece el interior ---- */
@media (prefers-reduced-motion: reduce) {
  .libreta__cuerpo,
  .libreta__goma,
  .libreta__tapa-frente::after,
  .libreta__tapa-dorso::after { transition: none !important; }
  .libreta__tapa { transform: none !important; transition: opacity 0.35s ease !important; }
  .libreta.is-abierta .libreta__tapa { opacity: 0; }
  .libreta__contenido { transition: opacity 0.3s ease; translate: none !important; }
  .libreta__cuerpo, .libreta__abreme, .polaroid__girar { animation: none !important; }
  .polaroid__carta { transition: none; }
}

/* --- De dónde viene Recuerda Studio (como «My approach»), debajo de la libreta / la polaroid ---------
   Ordenador: sobre la pared marrón; a la izquierda el título, la frase en cursiva, el texto y el botón;
   a la derecha, las tres palabras grandes a mano, fijas y escalonadas. Detrás, tres fotos apagadas.
   Móvil: una sola columna con el título, la frase, el texto y el botón; sin palabras ni fotos. */
.enfoque {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  column-gap: 5vw;
  align-items: center;
  padding: clamp(5rem, 8vw, 7.5rem) 6vw clamp(5rem, 8vw, 7rem);
  background: transparent;           /* la misma pared que la libreta (main.sobre) */
  color: var(--marfil-texto);
}
.enfoque__fotos { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.enfoque__foto { position: absolute; display: block; object-fit: cover; opacity: 0.22; filter: grayscale(1) sepia(0.4) brightness(0.9); }
.enfoque__foto--a { left: 0; top: 6%; width: 12vw; height: 46%; opacity: 0.16; }        /* detrás del título, más suave */
.enfoque__foto--b { right: 2.5vw; top: 8%; width: 11vw; aspect-ratio: 1; height: auto; }
.enfoque__foto--c { left: 52%; bottom: 0; width: 27vw; height: 29%; }   /* debajo de las palabras, sin taparlas */

.enfoque__intro { position: relative; z-index: 1; max-width: 37rem; }
.enfoque__titulo {
  margin: 0 0 1.6rem;
  font: 400 clamp(2.6rem, 1.3rem + 3.1vw, 4.6rem) / 1 var(--font-serif);
  text-transform: uppercase; letter-spacing: 0.01em;
}
.enfoque__sub {
  margin: 0 0 2.4rem;
  font: italic 300 clamp(1.25rem, 1rem + 0.6vw, 1.65rem) / 1.35 var(--font-cursiva);
  min-height: 1.35em;
}
.enfoque__texto { font: 400 clamp(1rem, 0.96rem + 0.15vw, 1.08rem) / 1.8 var(--font-type); }
.enfoque__texto p { margin: 0 0 1.15em; text-align: justify; hyphens: manual; -webkit-hyphens: manual; }   /* justificado, sin partir palabras con guion */
.enfoque__texto p:last-child { margin-bottom: 0; }
.enfoque__texto--movil { display: none; }

.enfoque__boton {
  position: relative; z-index: 1;
  display: grid; place-items: center;
  width: 12.5rem; height: 4.7rem; margin-top: 2.6rem;       /* cerca del último párrafo, sin pegarse */
  border: 1px solid currentColor; border-radius: 50%;
  font: italic 300 1.2rem/1 var(--font-cursiva); letter-spacing: 0.02em;
  color: inherit; text-decoration: none;
  transition: background 0.3s ease, color 0.3s ease;
}
.enfoque__boton:hover, .enfoque__boton:focus-visible { background: var(--marfil-texto); color: var(--choco); }

/* Las tres palabras: fijas, grandes, a mano y escalonadas, sin cortarse */
.enfoque__lista {
  position: relative; z-index: 1;
  display: grid; gap: clamp(2.4rem, 7vh, 4.4rem);
  margin: 0; padding: 0; list-style: none;
}
.enfoque__valor { display: flex; align-items: flex-start; gap: 0.7rem; }
.enfoque__valor:nth-child(2) { padding-left: 22%; }
.enfoque__valor:nth-child(3) { padding-left: 44%; }
.enfoque__num { padding-top: 0.75em; font: 400 1.05rem/1 var(--font-type); letter-spacing: 0.05em; }
.enfoque__nombre { font: 400 clamp(3rem, 1.6rem + 2.8vw, 5rem) / 1.05 var(--font-mano); white-space: nowrap; }

/* El cursor de la frase que se escribe */
.enfoque__cursor { display: inline-block; width: 1px; height: 1.05em; margin-left: 2px; vertical-align: -0.15em; background: currentColor; opacity: 0.6; animation: enfoque-parpadeo 1s steps(1) infinite; }
@keyframes enfoque-parpadeo { 50% { opacity: 0; } }
.enfoque.is-por-escribir .enfoque__sub .libreta__letra { opacity: 0; }
.enfoque.is-por-escribir .enfoque__sub .libreta__letra.is-escrita { opacity: 1; }
/* El texto aparece al bajar, pieza a pieza (sobre-mi.js añade .is-vista): sube un poco y se aclara */
.js .enfoque [data-aparece] { opacity: 0; translate: 0 26px; filter: blur(3px);
  transition: opacity 1s ease var(--retraso, 0s), translate 1.2s cubic-bezier(0.2, 0.7, 0.2, 1) var(--retraso, 0s), filter 1s ease var(--retraso, 0s); }
.js .enfoque [data-aparece].is-vista { opacity: 1; translate: 0 0; filter: none; }
.js .enfoque .enfoque__valor[data-aparece] { translate: 30px 0; }
.js .enfoque .enfoque__valor[data-aparece].is-vista { translate: 0 0; }

@media (max-width: 899px) {
  /* Pantallas medianas: las palabras, algo más pequeñas para que no se corten */
  .enfoque__nombre { font-size: clamp(2.6rem, 1rem + 3.6vw, 3.4rem); }
  .enfoque__valor:nth-child(2) { padding-left: 14%; }
  .enfoque__valor:nth-child(3) { padding-left: 28%; }
}
@media (max-width: 699px) {
  .enfoque {
    grid-template-columns: 1fr;
    padding: 3.6rem 7vw 4.2rem;
  }
  .enfoque__fotos,
  .enfoque__lista { display: none; }                       /* sin fotos de fondo ni palabras grandes */
  .enfoque__intro { max-width: none; }
  .enfoque__titulo { font-size: 2.6rem; margin-bottom: 1.1rem; }
  .enfoque__sub { font-size: 1.2rem; margin-bottom: 1.8rem; }
  .enfoque__texto { font-size: 1.02rem; line-height: 1.75; }
  .enfoque__texto p { margin-bottom: 1.1em; }
  .enfoque__texto--pc { display: none; }                    /* en móvil, la versión corta */
  .enfoque__texto--movil { display: block; }
  .enfoque__boton { margin: 2.4rem auto 0; }
}
@media (prefers-reduced-motion: reduce) {
  .enfoque__cursor { animation: none; }
  .js .enfoque [data-aparece] { opacity: 1; translate: 0 0; filter: none; transition: none; }
}