/* ============================================================
   INICIO — réplica del diseño (Portfolio (3).pdf)
   ------------------------------------------------------------
   La página está diseñada sobre un lienzo de 1024,5 pt de ancho.
   Las secciones que son composición (¿Quién soy?, Mis habilidades,
   Mi proceso creativo) van en una caja con container-type y todo
   posicionado en %, igual que las páginas de proyecto: así la
   composición escala entera sin descuadrarse.

   Para pasar una medida del diseño a estas unidades:
     x, ancho   →  pt / 1024,5 * 100  en %
     tipografía →  pt / 1024,5 * 100  en cqw
   ============================================================ */

.p-inicio {
  --tinta: #892f4d;          /* el vino de casi todos los textos */
  --ciruela: #944d61;        /* bandas */
  --ciruela-osc: #892e4d;
  --marco: #944461;          /* marcos, líneas y botones */
  --tarjeta: #844e5b;        /* bloque de imagen de las tarjetas */
  --crema: #f5edde;
  --crema-clara: #fdf8f1;
  --crema-nav: #fff4ef;
  --claro: #f4ead2;          /* texto sobre ciruela */

  background: var(--crema);
  color: var(--tinta);
  font-family: "Questrial", "Poppins", sans-serif;

  --nav-bg: var(--crema-nav);
  --nav-ink: var(--tinta);
  --nav-logo: var(--tinta);
}

.p-inicio .script,
.p-inicio h1,
.p-inicio h2,
.p-inicio h3 {
  font-family: "Luxurious Script", "Pinyon Script", cursive;
  font-weight: 400;
}

/* el nav del diseño es una banda clara y baja */
.p-inicio .nav {
  padding: 0.12rem 2rem;
  box-shadow: none;
  border-bottom: 1px solid rgba(137, 47, 77, 0.14);
}

.p-inicio .nav a { font-size: 0.78rem; opacity: 1; }

.p-inicio .nav .logo {
  font-family: "Luxurious Script", cursive;
  font-size: 1.55rem;
  padding: 0 1.2rem;
}

/* lienzo de composición: todo lo de adentro va en % sobre él */
.ini-lienzo {
  position: relative;
  width: 100%;
  container-type: inline-size;
}

.ini-lienzo > * { position: absolute; }
.ini-lienzo img { display: block; width: 100%; }

/* ------------------------------------------------------------
   HERO
   ------------------------------------------------------------ */
.ini-hero {
  background: var(--ciruela-osc);
  line-height: 0;
}

.ini-hero img,
.ini-hero video {
  width: 100%;
  aspect-ratio: 1057.5 / 594.8;
  object-fit: cover;
  display: block;
}

/* banda lisa bajo la foto (606 → 722,2 pt del diseño) */
.ini-banda-ciruela {
  position: relative;
  height: 4.6vw;
  max-height: 58px;
  margin-top: -2px;   /* tapa la rayita clara que dejaba el borde del video */
  background: url("../assets/inicio/tex-plum.webp") repeat var(--ciruela);
  background-size: 300px;
}

/* ------------------------------------------------------------
   ¿QUIÉN SOY?   (banda 722,3 → 1278 pt, alto 555,7)
   ------------------------------------------------------------ */
/* La foto del estudio va de fondo exactamente donde la pone el diseño
   (x -15,3..1040 y 691,6..1284,9 sobre la banda 722,3..1278), para que el
   recorte que va encima calce con ella y no se vea doble. */
.ini-quiensoy {
  aspect-ratio: 1024.5 / 555.7;
  background: url("../assets/inicio/qs-fondo.webp") no-repeat #ded0bf;
  /* la caja del diseño es 1055,3 x 593,3 sobre una banda de 1024,5 x 555,7 */
  background-size: 103% 106.76%;
  background-position: 49.68% 81.65%;
  overflow: hidden;
}

.ini-quiensoy .titulo {
  left: 45.81%;
  top: 3.4%;
  margin: 0;
  font-size: 3.65cqw;
  line-height: 1.2;
  color: var(--tinta);
  z-index: 4;
}

/* La chica sale de la propia foto de fondo. Antes iba además un PNG
   recortado encima, pero no calzaba con el fondo (se veía el corte) y su caja
   tapaba el final de las líneas. Las líneas del diseño ya terminan justo en su
   silueta, así que no hace falta. */

/* cada foto es mas grande que su marco y va corrida dentro de el: el marco
   la recorta. Los valores salen de comparar las dos cajas del diseno. */
.ini-quiensoy .marco {
  width: 12.64%;
  aspect-ratio: 1;
  margin: 0;
  border: 0.12cqw solid var(--marco);
  background-repeat: no-repeat;
  z-index: 2;
}

.ini-quiensoy .m1 {
  background-image: url("../assets/inicio/qs-1.webp");
  background-size: 171.4% auto;
  background-position: 69.8% 42%;
}

.ini-quiensoy .m2 {
  background-image: url("../assets/inicio/qs-2.webp");
  background-size: 208.9% auto;
  background-position: 57.1% 58.8%;
}

.ini-quiensoy .m3 {
  background-image: url("../assets/inicio/qs-3.webp");
  background-size: 180.6% auto;
  background-position: 37.6% 80.4%;
}

.ini-quiensoy .m4 {
  background-image: url("../assets/inicio/qs-4.webp");
  background-size: 204.9% auto;
  background-position: 53.9% 16.8%;
}

.ini-quiensoy .num {
  font-family: "Luxurious Script", cursive;
  font-size: 2.56cqw;
  line-height: 1;
  color: var(--tinta);
  z-index: 4;
}

