/* Página «Sobre Katadoku». Reutiliza el hero, la cabecera, el pie y el cierre de
   la portada (style.css + home-v2.css); aquí solo están los bloques editoriales
   propios. Todos los textos son HTML, así que las traducciones solo cambian el
   contenido de la página, no estos estilos. */

/* Hero: misma estructura que la portada, con su propia ilustración. La zona
   izquierda de la imagen es papel liso y deja el texto limpio. */
.about-page .about-hero .hero-art{background:linear-gradient(90deg,rgba(243,239,229,.96) 0%,rgba(243,239,229,.82) 34%,rgba(243,239,229,.2) 52%,transparent 64%),url('../img/sobre%20katadoku/hero%20sobre%20katadoku.webp?v=20261015-2') right center/cover}
.about-page .about-hero .hero-content{min-height:550px}
.about-page .about-hero h1{color:#931d30}
.about-page .about-hero .hero-copy>p.about-hero-subtitle{max-width:none;margin:-4px 0 18px;color:#284333;font:400 clamp(24px,2.4vw,34px)/1.12 var(--serif);letter-spacing:-.01em;text-wrap:balance}

/* Bloques editoriales: texto e ilustración en dos columnas, con fondos de papel
   que alternan ligeramente. */
.about-block{padding:clamp(44px,4.7vw,68px) 0;background:#f3efe5}
.about-block:nth-of-type(odd){background:#efe8db}
.about-split{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:center;gap:clamp(32px,5vw,76px)}
.about-text h2{margin:0 0 18px;color:#931d30;font:400 clamp(30px,3vw,42px)/1.06 var(--serif);letter-spacing:-.015em;text-wrap:balance}
.about-text p{max-width:62ch;margin:0 0 14px;color:#2f2a24;font:400 17px/1.62 var(--sans)}
.about-text p:last-child{margin-bottom:0}
.about-text strong{color:var(--ink);font-weight:600}
.about-origin .about-split{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,4vw,56px)}
.about-figure{margin:0}
/* Bloques «cabecera + imagen + texto»: el HTML sigue el orden de lectura móvil
   (título, imagen, texto). En escritorio la imagen ocupa toda la primera
   columna y el título y el texto quedan centrados en la segunda. */
.about-stack{grid-template-rows:1fr auto auto 1fr;row-gap:0}
.about-stack>.about-figure,.about-stack>.about-scroll{grid-column:1;grid-row:1/5;align-self:center}
.about-stack>.about-head{grid-column:2;grid-row:2}
.about-stack>.about-body{grid-column:2;grid-row:3}
.about-author .about-body{margin-top:18px}
.about-figure img{display:block;width:100%;height:auto}

/* Quién está detrás: la foto conserva su marco de papel y las cintas. */
.about-author .about-split{grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr)}
.about-photo img{width:min(100%,430px);margin:0 auto}
.about-author-name{margin:-6px 0 6px;color:#284333;font:400 clamp(24px,2.3vw,30px)/1.1 var(--serif)}
.about-text .about-author-role{margin-bottom:18px;color:var(--sepia);font-size:15.5px;line-height:1.45}

/* Pergamino: el mismo papel rasgado que el cierre de la página, estirado al
   bloque para que el texto HTML ocupe la altura que necesite. */
.about-scroll{display:grid;align-content:center;justify-items:center;min-height:240px;padding:clamp(40px,4vw,56px) clamp(32px,3.6vw,54px);background:url('../img/fondo%20papel.webp?v=20260927-2') center/100% 100% no-repeat;filter:drop-shadow(0 6px 12px rgba(60,40,20,.12));text-align:center}
.about-scroll-title{margin:0 0 14px;color:#931d30;font:400 clamp(28px,2.8vw,40px)/1.1 var(--serif);text-wrap:balance}
.about-scroll-text{max-width:36ch;margin:0;color:#2f2a24;font:400 clamp(19px,1.7vw,22px)/1.5 var(--serif);text-wrap:pretty}

/* 9 casillas: frase final destacada. */
.about-text .about-essence{color:#931d30;font:400 22px/1.3 var(--serif);text-wrap:balance}

/* Aula: fondo algo más cálido para diferenciar el bloque. */
.about-block.about-classroom{border-block:1px solid rgba(118,95,72,.14);background:#e9dfcc}
.about-classroom .about-split{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr)}
.about-classroom .about-figure img{width:min(100%,430px);margin:0 auto}
/* Hasta que exista la página del aula solo se muestra «Próximamente». */
.about-cta{margin:24px 0 0}
.about-soon{padding:4px 11px 3px;border:1px solid rgba(147,29,48,.55);border-radius:999px;background:#fbf4e6;color:#931d30;font:600 11px/1.2 var(--sans);letter-spacing:.08em;text-transform:uppercase}

/* Cierre: componente de la portada con dos párrafos y el enlace a suscripción. */
.about-page .closing{padding:42px 0 44px}
.about-page .closing-newsletter h2{color:#931d30}
.about-page .closing-newsletter p{max-width:520px;margin:0 auto 10px;color:#2f2a24;font:400 16.5px/1.5 var(--sans)}
.about-page .closing-newsletter p strong{color:var(--ink);font-weight:600}
.about-page .newsletter-subscribe{margin-top:8px}
.about-page .newsletter-subscribe span{margin-left:9px}

/* Tablet: el texto ocupa más ancho que la zona de papel de la imagen; el
   degradado se alarga para que se lea bien sobre las fichas. */
@media (min-width:721px) and (max-width:1100px){
  .about-page .about-hero .hero-art{background:linear-gradient(90deg,rgba(243,239,229,.98) 0%,rgba(243,239,229,.95) 55%,rgba(243,239,229,.55) 70%,transparent 84%),url('../img/sobre%20katadoku/hero%20sobre%20katadoku.webp?v=20261015-2') right center/cover}
}

/* Composición apilada (tablet y móvil): cada bloque empieza por su título y
   las ilustraciones cierran o acompañan el texto con un peso parecido. */
@media (max-width:900px){
  .about-split,.about-origin .about-split,.about-author .about-split,.about-classroom .about-split{grid-template-columns:1fr;grid-template-rows:none;gap:28px}
  .about-stack>.about-figure,.about-stack>.about-scroll,.about-stack>.about-head,.about-stack>.about-body{grid-column:auto;grid-row:auto}
  .about-author .about-body{margin-top:0}
  .about-stack .about-head h2:last-child{margin-bottom:0}
  .about-figure img{width:min(86%,520px);margin:0 auto}
  .about-origin .about-figure img{width:min(82%,520px)}
  .about-photo img{width:min(70%,340px)}
  .about-classroom .about-figure img{width:min(80%,420px)}
  .about-cta{margin:0;text-align:center}
  .about-text p{max-width:none}
  .about-scroll{width:min(100%,560px);margin:0 auto}
}

@media (max-width:720px){
  .about-page .about-hero .hero-art{background:linear-gradient(180deg,rgba(243,239,229,.98) 0%,rgba(243,239,229,.93) 56%,rgba(243,239,229,.45) 78%,transparent 100%),url('../img/sobre%20katadoku/hero%20sobre%20katadoku.webp?v=20261015-2') 78% center/cover}
  .about-page .about-hero .hero-content{min-height:560px}
  .about-block{padding:40px 0}
  .about-split,.about-origin .about-split,.about-author .about-split,.about-classroom .about-split{gap:22px}
  .about-text h2{margin-bottom:14px}
  .about-text p{font-size:16.5px;line-height:1.6}
  .about-author-name{margin-top:-4px}
  .about-text .about-author-role{font-size:15.5px}
  .about-scroll{width:100%;margin:0;min-height:0;padding:46px 30px 48px}
  .about-scroll-title{margin-bottom:16px;font-size:28px}
  .about-scroll-text{max-width:none;font-size:18.5px;line-height:1.55}
  .about-soon{padding:6px 14px 5px;font-size:12px}
  /* Cierre: el pergamino aprovecha casi todo el ancho y pierde altura sobrante. */
  .about-page .closing{padding:32px 0 36px}
  .about-page .closing-paper{width:calc(100% - 20px);padding:64px 24px 92px}
  .about-page .closing-newsletter p{font-size:16.5px}
  .about-page .newsletter-subscribe{min-height:46px;padding:12px 20px;font-size:17px}
  /* Pie: más zona pulsable en los enlaces sin cambiar su aspecto. */
  .about-page .footer a{display:inline-block;margin:-12px 0;padding:12px 0}
}

/* Móviles estrechos: el texto del hero ocupa más líneas (sobre todo en francés);
   se alarga el hero para que la ilustración siga asomando por debajo. */
@media (max-width:400px){
  .about-page .about-hero .hero-content{min-height:610px}
}