/* PURE — /esencia.
   El contenido es real y es del cliente: la historia la escribió Lucero
   Sepúlveda, cofundadora, y la misión, visión, valores y enfoque están
   publicados por Pure en urelove.com/sobre-nosotros. Nada de esta página
   está redactado por nosotros salvo los tres rótulos de sección.

   Ninguna facilitadora se nombra aquí (Wilmar, 2026-09-21): los nombres van
   sólo en los talleres que ya ocurrieron. La formación del equipo se cuenta
   sin atribuirla a nadie. */

/* ——— 01 · Apertura ——————————————————————————————————————— */

.apertura{padding-block:clamp(44px,8vh,104px) clamp(48px,8vh,108px);overflow:hidden}
.centrado-texto{text-align:center;margin-inline:auto}

/* La palabra que empezó todo es el objeto más grande de la página, por encima
   del titular. No es una decoración: el relato entero cuelga de ella, y
   dársela al lector antes de que lea el párrafo es lo que hace que el párrafo
   signifique algo. Va `aria-hidden` porque el texto la repite dos líneas
   abajo y un lector de pantalla no debe oírla dos veces. */
.palabra{
  font-family:var(--script);
  font-size:clamp(3.4rem,13vw,9.5rem);
  line-height:.96;
  text-align:center;
  margin:clamp(14px,2.6vh,30px) 0 clamp(16px,2.6vh,30px);
  color:var(--coral);
  /* El cian sólo asoma por debajo, como la línea de la marca bajo el lazo. */
  text-shadow:0 clamp(2px,.5vw,6px) 0 #10b6de1f;
}

/* ——— 02 · La historia ———————————————————————————————————— */

.rejilla-historia{
  display:grid;
  grid-template-columns:minmax(0,.62fr) minmax(0,1fr);
  gap:clamp(28px,5vw,74px);
  align-items:start;
}
/* El retrato acompaña la lectura en vez de encabezarla: pegajoso, se queda
   mientras el relato corre al lado. En cuanto la pantalla no da para dos
   columnas deja de serlo, porque un elemento pegajoso encima de un texto
   largo en un teléfono se come media pantalla. */
.col-retrato{position:sticky;top:clamp(84px,12vh,118px)}
.retrato-historia{aspect-ratio:3/4;width:100%}
.retrato-historia img{width:100%;height:100%;object-fit:cover;display:block}
.pie-foto{
  font-size:.78rem;line-height:1.5;opacity:.66;
  margin-top:10px;padding-left:2px;
}
.pie-foto strong{font-weight:600;opacity:.9}

.relato{max-width:60ch}
.relato p{margin:0 0 15px;font-size:1.02rem;line-height:1.78}
.relato .titular{margin-bottom:22px}
.relato em{font-style:normal;font-weight:600;color:var(--coral)}
.relato strong{font-weight:600}

/* El mensaje: es la única cita de la página y el eje del relato, así que se
   sale del margen del texto en vez de ir entre comillas. La cinta de la marca
   hace de filo, no una barra gris. */
.mensaje{
  margin:clamp(22px,3.5vh,34px) 0;
  padding:clamp(16px,2.4vw,24px) 0 clamp(16px,2.4vw,24px) clamp(18px,2.6vw,30px);
  border-left:3px solid var(--coral);
}
.mensaje p{
  font-family:var(--script);
  font-size:clamp(1.25rem,2.6vw,1.85rem);
  line-height:1.38;
  margin:0;
  color:var(--tinta);
}

.bienvenida{
  font-weight:600;
  font-size:1.08rem;
  line-height:1.55;
  margin-top:clamp(20px,3vh,30px);
}

.firma-relato{
  display:flex;flex-direction:column;
  margin-top:clamp(22px,3.4vh,34px);
  padding-top:16px;
  border-top:1px solid #21264f1f;
}
.firma-relato .nombre{font-family:var(--script);font-size:1.5rem;line-height:1.3;color:var(--tinta)}
.firma-relato .cargo{font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;opacity:.6;margin-top:2px}

/* ——— 03 · Misión y visión ———————————————————————————————— */

.banda--papel{padding-block:clamp(46px,8vh,98px)}
.dos-columnas{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:clamp(28px,4.5vw,64px);
}
.parrafo-grande{
  font-size:clamp(1.02rem,1.5vw,1.16rem);
  line-height:1.7;
  margin-top:14px;
  max-width:46ch;
  opacity:.88;
}

/* ——— 04 · Valores ———————————————————————————————————————— */

/* Seis valores: una rejilla, no seis tarjetas. Poner borde, sombra y radio a
   cada uno diría "seis objetos separados" cuando son una sola lista. El único
   adorno es la línea corta de la marca sobre cada nombre. */
.valores{
  list-style:none;margin:clamp(26px,4vh,46px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));
  gap:clamp(22px,3.4vw,44px);
}
.valores li{margin:0}
.valores h3{
  font-size:1.18rem;font-weight:600;margin:0 0 6px;
  padding-top:14px;
  border-top:2px solid var(--cian);
}
.valores p{margin:0;font-size:.94rem;line-height:1.6;opacity:.8}

/* ——— 05 · El enfoque ————————————————————————————————————— */

.enfoque{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));
  gap:clamp(24px,3.4vw,46px);
  margin-top:clamp(28px,4vh,48px);
}
.enfoque h3{font-size:1.1rem;font-weight:600;margin:0 0 6px;color:var(--tinta)}
.enfoque p{margin:0;font-size:.95rem;line-height:1.66;opacity:.8}
.quien-acompana{
  margin-top:clamp(30px,4.4vh,52px);
  padding-top:clamp(20px,3vh,30px);
  border-top:1px solid #21264f1f;
  font-size:.98rem;line-height:1.7;opacity:.82;
  max-width:62ch;
}

/* ——— 06 · Cierre ————————————————————————————————————————— */

.bajo-firma{
  text-align:center;color:#ffffffdd;
  font-size:clamp(.98rem,1.4vw,1.1rem);
  margin-top:10px;
}
.centro-cta{text-align:center;margin-top:clamp(22px,3.4vh,34px)}

/* ——— Teléfono ———————————————————————————————————————————— */

@media(max-width:860px){
  .rejilla-historia{grid-template-columns:1fr}
  /* Pegajoso en una columna significa un retrato clavado encima de mil
     palabras. Aquí sube al principio, se lee, y se va. */
  .col-retrato{position:static;max-width:330px}
  .retrato-historia{max-height:none}
  .relato{max-width:none}
}