.ini-quiensoy .hilo {
  height: 0;
  border-top: 0.1cqw solid var(--marco);
  z-index: 1;
}

/* por encima del recorte: el borde derecho de la foto pisa el arranque de
   los textos 2 y 4, y en el diseño se leen completos */
.ini-quiensoy p {
  width: 12.65%;
  margin: 0;
  font-size: 0.93cqw;
  line-height: 1.42;
  text-align: justify;
  color: var(--tinta);
  z-index: 5;
}

/* posiciones medidas del diseño */
.ini-quiensoy .m1 { left: 18.24%; top: 8.21%; }
.ini-quiensoy .m2 { left: 68.90%; top: 6.66%; }
.ini-quiensoy .m3 { left: 10.44%; top: 53.00%; }
.ini-quiensoy .m4 { left: 77.25%; top: 55.61%; }

.ini-quiensoy .n1 { left: 16.55%; top: 6.0%; }
.ini-quiensoy .n2 { left: 82.80%; top: 5.8%; }
.ini-quiensoy .n3 { left: 23.69%; top: 53.0%; }
.ini-quiensoy .n4 { left: 91.07%; top: 73.0%; }

.ini-quiensoy .h1 { left: 29.97%; top: 29.58%; width: 20.03%; }
.ini-quiensoy .h2 { left: 54.06%; top: 24.13%; width: 20.04%; }
.ini-quiensoy .h3 { left: 21.31%; top: 66.87%; width: 20.03%; }
.ini-quiensoy .h4 { left: 56.01%; top: 61.58%; width: 23.44%; }

.ini-quiensoy .t1 { left: 18.15%; top: 33.4%; }
.ini-quiensoy .t2 { left: 68.86%; top: 31.5%; }
.ini-quiensoy .t3 { left: 10.44%; top: 76.6%; }
.ini-quiensoy .t4 { left: 77.25%; top: 79.0%; }

/* ------------------------------------------------------------
   MIS HABILIDADES
   ------------------------------------------------------------
   Se ven las tres a la vez: la del centro grande y en color, la anterior
   y la siguiente pequeñas y desvanecidas a los lados. Las flores giran el
   carrusel. Medidas tomadas de la corrección de Majo (página 6). */
.ini-habilidades {
  aspect-ratio: 1024.5 / 549.7;
  background: url("../assets/inicio/tex-plum.webp") repeat var(--ciruela);
  background-size: 300px;
  color: var(--claro);
  overflow: hidden;
}

.ini-habilidades .titulo {
  left: 50%;
  top: 4.6%;
  transform: translateX(-50%);
  margin: 0;
  font-size: 2.25cqw;
  line-height: 1.2;
  white-space: nowrap;
  color: var(--claro);
  z-index: 5;
}

.ini-habilidades .hab { inset: 0; pointer-events: none; }
.ini-habilidades .hab > * { position: absolute; }

.ini-habilidades .figura {
  left: 50%;
  width: auto;
  height: 22cqw;
  top: 21%;
  transform: translateX(-50%);
  opacity: 0;
  transition: left 0.55s ease, top 0.55s ease, height 0.55s ease, opacity 0.55s ease;
  z-index: 1;
}

.ini-habilidades .hab.activa .figura { left: 50%; top: 10.2%; height: 33.9cqw; opacity: 1; z-index: 3; }
.ini-habilidades .hab.es-previa .figura { left: 33.6%; opacity: 0.38; }
.ini-habilidades .hab.es-siguiente .figura { left: 66.4%; opacity: 0.38; }

/* solo la del centro muestra su nombre y su texto */
.ini-habilidades h3,
.ini-habilidades p {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.45s ease, visibility 0.45s;
}

.ini-habilidades .hab.activa h3,
.ini-habilidades .hab.activa p { opacity: 1; visibility: visible; }

.ini-habilidades h3 {
  left: 50%;
  top: 69.5%;
  transform: translateX(-50%);
  margin: 0;
  font-size: 2.31cqw;
  line-height: 1.2;
  white-space: nowrap;
  color: var(--claro);
  z-index: 4;
}

.ini-habilidades p {
  left: 29%;
  top: 76.5%;
  width: 42%;
  margin: 0;
  font-size: 0.87cqw;
  line-height: 1.38;
  text-align: justify;
  color: var(--claro);
  z-index: 4;
}

/* las flores: botones del carrusel, con su flecha */
.flor-nav {
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  line-height: 0;
  transition: transform 0.25s ease;
}

.flor-nav svg,
.flor-nav img { width: 100%; height: auto; display: block; overflow: visible; }

.flor-nav .petalos { fill: none; stroke: var(--claro); stroke-width: 1.6; }
.flor-nav .petalos.llena { fill: var(--marco); stroke: none; }
.flor-nav .chev { fill: none; stroke: var(--claro); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.flor-nav .petalos.llena + .chev { stroke: #f3dfe4; }

.flor-nav:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
  border-radius: 50%;
}
.flor-nav:hover { transform: scale(1.12); }
.flor-nav:active { transform: scale(0.96); }

.ini-habilidades .flor-nav { width: 3.6%; top: 40.5%; z-index: 6; }
.ini-habilidades .flor-nav.izq { left: 21.4%; }
.ini-habilidades .flor-nav.der { left: 75%; }

/* ------------------------------------------------------------
   ATAJOS: la banda con los cuatro botones de sección
   ------------------------------------------------------------ */
.ini-atajos {
  display: flex;
  justify-content: center;
  gap: clamp(1.5rem, 11.6vw, 10rem);
  padding: 1.05rem 1rem 1.25rem;
  background: url("../assets/inicio/tex-plum.webp") repeat var(--ciruela);
  background-size: 300px;
}

.ini-atajos a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  width: 7.5rem;
  color: var(--claro);
  font-size: 0.72rem;
  letter-spacing: 0.01em;
  text-align: center;
}

