/* Aluca · página «Somos». Se suma después de aluca.css. */

.migas { margin: clamp(4px, .6vw, 10px) var(--g) clamp(10px, 1vw, 16px); }
.migas ol { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0 calc(var(--g) * 1.2); list-style: none; font-size: var(--t-xs); color: var(--suave); }
.migas li + li::before { content: '/'; margin-right: 6px; opacity: .5; }
.migas a { text-decoration: underline; text-underline-offset: 3px; }
.migas a:hover { color: var(--acento); }

/* hero: tarjeta con texto a la izquierda y foto grande a la derecha */
.som-hero { display: grid; grid-template-columns: 1fr 1fr; gap: var(--g); margin: 0 var(--g); }
.som-hero__texto { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: clamp(16px, 1.6vw, 28px); padding: clamp(24px, 5vw, 96px); border-radius: var(--r); background: var(--tarjeta); transition: background-color .6s; }
.som-hero__texto .titulo { max-width: 11em; }
.som-hero__foto { position: relative; margin: 0; border-radius: var(--r); overflow: hidden; background: #16110E; min-height: clamp(380px, 44vw, 860px); }
.som-hero__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* quiénes somos */
.som-quienes { display: grid; grid-template-columns: 1fr 1fr; gap: var(--g) clamp(24px, 6vw, 120px); align-items: start; padding-inline: calc(var(--g) * 1.2); }
.som-quienes__cabeza { display: grid; gap: 14px; }
.som-quienes__cabeza .titulo { max-width: 12em; font-size: var(--t-xl); line-height: 1.06; letter-spacing: -.03em; }
.som-quienes__texto { display: grid; gap: 1.1em; }
.som-quienes__texto .parrafo { max-width: 40em; }

/* foto de la pareja (recuadro hasta tener la foto real) */
.som-pareja__foto { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; aspect-ratio: 21 / 9; border-radius: var(--r); border: 1.5px dashed var(--linea); background: var(--tarjeta); text-align: center; transition: background-color .6s; }
.som-pareja__foto svg { width: clamp(28px, 2.4vw, 42px); height: clamp(28px, 2.4vw, 42px); color: var(--acento); }
.som-pareja__foto p { margin: 0; font: 600 var(--t-xl)/1.1 'Manrope'; letter-spacing: -.03em; }
.som-pareja__foto small { color: var(--suave); font-size: var(--t-s); }

/* pasos */
.som-pasos { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--g); margin: 0; padding: 0; list-style: none; counter-reset: paso; }
.som-paso { display: flex; flex-direction: column; gap: 8px; padding: clamp(8px, .7vw, 12px) clamp(8px, .7vw, 12px) clamp(16px, 1.6vw, 28px); border-radius: var(--r); background: var(--tarjeta); transition: background-color .6s; }
.som-paso figure { margin: 0 0 clamp(8px, .8vw, 14px); aspect-ratio: 4 / 3; border-radius: calc(var(--r) * .7); overflow: hidden; background: #16110E; }
.som-paso figure img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--facil); }
.som-paso:hover figure img { transform: scale(1.05); }
.som-paso__num { padding-inline: clamp(8px, .8vw, 14px); font: 700 var(--t-xs)/1 'Manrope'; letter-spacing: .18em; color: var(--acento); }
.som-paso h3 { margin: 0; padding-inline: clamp(8px, .8vw, 14px); font: 600 var(--t-l)/1.2 'Manrope'; letter-spacing: -.01em; text-wrap: balance; }
.som-paso p { margin: 0; padding-inline: clamp(8px, .8vw, 14px); color: var(--suave); font-size: var(--t-s); line-height: 1.55; }

/* por qué */
.som-porque { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--g); }
.som-tarjeta { display: flex; flex-direction: column; gap: 10px; padding: clamp(20px, 2.2vw, 40px); border-radius: var(--r); background: var(--pastilla); transition: background-color .6s; }
.som-tarjeta svg { width: clamp(26px, 2.2vw, 38px); height: clamp(26px, 2.2vw, 38px); margin-bottom: clamp(24px, 3.5vw, 64px); color: var(--acento); }
.som-tarjeta h3 { margin: 0; font: 600 var(--t-l)/1.2 'Manrope'; letter-spacing: -.01em; }
.som-tarjeta p { margin: 0; color: var(--suave); font-size: var(--t-m); line-height: 1.55; max-width: 30em; }

/* cierre */
.som-cierre__caja { display: flex; flex-direction: column; align-items: center; gap: clamp(14px, 1.4vw, 24px); padding: clamp(40px, 6vw, 120px) var(--g); border-radius: var(--r); background: var(--acento); color: #fff; text-align: center; }
.som-cierre__caja .titulo { max-width: 12em; }
.som-cierre__caja p { margin: 0; max-width: 32em; font-size: var(--t-m); line-height: 1.5; opacity: .85; }
.som-cierre__botones { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 6px; }
.pastilla.som-cierre__wpp { background: linear-gradient(#fff, #fff) 50% 100% / 100% 0% no-repeat, rgba(255,255,255,.16); color: #fff; }
.pastilla.som-cierre__wpp:hover, .pastilla.som-cierre__wpp:focus-visible { background-size: 100% 100%; color: #250A03; }
.som-cierre .pastilla--clara:hover, .som-cierre .pastilla--clara:focus-visible { background-size: 100% 100%; }

@media (max-width: 1024px) {
  .som-pasos { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .som-hero { grid-template-columns: 1fr; }
  .som-hero__foto { min-height: 0; aspect-ratio: 4 / 3.4; order: -1; }
  .som-hero__texto { padding: 32px 20px 36px; }
  .som-quienes { grid-template-columns: 1fr; padding-inline: 4px; }
  .som-porque { grid-template-columns: 1fr; }
  .som-tarjeta svg { margin-bottom: 20px; }
}
@media (max-width: 560px) {
  .som-pasos { grid-template-columns: 1fr; }
  .som-cierre__botones { width: 100%; flex-direction: column; }
  .som-cierre__botones .pastilla { width: 100%; }
}

/* el cierre va pegado al footer */
main:has(.som-cierre:last-child) + .pie { margin-top: var(--g); }
@media (max-width: 860px) { .som-pareja__foto { aspect-ratio: 4 / 3; } }