.ini-atajos img {
  width: 54px;
  height: 54px;
  transition: transform 0.25s ease, background 0.25s ease;
  border-radius: 50%;
}

.ini-atajos a:hover img,
.ini-atajos a:focus-visible img { transform: translateY(-3px); background: rgba(244, 234, 210, 0.12); }

html { scroll-behavior: smooth; }
section[id] { scroll-margin-top: 3rem; }

/* ------------------------------------------------------------
   MI PROCESO CREATIVO
   ------------------------------------------------------------ */
.ini-proceso {
  aspect-ratio: 1024.5 / 442;
  background: url("../assets/tex/proceso-relieve.webp") center / 100% 100% no-repeat var(--crema);
}

.ini-proceso .titulo {
  left: 15.4%;
  top: 8.6%;
  margin: 0;
  color: var(--tinta);
  font-size: 2.57cqw;
  line-height: 1.2;
}

.ini-proceso .intro {
  left: 15.5%;
  top: 19.2%;
  width: 35.4%;
  margin: 0;
  font-size: 1.02cqw;
  line-height: 1.38;
  text-align: justify;
  color: var(--tinta);
}

.ini-proceso .rotulo {
  margin: 0;
  font-size: 1.12cqw;
  letter-spacing: 0.01em;
  color: var(--tinta);
  white-space: nowrap;
}

.ini-proceso .r-izq { right: 49.2%; top: 30.2%; font-weight: 600; z-index: 2; }
.ini-proceso .r-der { left: 63.7%; top: 7.6%; }
.ini-proceso .r-clic { left: 63.7%; top: 93%; font-size: 0.92cqw; }

/* El computador es una pieza: la lámina y sus carpetas van juntas, para que
   en celular la composición no se desarme y las carpetas sigan clicables. */
.ini-proceso .computador { left: 5.25%; top: 27.9%; width: 55.3%; z-index: 1; }
.ini-proceso .computador .tablero-fondo { position: relative; width: 100%; }

.ini-proceso .carpeta {
  position: absolute;
  z-index: 2;
  width: 15.8%;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  transition: transform 0.25s ease;
}

.ini-proceso .carpeta:hover,
.ini-proceso .carpeta:focus-visible { transform: translateY(-4px) scale(1.04); }

.ini-proceso .carpeta img { width: 100%; }

.ini-proceso .carpeta .nombre {
  position: absolute;
  left: 50%;
  top: 88%;
  transform: translateX(-50%);
  width: 9em;
  font-family: "Questrial", sans-serif;
  font-size: 0.78cqw;
  line-height: 1.2;
  color: var(--claro);
  text-align: center;
}

.ini-proceso .c1 { left: 21.2%; top: 16.3%; }
.ini-proceso .c2 { left: 21.2%; top: 41.2%; }

.ini-proceso .bitacora {
  left: 60.6%;
  top: 8.9%;
  width: 26.7%;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  z-index: 2;
  transition: transform 0.3s ease;
}

.ini-proceso .bitacora:hover,
.ini-proceso .bitacora:focus-visible { transform: translateY(-6px) rotate(-1.2deg); }

.ini-proceso .bitacora img { width: 100%; }

/* ------------------------------------------------------------
   MIS TRABAJOS
   ------------------------------------------------------------ */
.ini-trabajos {
  /* la misma textura de Mi proceso creativo, sin estirar los adornos */
  background: url("../assets/tex/proceso-relieve.webp") center / cover no-repeat var(--crema);
  padding: 0 0 3.2rem;
  text-align: center;
}

.ini-trabajos .titulo {
  margin: 0;
  font-size: clamp(1.9rem, 2.91vw, 2.05rem);
  line-height: 1.2;
  color: var(--tinta);
}

.ini-trabajos .sub {
  margin: 0.35rem 0 2.1rem;
  font-size: clamp(0.78rem, 1.34vw, 0.94rem);
  color: var(--tinta);
}

/* Los proyectos también se turnan: las flores moradas de los costados pasan
   al siguiente, igual que en Mis habilidades. */
.obras-caja {
  position: relative;
  width: min(690px, 92%);
  margin: 0 auto;
}

.obras { position: relative; }

/* centradas con la tarjeta y pegadas a ella, no en el borde de la pantalla */
.ini-trabajos .flor-nav {
  position: absolute;
  top: 50%;
  width: 6.6%;
  transform: translateY(-50%);
  z-index: 3;
}

.ini-trabajos .flor-nav.izq { left: -12.5%; }
.ini-trabajos .flor-nav.der { right: -12.5%; }
.ini-trabajos .flor-nav:hover { transform: translateY(-50%) scale(1.12); }

.obras-puntos {
  display: flex;
  justify-content: center;
  gap: 0.65rem;
  margin-top: 1.6rem;
}

.obras-puntos button {
  width: 10px;
  height: 10px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--marco);
  background: transparent;
  cursor: pointer;
  transition: background 0.25s ease, transform 0.25s ease;
}

.obras-puntos button.activo { background: var(--marco); transform: scale(1.25); }

/* la tarjeta: bloque ciruela con la lámina + cuerpo de texto con filete */
.obra {
  display: grid;
  grid-template-columns: 45.2% 1fr;
  align-items: stretch;
  text-align: left;
}

/* solo la activa ocupa sitio; las demás se superponen sin empujar */
.obra:not(.activa) {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.obra.activa {
  position: relative;
  opacity: 1;
  animation: obra-entra 0.4s ease both;
}

@keyframes obra-entra {
  from { opacity: 0; transform: translateY(10px); }
}

/* El bloque se estira con la tarjeta: si el texto es largo y la tarjeta
   crece, antes quedaba un hueco crema debajo de la lámina. */
.obra .lamina {
  grid-column: 1;
  grid-row: 1;
  align-self: stretch;
  background: var(--tarjeta);
  border-radius: 4.4% / 4.4%;
  padding: 4.94% 4.94% 4.46%;
  min-height: min(313.8px, 45.4vw);
  z-index: 2;
}

.obra .lamina img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4%;
  display: block;
}

.obra .cuerpo {
  grid-column: 1 / -1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 1.6rem 2.6rem 1.6rem calc(45.2% + 2.4rem);
  border: 1px solid var(--tarjeta);
  border-radius: 26px;
  z-index: 1;
}

.obra h3 {
  margin: 0;
  font-size: clamp(1.5rem, 2.39vw, 1.68rem);
  line-height: 1.1;
  color: var(--tinta);
}

.obra p {
  margin: 0;
  font-size: clamp(0.72rem, 1.12vw, 0.79rem);
  line-height: 1.42;
  text-align: justify;
  color: var(--marco);
}

.obra .boton {
  margin-top: 0.5rem;
  display: inline-grid;
  place-items: center;
  min-width: 121px;
  min-height: 37px;
  padding: 0.2rem 1.4rem;
  border: 1px solid var(--marco);
  border-radius: 999px;
  font-family: "Luxurious Script", cursive;
  font-size: clamp(1.05rem, 1.77vw, 1.24rem);
  color: var(--marco);
  transition: background 0.25s ease, color 0.25s ease;
}

.obra .boton:hover,
.obra .boton:focus-visible { background: var(--marco); color: var(--crema-clara); }

/* ------------------------------------------------------------
   DEJA ALGO
   ------------------------------------------------------------ */
.ini-deja {
  background: var(--crema);
  padding: 2.4rem 0 3.4rem;
  text-align: center;
}

.ini-deja .titulo {
  margin: 0;
  font-size: clamp(2rem, 3.1vw, 2.2rem);
  line-height: 1.2;
  color: var(--tinta);
}

.ini-deja .sub {
  margin: 0.2rem 0 1.7rem;
  font-size: clamp(0.78rem, 1.34vw, 0.94rem);
  color: var(--tinta);
}

.deja-caja {
  display: grid;
  grid-template-columns: 15.4% 1fr;
  gap: 5.7%;
  max-width: 1024px;
  margin: 0 auto;
  padding: 0 1.2rem;
  align-items: stretch;
  text-align: left;
}

.deja-panel {
  background: url("../assets/inicio/tex-plum.webp") repeat var(--ciruela);
  background-size: 240px;
  border-radius: 22px;
  padding: 1.5rem 1.1rem;
  color: var(--claro);
}

.deja-panel h3 {
  margin: 0 0 0.35rem;
  font-size: 1.55rem;
  line-height: 1.15;
  color: var(--claro);
  border-bottom: 1px solid rgba(244, 234, 210, 0.75);
  padding-bottom: 0.3rem;
}

.deja-panel h3 + * { margin-top: 0.55rem; }
.deja-panel .grupo + .grupo { margin-top: 1.15rem; }

.deja-panel .colores { display: flex; gap: 0.5rem; }

.deja-panel .color {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid rgba(244, 234, 210, 0.6);
  padding: 0;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.deja-panel .color.activo { transform: scale(1.2); border-color: var(--claro); }

.deja-panel .tool {
  display: block;
  width: 100%;
  margin-top: 0.4rem;
  padding: 0.32rem 0.7rem;
  border: 1px solid rgba(244, 234, 210, 0.7);
  border-radius: 999px;
  background: transparent;
  color: var(--claro);
  font-family: inherit;
  font-size: 0.62rem;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 0.2s ease;
}

.deja-panel .tool:hover,
.deja-panel .tool.activo { background: rgba(244, 234, 210, 0.18); }

.lienzo-marco {
  position: relative;
  border: 1px solid var(--marco);
  border-radius: 26px;
  overflow: hidden;
  background: var(--crema-clara);
  min-height: 300px;
}

.lienzo-marco canvas { display: block; width: 100%; height: 100%; }

.ini-deja .enviar {
  position: absolute;
  right: 1.1rem;
  bottom: 1.1rem;
  padding: 0.4rem 1.5rem;
  border: none;
  border-radius: 5px;
  background: var(--ciruela);
  color: var(--claro);
  font-family: inherit;
  font-size: 0.68rem;
  cursor: pointer;
}

.ini-deja .ver-algo {
  display: inline-grid;
  place-items: center;
  margin-top: 1.9rem;
  min-width: 270px;
  min-height: 52px;
  padding: 0.2rem 2rem;
  border: 1px solid var(--marco);
  border-radius: 999px;
  font-family: "Luxurious Script", cursive;
  font-size: 1.7rem;
  color: var(--marco);
  background: transparent;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease;
}

.ini-deja .ver-algo:hover { background: var(--marco); color: var(--crema-clara); }

/* notitas del tablero */
.nota-tablero {
  position: absolute;
  width: 132px;
  padding: 0.7rem 0.6rem 0.5rem;
  background: #fdf6bd;
  color: #6b5a25;
  box-shadow: 3px 5px 12px rgba(58, 40, 26, 0.22);
  font-size: 0.72rem;
  line-height: 1.3;
}

.nota-tablero .cerrar-nota {
  position: absolute;
  top: 2px;
  right: 4px;
  border: none;
  background: none;
  color: inherit;
  cursor: pointer;
  font-size: 0.7rem;
}

/* ------------------------------------------------------------
   PIE: tarjeta ciruela con filete sobre fondo crema
   ------------------------------------------------------------ */
.ini-pie {
  background: var(--crema);
  padding: 2.8rem 1.2rem 3.2rem;
}

.pie-tarjeta {
  position: relative;
  display: grid;
  grid-template-columns: 1.35fr 0.75fr 1.25fr;
  align-items: center;
  gap: 2rem;
  width: min(1480px, 100%);
  margin: 0 auto;
  padding: clamp(5.4rem, 9.5vw, 9.4rem) 7% clamp(3rem, 5vw, 4.8rem);
  border-radius: 38px;
  background: #834b5a;
  color: var(--claro);
  font-family: "Josefin Sans", "Questrial", sans-serif;
  font-weight: 300;
}

/* el filete interior */
.pie-tarjeta::before {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(244, 234, 210, 0.75);
  border-radius: 30px;
  pointer-events: none;
}

/* las dos rayitas y la línea de arriba */
.pie-filetes {
  position: absolute;
  left: 5.6%;
  right: 7.4%;
  top: 12px;
  height: clamp(3.2rem, 6.8vw, 4.9rem);
  border-bottom: 1px solid rgba(244, 234, 210, 0.75);
  pointer-events: none;
}

.pie-filetes i {
  position: absolute;
  top: 18%;
  bottom: 18%;
  border-left: 1px solid rgba(244, 234, 210, 0.75);
}

.pie-filetes i:first-child { left: 24%; }
.pie-filetes i:last-child { left: 64.5%; }

.ini-pie .firma {
  margin: 0;
  font-size: clamp(1.8rem, 3vw, 2.8rem);
  line-height: 1.1;
  color: var(--claro);
}

.ini-pie .oficio {
  margin: 0.35rem 0 0;
  font-size: clamp(0.92rem, 1.1vw, 1.08rem);
  color: var(--claro);
}

.ini-pie h2 {
  margin: 0 0 0.75rem;
  font-family: "Questrial", sans-serif;
  font-size: clamp(0.98rem, 1.15vw, 1.15rem);
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--claro);
}

.pie-secciones { display: flex; flex-direction: column; align-self: start; margin-top: 0.9rem; }

.pie-secciones a {
  font-size: clamp(0.9rem, 1.05vw, 1.05rem);
  line-height: 1.5;
  color: var(--claro);
}

.pie-secciones a:hover,
.pie-secciones a:focus-visible { text-decoration: underline; }

.pie-contacto { display: flex; flex-direction: column; gap: 0.5rem; align-self: start; margin-top: 0.9rem; }

.pie-contacto a {
  display: grid;
  grid-template-columns: 26px minmax(3rem, 1fr) auto;
  align-items: center;
  gap: 0.6rem;
  font-size: clamp(0.86rem, 1vw, 1rem);
  color: var(--claro);
}

.pie-contacto a.subrayado span { text-decoration: underline; text-underline-offset: 3px; }
.pie-contacto svg { width: 22px; height: 22px; fill: currentColor; }

/* línea con punta de flecha */
.pie-contacto .linea-flecha {
  position: relative;
  height: 1px;
  background: rgba(244, 234, 210, 0.85);
}

.pie-contacto .linea-flecha::after {
  content: "";
  position: absolute;
  right: 0;
  top: -3px;
  border-left: 6px solid rgba(244, 234, 210, 0.95);
  border-top: 3.5px solid transparent;
  border-bottom: 3.5px solid transparent;
}

.pie-contacto a:hover span { opacity: 0.8; }

/* ------------------------------------------------------------
   PORTADA: rótulo sobre el video
   ------------------------------------------------------------ */
.ini-hero { position: relative; }

.ini-hero-rotulo {
  position: absolute;
  left: 65.5%;
  top: 73%;
  margin: 0;
  display: grid;
  place-items: center;
  width: clamp(9rem, 24vw, 23rem);
  aspect-ratio: 480 / 78;
  border: 1px solid rgba(70, 52, 40, 0.55);
  border-radius: 999px;
  background: rgba(104, 78, 58, 0.72);
  color: #f1e3cf;
  font-family: "Luxurious Script", "Pinyon Script", cursive;
  font-size: clamp(0.95rem, 2vw, 1.95rem);
  line-height: 1;
  white-space: nowrap;
  -webkit-backdrop-filter: blur(1px);
  backdrop-filter: blur(1px);
}

/* ------------------------------------------------------------
   EN FOTO: el video de Majo con las polaroids
   ------------------------------------------------------------ */
.ini-foto {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #a3a3a3;
  overflow: hidden;
  container-type: inline-size;
}

.ini-foto .fondo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ini-foto .ver-proyectos {
  position: absolute;
  left: 53%;
  top: 76.6%;
  transform: translateX(-50%);
  display: grid;
  place-items: center;
  width: 25%;
  aspect-ratio: 193 / 31;
  border: 1px solid rgba(244, 234, 210, 0.55);
  border-radius: 999px;
  background: rgba(143, 77, 99, 0.78);
  color: #f4e4dc;
  font-family: "Luxurious Script", cursive;
  font-size: 2.2cqw;
  line-height: 1;
  transition: background 0.25s ease;
}

.ini-foto .ver-proyectos:hover,
.ini-foto .ver-proyectos:focus-visible { background: rgba(137, 47, 77, 0.95); }

/* ------------------------------------------------------------
   BITÁCORA: libro abierto con dos pliegos
   ------------------------------------------------------------ */
.libro {
  position: relative;
  width: min(1180px, 94vw, calc((100vh - 4rem) * 1.372));
  aspect-ratio: 1180 / 860;
  container-type: inline-size;
  border-radius: 2.6cqw;
  background: url("../assets/tex/bitacora-pliego.webp") center / 100% 100% no-repeat #f4ecdd;
  box-shadow: 0 30px 60px rgba(20, 12, 6, 0.5);
  color: #f6ece1;
}

.libro .pliego { position: absolute; inset: 0; }
.libro .pliego[hidden] { display: none; }
.libro .pliego > * { position: absolute; margin: 0; }

.libro .nota {
  padding: 1.5cqw 1.3cqw 1.4cqw;
  background: url("../assets/inicio/tex-plum.webp") repeat #8b4a5e;
  background-size: 18cqw;
  box-shadow: 0 0.2cqw 0.5cqw rgba(60, 30, 40, 0.18);
}

.libro .nota p {
  font-size: 0.86cqw;
  line-height: 1.5;
  text-align: justify;
  color: #f6ece1;
}

.libro .nota .cinta {
  top: -0.9cqw;
  width: 5cqw;
  height: 1.5cqw;
  transform: translateX(-50%) rotate(-1deg);
  background: rgba(230, 220, 196, 0.85);
}

.libro .foto { line-height: 0; }
.libro .foto img { width: 100%; height: 100%; object-fit: cover; }

.libro .tira {
  padding: 0.7cqw 0.7cqw 4.2cqw;
  background: #faf6f0;
  box-shadow: 0.4cqw 0.5cqw 1cqw rgba(60, 40, 30, 0.2);
}

.libro .firma {
  font-family: "Luxurious Script", cursive;
  font-size: 2.3cqw;
  line-height: 1;
  color: var(--tinta);
}

/* Mi historia */
[data-pagina="historia"] .tira { left: 8.3%; top: 11%; width: 14%; height: 63.4%; }
[data-pagina="historia"] .n1 { left: 27.3%; top: 15.5%; width: 17.5%; }
[data-pagina="historia"] .n2 { left: 27.3%; top: 51.5%; width: 20%; }
[data-pagina="historia"] .n3 { left: 52%; top: 24%; width: 18.6%; }
[data-pagina="historia"] .n4 { left: 55.3%; top: 66.9%; width: 16.5%; }
[data-pagina="historia"] .n5 { left: 74.6%; top: 49.4%; width: 16.5%; }
[data-pagina="historia"] .retrato {
  left: 72.6%; top: 8.5%; width: 19.8%; height: 34.5%;
  padding: 0.6cqw; background: #faf6f0;
  box-shadow: 0.3cqw 0.4cqw 1cqw rgba(60, 40, 30, 0.18);
  transform: rotate(-2deg);
}
[data-pagina="historia"] .nina {
  left: 68.6%; top: 7.3%; width: 9%; height: 14%;
  padding: 0.4cqw; background: #faf6f0; z-index: 2;
  box-shadow: 0.2cqw 0.3cqw 0.8cqw rgba(60, 40, 30, 0.2);
}
[data-pagina="historia"] .firma { left: 80.5%; top: 89.6%; }

/* Procesos */
[data-pagina="procesos"] .tira { left: 8.3%; top: 11.2%; width: 14%; height: 60.2%; }
[data-pagina="procesos"] .n1 { left: 27.2%; top: 14.8%; width: 20.1%; }
[data-pagina="procesos"] .n2 { left: 34.6%; top: 40.7%; width: 20.1%; }
[data-pagina="procesos"] .n3 { left: 25.2%; top: 70.7%; width: 20.2%; }
[data-pagina="procesos"] .n4 { left: 52.5%; top: 19%; width: 20.2%; }
[data-pagina="procesos"] .n5 { left: 55.2%; top: 67.7%; width: 20.2%; }
[data-pagina="procesos"] .foto:not(.tira) {
  padding: 0.35cqw; background: #faf6f0;
  box-shadow: 0.2cqw 0.3cqw 0.8cqw rgba(60, 40, 30, 0.18);
}
[data-pagina="procesos"] .c1 { left: 68.7%; top: 7.4%; width: 8.9%; height: 13.5%; z-index: 2; }
[data-pagina="procesos"] .c2 { left: 73%; top: 9%; width: 19.1%; height: 31.7%; }
[data-pagina="procesos"] .c3 { left: 78.1%; top: 26.4%; width: 16.7%; height: 25.5%; z-index: 2; }
[data-pagina="procesos"] .c4 { left: 67.7%; top: 40.7%; width: 20.4%; height: 15.5%; z-index: 3; }
[data-pagina="procesos"] .firma { left: 57%; top: 90.6%; }

.libro .flor-nav { position: absolute; top: 87.6%; width: 5.3%; z-index: 5; }
.libro .flor-nav.izq { left: 3.4%; }
.libro .flor-nav.der { right: 3.6%; }

.libro-cerrar {
  position: absolute;
  top: -1.9cqw;
  right: -1.3cqw;
  width: 5.2cqw;
  min-width: 36px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 50%;
  background: #4a3122;
  cursor: pointer;
  z-index: 6;
}

.libro-cerrar svg { width: 48%; stroke: #f4ead2; stroke-width: 1.4; fill: none; }

.libro-pestanas {
  position: absolute;
  left: 100%;
  top: 8.5%;
  display: flex;
  flex-direction: column;
  gap: 0.35cqw;
}

.libro-pestanas button {
  writing-mode: vertical-rl;
  padding: 1.6cqw 0.55cqw;
  min-height: 11cqw;
  border: none;
  border-radius: 0 1.4cqw 1.4cqw 0;
  background: #8b4a5e;
  color: #f6ece1;
  font-family: "Questrial", sans-serif;
  font-size: 0.82cqw;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}

.libro-pestanas button.activo { background: #c77b95; }

/* ------------------------------------------------------------
   CELULAR
   ------------------------------------------------------------ */
@media (max-width: 760px) {
  .p-inicio .nav { padding: 0.45rem 0.5rem 0.5rem; }

  .ini-banda-ciruela { height: 22px; }

  .ini-hero-rotulo { left: auto; right: 4%; top: auto; bottom: 8%; transform: none; width: min(11rem, 48%); font-size: 1.05rem; }

  /* las composiciones se desarman en columna */
  .ini-quiensoy,
  .ini-proceso {
    aspect-ratio: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    padding: 2.4rem 1.2rem 2.8rem;
  }

  .ini-quiensoy > *,
  .ini-proceso > * {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    width: auto !important;
  }

  /* ¿Quién soy?: como en computador pero en dos columnas, cada foto con su
     número y su texto debajo */
  .ini-quiensoy {
    aspect-ratio: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
    column-gap: 1rem;
    row-gap: 0.5rem;
    padding: 1.4rem 1rem 2rem;
    background: #ded0bf;
  }

  .ini-quiensoy > * { position: relative; left: auto; top: auto; }
  .ini-quiensoy .titulo { grid-column: 1 / -1; justify-self: center; font-size: 2.1rem; margin-bottom: 0.2rem; }

  .ini-quiensoy .marco {
    width: 66% !important;
    border-width: 1px;
    justify-self: center;
    margin-top: 1rem;   /* sitio para el número, que va encima del marco */
  }
  .ini-quiensoy .m1 { grid-column: 1; grid-row: 2; }
  .ini-quiensoy .t1 { grid-column: 1; grid-row: 3; }
  .ini-quiensoy .m2 { grid-column: 2; grid-row: 2; }
  .ini-quiensoy .t2 { grid-column: 2; grid-row: 3; }
  .ini-quiensoy .m3 { grid-column: 1; grid-row: 4; margin-top: 1.8rem; }
  .ini-quiensoy .t3 { grid-column: 1; grid-row: 5; }
  .ini-quiensoy .m4 { grid-column: 2; grid-row: 4; margin-top: 1.8rem; }
  .ini-quiensoy .t4 { grid-column: 2; grid-row: 5; }

  /* los números del diseño también en celular, en la esquina de afuera de
     cada foto */
  .ini-quiensoy .num {
    align-self: start;
    font-size: 1.35rem;
    line-height: 1;
    z-index: 4;
    pointer-events: none;
  }
  .ini-quiensoy .n1 { grid-column: 1; grid-row: 2; justify-self: start; margin: 0 0 0 0.3rem; }
  .ini-quiensoy .n2 { grid-column: 2; grid-row: 2; justify-self: end; margin: 0 0.3rem 0 0; }
  .ini-quiensoy .n3 { grid-column: 1; grid-row: 4; justify-self: start; margin: 0.8rem 0 0 0.3rem; }
  .ini-quiensoy .n4 { grid-column: 2; grid-row: 4; justify-self: end; margin: 0.8rem 0.3rem 0 0; }

  .ini-quiensoy .hilo { display: none; }

  /* el texto del mismo ancho que su foto */
  .ini-quiensoy p { width: 66% !important; justify-self: center; font-size: 0.7rem; line-height: 1.4; }

  /* Mis habilidades: más baja, y las flores a los lados de la figura */
  .ini-habilidades {
    aspect-ratio: auto;
    padding: 1.3rem 1rem 1.6rem;
    text-align: center;
    --alto-figura: 175px;
  }

  .ini-habilidades > * { position: relative; }

  .ini-habilidades .titulo {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    display: block;
    font-size: 1.55rem;
  }

  .ini-habilidades .hab { display: none; position: relative; inset: auto; }
  .ini-habilidades .hab.activa { display: block; margin-top: 0.6rem; }
  .ini-habilidades .hab > * { position: relative; }

  .ini-habilidades .hab.activa .figura,
  .ini-habilidades .figura {
    left: auto;
    top: auto;
    transform: none;
    height: var(--alto-figura);
    width: auto;
    margin: 0 auto;
    transition: none;
  }

  .ini-habilidades h3 {
    left: auto;
    top: auto;
    transform: none;
    margin-top: 0.35rem;
    font-size: 1.45rem;
    white-space: normal;
  }

  .ini-habilidades p {
    left: auto;
    top: auto;
    width: min(330px, 94%);
    margin: 0.45rem auto 0;
    font-size: 0.76rem;
    line-height: 1.42;
  }

  .ini-habilidades .flor-nav {
    position: absolute;
    top: calc(1.3rem + 2.4rem + 0.6rem + var(--alto-figura) / 2);
    width: 38px;
    transform: translateY(-50%);
  }

  .ini-habilidades .flor-nav.izq { left: 9%; }
  .ini-habilidades .flor-nav.der { left: auto; right: 9%; }
  .ini-habilidades .flor-nav:hover { transform: translateY(-50%) scale(1.1); }

  /* atajos */
  .ini-atajos { gap: 0.2rem; justify-content: space-around; padding: 0.9rem 0.3rem 1rem; }
  .ini-atajos a { width: auto; flex: 1; font-size: 0.62rem; gap: 0.35rem; }
  .ini-atajos svg { width: 40px; height: 40px; }

  /* proceso creativo */
  .ini-proceso { background-size: cover; background-position: center; }
  .ini-proceso .titulo { font-size: 1.9rem; order: -2; }
  .ini-proceso .intro { order: -1; width: min(340px, 94%) !important; font-size: 0.8rem; text-align: left; }
  .ini-proceso .r-izq { order: 1; }
  .ini-proceso .computador { order: 2; }
  .ini-proceso .r-der { order: 3; }
  .ini-proceso .bitacora { order: 4; }
  .ini-proceso .r-clic { order: 5; margin-top: -1rem; }
  .ini-proceso .rotulo { font-size: 0.82rem; }
  .ini-proceso .r-clic { font-size: 0.72rem; }
  .ini-proceso .computador { width: min(380px, 104%) !important; }
  .ini-proceso .bitacora { width: min(220px, 60%) !important; }
  .ini-proceso .carpeta .nombre { font-size: 0.56rem; }

  /* Mis trabajos: las flores a los lados de la lámina */
  .obra { grid-template-columns: 1fr; }

  .obra .lamina {
    grid-row: auto;
    width: min(270px, 72%);
    margin: 0 auto;
    aspect-ratio: 311.8 / 313.8;
  }

  .obra .cuerpo {
    grid-column: 1;
    grid-row: auto;
    padding: 1.3rem 1.2rem;
    border-radius: 20px;
    margin-top: -1.6rem;
    padding-top: 2.6rem;
  }

  .obra p { text-align: left; font-size: 0.82rem; }

  .obras-caja { width: 94%; }
  .obras-caja .obras-puntos { margin-top: 1.1rem; }

  .ini-trabajos .flor-nav {
    top: calc(min(270px, 72vw * 0.94) / 2);
    width: 36px;
  }

  .ini-trabajos .flor-nav.izq { left: 0; }
  .ini-trabajos .flor-nav.der { right: 0; }

  /* en foto */
  .ini-foto { aspect-ratio: 4 / 3.3; }
  .ini-foto .fondo { object-position: 62% center; }
  .ini-foto .ver-proyectos { width: 50%; top: 82%; font-size: 5cqw; left: 50%; }

  /* deja algo */
  .deja-caja { grid-template-columns: 1fr; gap: 1.1rem; }
  .deja-panel { border-radius: 18px; }
  .deja-panel .tool { font-size: 0.72rem; padding: 0.42rem 0.7rem; }
  .lienzo-marco { min-height: 260px; }

  /* pie */
  .ini-pie { padding: 1.8rem 0.8rem 2.2rem; }
  .pie-tarjeta {
    grid-template-columns: 1fr;
    gap: 1.6rem;
    padding: 4.4rem 10% 2.6rem;
    border-radius: 28px;
    text-align: center;
  }
  .pie-tarjeta::before { inset: 8px; border-radius: 22px; }
  .pie-filetes { top: 8px; height: 2.8rem; }
  .pie-secciones,
  .pie-contacto { margin-top: 0; align-items: center; }
  .pie-contacto a { grid-template-columns: 22px 2.4rem auto; text-align: left; font-size: 0.8rem; }

  /* bitácora: en celular las hojas se leen una debajo de otra */
  .diario-overlay { padding: 0.8rem; place-items: start center; overflow-y: auto; }

  .libro {
    width: 100%;
    aspect-ratio: auto;
    padding: 3.2rem 1.1rem 4.6rem;
    border-radius: 18px;
    background: url("../assets/tex/proceso-relieve.webp") center top / 100% auto repeat-y #f3ebdd;
  }

  .libro .pliego:not([hidden]) {
    position: relative;
    inset: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.4rem;
  }

  .libro .pliego > * { position: relative !important; left: auto !important; top: auto !important; width: min(300px, 92%) !important; height: auto !important; }
  .libro .foto img { height: auto; }
  .libro .tira { width: min(150px, 46%) !important; padding: 5px 5px 26px; }
  .libro .nota { padding: 1rem 0.95rem; }
  .libro .nota p { font-size: 0.78rem; }
  .libro .nota .cinta { top: -8px; width: 54px; height: 15px; }
  .libro .firma { font-size: 1.8rem; }
  .libro .foto:not(.tira) { width: min(230px, 72%) !important; transform: none; }

  .libro .flor-nav { position: absolute; top: auto; bottom: 1rem; width: 42px; }

  .libro-cerrar { top: 0.7rem; right: 0.7rem; width: 38px; }

  .libro-pestanas {
    left: 50%;
    top: 0.9rem;
    transform: translateX(-50%);
    flex-direction: row;
  }

  .libro-pestanas button {
    writing-mode: horizontal-tb;
    min-height: 0;
    padding: 0.45rem 0.8rem;
    border-radius: 999px;
    font-size: 0.62rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ini-proceso .carpeta,
  .ini-proceso .bitacora,
  .ini-habilidades .figura,
  .obra .boton { transition: none; }
  html { scroll-behavior: auto; }
}

/* fotos y notas de la bitácora: se pueden mover como antes */
.libro .arrastrable { cursor: grab; touch-action: none; transition: box-shadow 0.2s ease; }
.libro .arrastrable.arrastrando { cursor: grabbing; z-index: 20; box-shadow: 0 1.2cqw 2.4cqw rgba(60, 40, 30, 0.35); }
@media (max-width: 760px) {
  .libro .arrastrable { cursor: auto; touch-action: auto; }
}

/* Mi proceso creativo: el título del mismo vino que el párrafo */
.ini-proceso h2.titulo.script { color: var(--tinta); }

/* los botones de flor de Majo traen la flecha hacia la derecha: el de atrás va volteado */
.flor-nav.izq img { transform: scaleX(-1); }