/* AG DIGITAL STUDIO · Diseño B (piloto: Automatización y aplicaciones)
   Concepto "el hilo": una línea fina conecta lo que pasa. Misma paleta y Montserrat que la versión actual,
   con bloques en verde profundo y grafito donde el teal sí puede brillar.
   Contrastes calculados (WCAG): blanco sobre verde profundo 10,8:1 · gris verdoso #D3DDDA sobre verde 7,8:1 ·
   teal claro #6EE7B7 sobre verde 7,1:1 y sobre grafito 11,4:1 · marfil sobre grafito 16,6:1 ·
   terracota texto #823C22 sobre marfil 7,7:1 · verde sobre marfil 10,4:1.
   Movimiento: todo lo animado termina en menos de 5 s y tiene botón "Repetir". Con "reducir movimiento"
   o sin JavaScript todo aparece ya completo. */

/* ---------- Piezas comunes ---------- */
.b-etiqueta { display: block; margin-bottom: 14px; font-size: .875rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--teal-claro); }
.b-etiqueta--claro { color: var(--verde); }

/* Migas de pan con zona pulsable de 44 px (AAA 2.5.5) */
.version-b .migas a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; }

/* ---------- Hero (verde profundo) ---------- */
.b-hero { position: relative; overflow: hidden; padding: 40px 0 64px; background: var(--verde); color: var(--blanco); }
.b-hero__rejilla { display: grid; grid-gap: 48px; align-items: center; }
.b-hero h1 { max-width: 14ch; font-size: 2.25rem; font-size: clamp(2.25rem, 5vw + .75rem, 4.25rem); letter-spacing: -.03em; line-height: 1.04; color: var(--blanco); }
.b-hero__parrafo { margin-top: 20px; max-width: 34rem; color: var(--sobre-verde-suave); font-size: 1.125rem; }
.b-hero__botones { display: grid; grid-gap: 12px; margin-top: 28px; }
.b-hero__enlace { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; font-weight: 500; color: var(--blanco); text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.b-hero__enlace .icono { margin-left: 8px; transition: transform .25s var(--anim); }
.b-hero__enlace:hover { text-decoration-thickness: 2px; }
.b-hero__enlace:hover .icono { transform: translateY(3px); }
.b-auto__glosario { margin-top: 6px; }
.b-hero .enlace-flecha { color: var(--blanco); }
.b-hero .termino { color: var(--blanco); }

/* El hilo: cuatro pasos unidos por una línea que se enciende en orden */
.b-flujo-caja { position: relative; }
.b-flujo { list-style: none; display: grid; margin: 0; padding: 0; }
.b-nodo { position: relative; display: grid; grid-template-columns: 56px 1fr; grid-gap: 16px; align-items: center; padding-bottom: 30px; }
.b-nodo:last-child { padding-bottom: 0; }
.b-nodo__icono {
  position: relative; z-index: 1; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px;
  background: var(--marfil); color: var(--verde); border: 2px solid var(--teal-claro);
  box-shadow: 0 0 0 6px rgba(110, 231, 183, .16);
}
.b-nodo__icono .icono { width: 26px; height: 26px; }
.b-nodo__txt { display: block; }
.b-nodo__titulo { display: block; font-weight: 600; font-size: 1.125rem; color: var(--blanco); }
.b-nodo__texto { display: block; margin-top: 2px; font-size: .9375rem; color: var(--sobre-verde-suave); }
/* tramo de hilo hasta el siguiente paso: pista tenue + relleno */
.b-nodo:not(:last-child)::before, .b-nodo:not(:last-child)::after {
  content: ""; position: absolute; left: 27px; top: 58px; bottom: 2px; width: 2px; border-radius: 2px;
}
.b-nodo:not(:last-child)::before { background: rgba(110, 231, 183, .3); }
.b-nodo:not(:last-child)::after { background: var(--teal-claro); transform-origin: top; }

.b-repetir {
  display: inline-flex; align-items: center; min-height: 44px; margin-top: 14px; padding: 8px 6px; border: 0; background: transparent;
  color: var(--sobre-verde-suave); font-weight: 500; font-size: .9375rem; text-decoration: underline; text-underline-offset: 4px; cursor: pointer;
}
.b-repetir .icono { margin-right: 8px; }
.b-repetir:hover, .b-repetir:focus-visible { color: var(--blanco); }

@media (prefers-reduced-motion: no-preference) {
  .b-anim:not(.corre) .b-nodo:not(:last-child)::after { transform: scaleY(0); }
  .b-anim:not(.corre) .b-nodo__icono { border-color: #4F7C76; box-shadow: none; }
  .b-anim.corre .b-nodo:not(:last-child)::after { animation: b-hilo-y .5s var(--anim) both; }
  .b-anim.corre .b-nodo__icono { animation: b-enciende .5s var(--anim) both; }
  .b-anim.corre .b-nodo:nth-child(1) .b-nodo__icono { animation-delay: 0s; }
  .b-anim.corre .b-nodo:nth-child(1)::after { animation-delay: .35s; }
  .b-anim.corre .b-nodo:nth-child(2) .b-nodo__icono { animation-delay: .9s; }
  .b-anim.corre .b-nodo:nth-child(2)::after { animation-delay: 1.25s; }
  .b-anim.corre .b-nodo:nth-child(3) .b-nodo__icono { animation-delay: 1.8s; }
  .b-anim.corre .b-nodo:nth-child(3)::after { animation-delay: 2.15s; }
  .b-anim.corre .b-nodo:nth-child(4) .b-nodo__icono { animation-delay: 2.7s; }
}
@keyframes b-hilo-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes b-enciende {
  from { border-color: #4F7C76; box-shadow: none; transform: scale(.94); }
  60% { transform: scale(1.06); }
  to { border-color: var(--teal-claro); box-shadow: 0 0 0 6px rgba(110, 231, 183, .16); transform: none; }
}

/* ---------- Tu día, antes y después ---------- */
.b-dia { padding: 64px 0 72px; background: var(--marfil); }
.b-interruptor { display: inline-flex; margin-top: 28px; padding: 4px; border: 2px solid var(--verde); border-radius: 999px; background: var(--blanco); }
.b-interruptor__op {
  min-height: 48px; padding: 0 26px; border: 0; border-radius: 999px; background: transparent; color: var(--grafito);
  font-weight: 500; cursor: pointer; transition: background-color .25s var(--anim), color .25s var(--anim);
}
.b-interruptor__op[aria-pressed="true"] { background: var(--verde); color: var(--blanco); font-weight: 600; }
.b-interruptor__op:not([aria-pressed="true"]):hover { background: var(--verde-tinte); }

.b-dia__lista { position: relative; display: grid; grid-gap: 18px; margin-top: 32px; padding-left: 0; }
.b-fila { position: relative; display: grid; grid-template-columns: 1fr; grid-gap: 10px; }
.b-fila__hora {
  justify-self: start; padding: 4px 14px; border-radius: 999px; background: var(--verde); color: var(--blanco);
  font-weight: 600; font-size: 1rem; letter-spacing: .02em;
}
.b-fila__tarjeta {
  padding: 18px 20px; border: 2px solid var(--verde); border-radius: var(--radio); background: var(--teal-tinte); color: var(--grafito);
  transition: transform .5s var(--anim), background-color .4s var(--anim), border-color .4s var(--anim);
}
.b-fila__tarjeta p { max-width: 38rem; }
.b-fila__quien { display: inline-block; margin-right: 10px; font-weight: 600; font-size: .875rem; letter-spacing: .08em; text-transform: uppercase; color: var(--verde); }
.b-fila__antes + .b-fila__despues { margin-top: 10px; }
/* Con JavaScript solo se ve la versión elegida */
.js .b-dia[data-vista="antes"] .b-fila__despues, .js .b-dia[data-vista="despues"] .b-fila__antes { display: none; }
.js .b-dia[data-vista="antes"] .b-fila__tarjeta { border: 2px dashed var(--terracota-texto); background: var(--terracota-tinte); }
.js .b-dia[data-vista="antes"] .b-fila__quien { color: var(--terracota-texto); }
@media (prefers-reduced-motion: no-preference) {
  .js .b-dia[data-vista="antes"] .b-fila:nth-child(odd) .b-fila__tarjeta { transform: rotate(-.8deg); }
  .js .b-dia[data-vista="antes"] .b-fila:nth-child(even) .b-fila__tarjeta { transform: rotate(.7deg) translateX(6px); }
  .b-fila__antes, .b-fila__despues { animation: b-cambia .45s var(--anim) both; }
}
@keyframes b-cambia { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.b-dia__cierre { margin-top: 32px; max-width: 34rem; font-size: 1.25rem; font-weight: 600; line-height: 1.35; color: var(--verde); }

/* ---------- Situaciones ---------- */
.b-sit { padding: 64px 0; background: var(--blanco); border-top: 1px solid var(--gris); }
.b-sit__lista { display: grid; grid-gap: 0; margin-top: 28px; }
.b-sit__fila { display: grid; grid-template-columns: 48px 1fr; grid-gap: 4px 16px; padding: 24px 0; border-top: 2px solid var(--gris); }
.b-sit__fila:last-child { border-bottom: 2px solid var(--gris); }
.b-sit__icono { grid-row: 1 / span 2; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--verde); color: var(--blanco); }
.b-sit__situacion { font-size: 1.125rem; font-weight: 600; line-height: 1.35; }
.b-sit__solucion { grid-column: 2; margin-top: 8px; }
.b-sit__tit { font-size: .875rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--verde); }
.b-sit__solucion p + p { margin-top: 4px; }
.b-sit__solucion .enlace-flecha { margin-top: 4px; }

/* ---------- Servicios en rejilla "bento" ---------- */
.b-servicios { padding: 64px 0 72px; }
.b-grupo { margin-top: 48px; font-size: 1.375rem; font-weight: 600; letter-spacing: -.01em; }
.b-grupo__intro { margin-top: 6px; color: var(--texto-suave); }
.b-bento { display: grid; grid-gap: 16px; margin-top: 20px; list-style: none; }
.b-serv { position: relative; display: flex; flex-direction: column; border-radius: var(--radio-grande); overflow: hidden; }
.b-serv__cuerpo { display: flex; flex-direction: column; flex: 1; padding: 24px; }
.b-serv__nombre { font-size: 1.25rem; font-weight: 600; letter-spacing: -.01em; }
.b-serv__desc { margin-top: 10px; }
.b-serv__ej { margin-top: 14px; }
.b-serv__ej-tit { font-size: .875rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.b-serv__ej ul { margin-top: 4px; padding-left: 18px; }
/* El botón de cada tarjeta se pega abajo: todos quedan al mismo nivel aunque el texto sea más largo o más corto */
.b-serv__pie { margin-top: auto; padding-top: 22px; }
.b-serv__pie .boton { max-width: 100%; white-space: nowrap; }
@media (max-width: 359.98px) { .b-serv--cta .b-serv__pie .boton { padding: 8px 10px; font-size: .9375rem; } .b-serv--cta .boton .icono { margin-right: 6px; } }

.b-serv--pequeno { background: var(--blanco); border: 2px solid var(--gris); }
.b-serv--pequeno::before { content: ""; position: absolute; left: 24px; top: 0; width: 32px; height: 4px; border-radius: 0 0 4px 4px; background: var(--verde); }
.b-serv--pequeno .b-serv__ej-tit { color: var(--texto-suave); }
.b-serv--pequeno:target { border-color: var(--verde); }

.b-serv--grande { background: var(--verde); color: var(--blanco); }
.b-serv--grande .b-serv__desc { color: var(--sobre-verde-suave); }
.b-serv--grande .b-serv__ej-tit { color: var(--teal-claro); }
.b-serv--grande .b-serv__ej { color: var(--blanco); }
.b-serv--grande .termino { color: var(--blanco); }
.b-serv--grande:target { outline: 3px solid var(--teal-claro); outline-offset: 3px; }

/* Demostraciones decorativas de los dos favoritos */
.b-demo { display: grid; place-items: center; height: 300px; padding: 28px 24px 0; background: #0F5A53; overflow: hidden; }   /* misma altura en las dos tarjetas */
.b-demo--avisos { place-items: start center; }
.b-movil {
  width: min(100%, 250px); padding: 14px 12px 12px; border: 3px solid var(--grafito); border-radius: 24px 24px 0 0; border-bottom: 0;
  background: var(--marfil); color: var(--grafito);
}
.b-movil__cab { margin-bottom: 8px; font-size: .875rem; font-weight: 600; color: var(--verde); }
.b-aviso {
  display: grid; grid-template-columns: 1fr auto; grid-gap: 0 8px; margin-top: 6px; padding: 8px 10px; border-radius: 10px;
  background: var(--blanco); border: 1px solid var(--gris); font-size: .875rem; line-height: 1.3;
}
.b-aviso b { font-weight: 600; }
.b-aviso span { grid-column: 1; color: var(--texto-suave); }
.b-aviso i { grid-column: 2; grid-row: 1 / span 2; align-self: center; padding: 2px 8px; border-radius: 999px; background: var(--verde); color: var(--blanco); font-style: normal; font-weight: 600; }

.b-demo--voz { grid-auto-flow: row; grid-gap: 18px; align-content: center; }
.b-onda { display: flex; align-items: center; justify-content: center; height: 54px; }
.b-onda span { width: 5px; height: 100%; margin: 0 3px; border-radius: 3px; background: var(--teal-claro); transform: scaleY(.25); }
.b-onda span:nth-child(3n) { transform: scaleY(.6); }
.b-onda span:nth-child(4n+1) { transform: scaleY(.9); }
.b-onda span:nth-child(5n+2) { transform: scaleY(.45); }
.b-doc { width: min(100%, 250px); padding: 12px 14px; border-radius: 12px; background: var(--marfil); color: var(--grafito); font-size: .875rem; line-height: 1.35; }
.b-doc b { display: block; font-weight: 600; }
.b-doc span { color: var(--verde); font-weight: 600; }

@media (prefers-reduced-motion: no-preference) {
  .b-anim:not(.corre) .b-aviso { opacity: 0; transform: translateY(14px); }
  .b-anim.corre .b-aviso { animation: b-entra .5s var(--anim) both; animation-delay: calc(.4s + var(--n) * .55s); }
  .b-anim:not(.corre) .b-doc { opacity: 0; transform: translateY(10px); }
  .b-anim.corre .b-doc { animation: b-entra .5s var(--anim) 2.4s both; }
  .b-anim.corre .b-onda span { animation: b-voz .5s ease-in-out 0s 5 alternate both; }
  .b-anim.corre .b-onda span:nth-child(odd) { animation-duration: .38s; animation-delay: .08s; animation-iteration-count: 6; }
}
@keyframes b-entra { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes b-voz { from { transform: scaleY(.2); } to { transform: scaleY(1); } }

/* ---------- Tú decides siempre (grafito) ---------- */
.b-decides { padding: 72px 0; background: var(--grafito); color: var(--marfil); }
.b-decides__titulo { max-width: 18ch; font-size: 2rem; font-size: clamp(2rem, 3.4vw + 1rem, 3.25rem); letter-spacing: -.025em; line-height: 1.08; color: var(--marfil); }
.b-decides__intro { margin-top: 16px; max-width: 34rem; color: var(--gris); }
.b-decides__lista { display: grid; grid-gap: 28px; margin-top: 40px; list-style: none; }
.b-decides__lista li { padding-top: 22px; border-top: 2px solid var(--teal); }
.b-decides__icono { display: inline-grid; place-items: center; width: 48px; height: 48px; margin-bottom: 14px; border: 2px solid var(--teal); border-radius: 14px; color: var(--teal-claro); }
.b-decides__lista h3 { font-size: 1.25rem; color: var(--marfil); }
.b-decides__lista p { margin-top: 8px; color: var(--gris); }
/* Los compromisos van apareciendo uno a uno (con JavaScript y sin "reducir movimiento") */
.b-decides__lista li { position: relative; border-top: 0; }
.b-decides__lista li::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--teal); transform-origin: left; }
@media (prefers-reduced-motion: no-preference) {
  .b-secuencia li { transition: opacity .7s var(--anim), transform .7s var(--anim); }
  .b-secuencia li::before { transition: transform .8s var(--anim) .15s; }
  .b-secuencia .b-decides__icono { transition: transform .6s cubic-bezier(.34, 1.56, .64, 1) .25s; }
  .b-secuencia li:not(.visible) { opacity: 0; transform: translateY(36px); }
  .b-secuencia li:not(.visible)::before { transform: scaleX(0); }
  .b-secuencia li:not(.visible) .b-decides__icono { transform: scale(.5); }
}

/* ---------- Tablet (desde 640 px) ---------- */
@media (min-width: 640px) {
  .b-hero__botones { display: flex; flex-wrap: wrap; }
  .b-hero__botones > * + * { margin-left: 4px; }
  .b-hero { padding: 56px 0 80px; }
  .b-bento--grandes { grid-template-columns: 1fr; }
  .b-sit__fila { grid-template-columns: 56px 1fr 1fr; grid-gap: 0 24px; align-items: start; }
  .b-sit__icono { grid-row: auto; width: 56px; height: 56px; }
  .b-sit__solucion { grid-column: auto; margin-top: 0; }
  .b-decides__lista { grid-template-columns: repeat(3, 1fr); grid-gap: 32px; }
  .b-fila { grid-template-columns: 96px 1fr; grid-gap: 24px; align-items: start; }
  .b-fila__hora { margin-top: 14px; justify-self: stretch; text-align: center; }
}

/* ---------- Ordenador (desde 900 px) ---------- */
@media (min-width: 900px) {
  .b-hero__rejilla { grid-template-columns: 1.05fr 1fr; grid-gap: 64px; }
  .b-bento--grandes { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1080px) {
  .b-hero { padding: 72px 0 96px; }
  .b-dia, .b-sit, .b-servicios { padding-top: 88px; padding-bottom: 88px; }
  .b-decides { padding: 96px 0; }
  .b-dia__lista { max-width: 52rem; }
}

/* ---------- Cinta de tarjetas (automatizaciones e historia) ----------
   Se desliza sola de forma continua, como las opiniones de una web: sin saltos entre tarjetas.
   Se detiene al pasar el ratón, al tocarla, al enfocarla con el teclado o con el botón de pausa. */
.b-carrusel { margin-top: 24px; }
.b-carrusel__barra { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 10px 16px; }
.b-carrusel__estado { margin-right: auto; font-weight: 600; color: var(--verde); }
.b-carrusel__estado:empty { display: none; }
.b-carrusel__ctrl { display: flex; align-items: center; gap: 8px; }
.b-carrusel__pausa {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 2px solid var(--verde); border-radius: 999px;
  background: var(--blanco); color: var(--verde); font-weight: 500; cursor: pointer;
}
.b-carrusel__pausa .b-ico { display: inline-flex; margin-right: 8px; }
.b-carrusel__pausa:hover { background: var(--verde-tinte); }
.b-carrusel__flecha {
  display: grid; place-items: center; width: 48px; height: 48px; border: 2px solid var(--verde); border-radius: 50%;
  background: var(--verde); color: var(--blanco); cursor: pointer; transition: background-color .2s var(--anim), transform .2s var(--anim);
}
.b-carrusel__flecha:hover { background: var(--verde-hover); transform: scale(1.06); }
.b-carrusel__flecha[aria-disabled="true"] { background: var(--gris); border-color: var(--gris); color: var(--texto-suave); cursor: default; transform: none; }
.b-carrusel__pista {
  display: flex; margin: 14px -20px 0; padding: 6px 20px 14px; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-padding-left: 20px; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.b-carrusel__pista::-webkit-scrollbar { display: none; }
.b-carrusel__pista > li { position: relative; flex: 0 0 82%; margin-right: 14px; scroll-snap-align: start; }   /* relative: el texto oculto (.oculto) no debe escapar de la cinta */
/* En modo cinta no hay imanes (frenarían el avance) */
.b-cinta .b-carrusel__pista { scroll-snap-type: none; }
.b-carrusel__progreso { height: 4px; margin-top: 4px; border-radius: 2px; background: #C5D3CE; overflow: hidden; }
.b-carrusel__progreso span { display: block; height: 100%; width: 43%; border-radius: 2px; background: var(--verde); transition: width .4s var(--anim); }
.b-carrusel__ayuda { margin-top: 10px; font-size: .9375rem; color: var(--texto-suave); }

/* ---------- Automatizaciones: banda en verde suave, con presencia propia ----------
   Fondo #CFE6DE: verde profundo sobre él 8,1:1 · grafito 11,9:1. En escritorio se ven todas las tarjetas a la vez;
   en móvil son una cinta con pausa. */
.b-auto { padding: 64px 0; background: #CFE6DE; color: var(--grafito); }
.b-auto__piloto {
  display: inline-flex; align-items: center; margin-bottom: 18px; padding: 6px 16px 6px 8px; border-radius: 999px;
  background: var(--verde); color: var(--blanco); font-weight: 600; font-size: .875rem; letter-spacing: .1em; text-transform: uppercase;
}
.b-auto__interruptor { position: relative; flex: none; width: 40px; height: 24px; margin-right: 10px; border-radius: 999px; background: var(--teal); }
.b-auto__interruptor span { position: absolute; top: 3px; left: 19px; width: 18px; height: 18px; border-radius: 50%; background: var(--verde); }
.b-auto__titulo { max-width: 20ch; font-size: 2rem; font-size: clamp(2rem, 4.2vw + 1rem, 3.5rem); letter-spacing: -.03em; line-height: 1.06; color: var(--verde); }
.b-auto__intro { margin-top: 14px; max-width: 34rem; font-size: 1.125rem; color: var(--grafito); }
.b-auto .b-carrusel__flecha[aria-disabled="true"] { background: rgba(11, 69, 64, .14); border-color: transparent; color: var(--verde); }
.b-auto .b-carrusel__estado, .b-auto .b-carrusel__ayuda { color: var(--grafito); }
.b-auto .b-carrusel__progreso { background: rgba(11, 69, 64, .2); }
.b-auto .b-serv--pequeno, .b-auto .b-serv--cta { border-color: var(--blanco); box-shadow: 0 10px 24px rgba(11, 69, 64, .10); }
.b-serv--cta { background: var(--verde); color: var(--blanco); border: 2px solid var(--verde); }
.b-serv--cta .b-serv__nombre { color: var(--blanco); }
.b-serv--cta .b-serv__desc { color: var(--sobre-verde-suave); }
.b-serv--cta .boton { width: 100%; justify-content: center; background: var(--teal); border-color: var(--teal); color: var(--sobre-teal); }
.b-serv--cta .boton:hover, .b-serv--cta .boton:focus-visible { background: #34D399; border-color: #34D399; }
.b-serv--cta:focus-within a:focus, .b-serv--cta a:focus { outline-color: var(--blanco); }

@media (prefers-reduced-motion: no-preference) {
  .b-anim:not(.corre) .b-auto__interruptor { background: #6B7280; }
  .b-anim:not(.corre) .b-auto__interruptor span { left: 3px; }
  .b-anim.corre .b-auto__interruptor { animation: b-enciende-fondo .4s var(--anim) .5s both; }
  .b-anim.corre .b-auto__interruptor span { animation: b-mueve-bola .4s var(--anim) .5s both; }
}
@keyframes b-enciende-fondo { from { background: #6B7280; } to { background: var(--teal); } }
@keyframes b-mueve-bola { from { left: 3px; } to { left: 19px; } }

/* ---------- Aplicaciones a medida (banda en verde profundo) ---------- */
.b-medida { padding: 72px 0; background: var(--verde); color: var(--blanco); }
.b-medida__rejilla { display: grid; grid-gap: 48px; align-items: center; }
.b-medida__titulo { max-width: 12ch; font-size: 2.25rem; font-size: clamp(2.25rem, 4.6vw + .75rem, 4rem); letter-spacing: -.03em; line-height: 1.04; color: var(--blanco); }
.b-medida__lead { margin-top: 16px; max-width: 28rem; font-size: 1.25rem; font-weight: 500; line-height: 1.4; color: var(--teal-claro); }
.b-medida__nombre { margin-top: 32px; font-size: 1.25rem; color: var(--blanco); }
.b-medida__desc { margin-top: 8px; max-width: 34rem; color: var(--sobre-verde-suave); }
.b-medida .termino { color: var(--blanco); }
.b-medida__pregunta { margin-top: 26px; font-weight: 600; color: var(--blanco); }
.b-medida__ejemplos { display: grid; grid-gap: 10px; margin: 12px 0 28px; max-width: 34rem; }
.b-ejemplo {
  display: flex; align-items: flex-start; min-height: 56px; padding: 14px 16px; border: 2px solid #86ADA8; border-radius: var(--radio);
  background: transparent; color: var(--blanco); text-align: left; line-height: 1.4; cursor: pointer;
  transition: background-color .25s var(--anim), border-color .25s var(--anim), color .25s var(--anim);
}
.b-ejemplo__punto { flex: none; width: 16px; height: 16px; margin: 3px 12px 0 0; border: 2px solid currentColor; border-radius: 50%; }
.b-ejemplo:hover { border-color: var(--blanco); }
.b-ejemplo[aria-pressed="true"] { background: var(--marfil); border-color: var(--teal-claro); color: var(--verde); font-weight: 600; }
.b-ejemplo[aria-pressed="true"] .b-ejemplo__punto { background: var(--verde); }
.oscuro .b-ejemplo:focus { outline-color: var(--blanco); }
.b-ejemplo[aria-pressed="true"]:focus { outline-color: var(--teal-claro); }

.b-medida__escena { position: relative; display: grid; place-items: center; min-height: 460px; border-radius: var(--radio-grande); background: #0F5A53; overflow: hidden; }
.b-medida__hilo { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.b-medida__hilo path { fill: none; stroke: var(--teal-claro); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; opacity: .75; }
.b-med-movil { position: relative; width: min(78%, 280px); margin: 36px 0; padding: 10px; border-radius: 34px; background: var(--grafito); box-shadow: 0 24px 48px rgba(0, 0, 0, .35); }
.b-med-movil__pantalla { min-height: 400px; padding: 20px 16px 16px; border-radius: 26px; background: var(--marfil); color: var(--grafito); overflow: hidden; }
.js .b-vista:not(.activa) { display: none; }
.b-vista__cab { font-size: .875rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--verde); }
.b-vista__titulo { margin-top: 12px; font-size: 1.375rem; font-weight: 600; line-height: 1.2; }
.b-vista__texto { margin-top: 6px; font-size: .9375rem; color: var(--texto-suave); }
.b-vista__lineas { display: grid; grid-gap: 12px; margin-top: 20px; list-style: none; }
.b-vista__lineas li { display: grid; grid-template-columns: 28px 1fr; align-items: center; grid-gap: 0 12px; font-size: .9375rem; font-weight: 500; }
.b-vista__marca { display: grid; place-items: center; width: 28px; height: 28px; border: 2px solid var(--verde); border-radius: 50%; background: var(--verde); color: var(--blanco); }
.b-vista__marca .icono { width: 16px; height: 16px; }
.b-vista__lineas .curso .b-vista__marca { background: transparent; }
.b-vista__barra { grid-column: 2; display: block; height: 8px; margin-top: 6px; border-radius: 4px; background: var(--gris); overflow: hidden; }
.b-vista__barra span { display: block; height: 100%; border-radius: 4px; background: var(--verde); }
.b-vista__estado { margin-top: 22px; padding: 10px 12px; border-radius: 12px; background: var(--teal-tinte); font-weight: 600; font-size: .9375rem; text-align: center; color: var(--verde); }

@media (prefers-reduced-motion: no-preference) {
  .b-vista.activa { animation: b-cambia .45s var(--anim) both; }
  .b-anim:not(.corre) .b-medida__hilo path { stroke-dashoffset: 1; }
  .b-anim.corre .b-medida__hilo path { animation: b-dibuja 1.8s var(--anim) both; }
  .b-anim:not(.corre) .b-vista.activa .b-vista__lineas li { opacity: 0; }
  .b-anim.corre .b-vista.activa .b-vista__lineas li { animation: b-entra .5s var(--anim) both; }
  .b-anim.corre .b-vista.activa .b-vista__lineas li:nth-child(1) { animation-delay: .5s; }
  .b-anim.corre .b-vista.activa .b-vista__lineas li:nth-child(2) { animation-delay: .8s; }
  .b-anim.corre .b-vista.activa .b-vista__lineas li:nth-child(3) { animation-delay: 1.1s; }
}
@keyframes b-dibuja { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

/* ---------- Historia de Antonio: cinta de tarjetas, una por paso ---------- */
.b-peli { padding: 56px 0 64px; background: var(--marfil); overflow: hidden; }
.b-paso-card { display: flex; flex-direction: column; padding: 20px; border: 2px solid var(--gris); border-radius: var(--radio-grande); background: var(--blanco); }
.b-paso-card__momento { display: flex; align-items: center; font-weight: 600; font-size: 1.0625rem; color: var(--verde); }
.b-paso-card__num { display: grid; place-items: center; flex: none; width: 36px; height: 36px; margin-right: 12px; border-radius: 50%; background: var(--verde); color: var(--blanco); }
.b-paso-card .movil { max-width: 230px; margin: 16px auto 0; padding: 8px; border-radius: 30px; }
.b-paso-card .movil__pantalla { min-height: 250px; padding: 16px 10px; border-radius: 23px; }
.b-paso-card__texto { margin-top: 16px; color: var(--grafito); }
.b-peli__cierre { margin-top: 28px; max-width: 34rem; font-size: 1.25rem; font-weight: 600; line-height: 1.35; color: var(--verde); }
.b-peli .historia__nota { margin-top: 14px; color: var(--texto-suave); font-size: .9375rem; }

/* Móvil: la banda de aplicaciones a medida, más compacta */
@media (max-width: 639.98px) {
  .b-medida { padding: 52px 0 56px; }
  .b-medida__rejilla { grid-gap: 32px; }
  .b-medida__escena { min-height: 0; padding: 8px 0; }
  .b-med-movil { margin: 24px 0; }
  .b-med-movil__pantalla { min-height: 340px; }
}

/* ---------- Tablet (desde 640 px) ---------- */
@media (min-width: 640px) {
  /* Automatizaciones: todas a la vez, sin cinta ni controles */
  .b-carrusel--auto .b-carrusel__barra, .b-carrusel--auto .b-carrusel__progreso, .b-carrusel--auto .b-carrusel__ayuda { display: none; }
  .b-carrusel--auto .b-carrusel__pista { display: grid; grid-template-columns: repeat(var(--c640, 2), 1fr); grid-gap: 16px; margin: 28px 0 0; padding: 0; overflow: visible; }
  .b-carrusel--auto .b-carrusel__pista > li { margin: 0; }
  .b-carrusel:not(.b-carrusel--auto) .b-carrusel__pista { margin-left: -32px; margin-right: -32px; padding-left: 32px; padding-right: 32px; scroll-padding-left: 32px; }
  .b-carrusel__pista > li { flex-basis: calc((100% - 28px) / 2); }
  .b-medida__ejemplos { grid-template-columns: 1fr 1fr; max-width: none; }
  .b-auto { padding: 72px 0; }
}

/* ---------- Ordenador (desde 900 px) ---------- */
@media (min-width: 900px) {
  .b-carrusel--auto .b-carrusel__pista { grid-template-columns: repeat(var(--c900, 3), 1fr); }
  .b-carrusel--auto .b-serv--cta { grid-column: span 2; }   /* 7 tarjetas + esta: sin huecos */
  .b-carrusel__pista { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; scroll-padding-left: 0; }
  .b-carrusel__pista > li { flex-basis: calc((100% - 42px) / 3); }
  .b-medida__rejilla { grid-template-columns: 1.05fr 1fr; grid-gap: 64px; }
  .b-medida__ejemplos { grid-template-columns: 1fr; }
  .b-medida__escena { min-height: 560px; }
}
@media (min-width: 1080px) {
  .b-medida, .b-peli, .b-auto { padding-top: 96px; padding-bottom: 96px; }
  .b-carrusel--auto .b-carrusel__pista { grid-template-columns: repeat(var(--c1080, 4), 1fr); }
  .b-carrusel--cinco .b-carrusel__pista > li:last-child { grid-column: auto; }
  .b-carrusel--auto .b-serv--cta { grid-column: span 1; }
}

/* ---------- Hover en escritorio (con ratón): la tarjeta sube un poco y su botón se rellena ---------- */
@media (hover: hover) and (pointer: fine) {
  .b-serv { transition: transform .28s var(--anim), box-shadow .28s var(--anim), border-color .28s var(--anim); }
  .b-serv:hover, .b-serv:focus-within { transform: translateY(-6px); }
  .b-auto .b-serv--pequeno:hover, .b-auto .b-serv--pequeno:focus-within { border-color: var(--verde); box-shadow: 0 20px 38px rgba(11, 69, 64, .20); }
  .b-serv--pequeno:hover .boton--sec, .b-serv--pequeno:focus-within .boton--sec { background: var(--verde); color: var(--blanco); }
  .b-serv--cta:hover, .b-serv--cta:focus-within { box-shadow: 0 20px 38px rgba(11, 69, 64, .30); }
  .b-serv--cta:hover .boton { background: #34D399; border-color: #34D399; }
  .b-serv--grande:hover, .b-serv--grande:focus-within { box-shadow: 0 22px 40px rgba(11, 69, 64, .28); }
}
@media (hover: hover) and (pointer: fine) {
  .js .b-serv--grande.aparece.visible { transition: transform .28s var(--anim), box-shadow .28s var(--anim), opacity .7s var(--anim); }
  .js .b-serv--grande.aparece.visible:hover, .js .b-serv--grande.aparece.visible:focus-within { transform: translateY(-6px); }
}
@media (prefers-reduced-motion: reduce) {
  .b-serv:hover, .b-serv:focus-within, .js .b-serv--grande.aparece.visible:hover, .js .b-serv--grande.aparece.visible:focus-within { transform: none !important; }
}

/* =====================================================================
   Páginas B: Reputación, Preguntas frecuentes, Contacto y Sobre mí
   ===================================================================== */

/* Columnas de la cuadrícula según cuántas tarjetas hay (640 px / 900 px / 1080 px) */
.b-carrusel--dos { --c640: 2; --c900: 2; --c1080: 2; }
.b-carrusel--tres { --c640: 1; --c900: 3; --c1080: 3; }
.b-carrusel--cuatro { --c640: 2; --c900: 2; --c1080: 4; }
.b-carrusel--cinco { --c640: 2; --c900: 2; --c1080: 5; }
.b-carrusel--doce { --c640: 2; --c900: 3; --c1080: 3; }
@media (min-width: 640px) and (max-width: 1079.98px) { .b-carrusel--cinco .b-carrusel__pista > li:last-child { grid-column: 1 / -1; } }

/* Variantes de las bandas verdes suaves y del hero */
.b-hero--grafito { background: var(--grafito); }
.b-auto--zona { padding: 48px 0; }
.b-auto--aporto, .b-auto--glosario, .b-auto--rep { padding-bottom: 64px; }
.b-tarjeta__icono { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 14px; border-radius: 14px; background: var(--verde); color: var(--blanco); }
.b-term .b-serv__nombre { font-size: 1.125rem; }
.b-term .b-serv__desc { margin-top: 8px; font-size: 1rem; }

/* ---------- Reputación: "¿A cuál llamarías tú?" ---------- */
.b-cual__pregunta { margin-top: 26px; font-weight: 600; color: var(--verde); }
.b-fichas { display: grid; grid-gap: 14px; margin-top: 12px; }
.b-ficha {
  display: flex; flex-direction: column; padding: 20px; border: 2px solid var(--verde); border-radius: var(--radio-grande);
  background: var(--blanco); color: var(--grafito); font: inherit; text-align: left; cursor: pointer;
  transition: background-color .25s var(--anim), color .25s var(--anim), border-color .25s var(--anim), transform .25s var(--anim), box-shadow .25s var(--anim);
}
.b-ficha__cab { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px; }
.b-ficha__nombre { font-size: 1.25rem; font-weight: 600; }
.b-ficha__nota { font-weight: 600; color: #6E4800; }          /* 8,1:1 sobre blanco */
.b-ficha__datos { display: grid; grid-gap: 6px; margin-top: 14px; color: var(--texto-suave); }
.b-ficha__datos span { display: block; padding-left: 16px; position: relative; }
.b-ficha__datos span::before { content: ""; position: absolute; left: 0; top: .7em; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.b-ficha[aria-pressed="true"] { background: var(--verde); border-color: var(--verde); color: var(--blanco); }
.b-ficha[aria-pressed="true"] .b-ficha__nota { color: var(--teal-claro); }
.b-ficha[aria-pressed="true"] .b-ficha__datos { color: var(--sobre-verde-suave); }
.b-resultado { margin-top: 20px; max-width: 42rem; }
.js .b-resultado__texto { display: none; }
.js .b-resultado__texto.visible { display: block; }
.b-resultado__texto { padding: 16px 18px; border-left: 4px solid var(--verde); border-radius: 0 var(--radio) var(--radio) 0; background: var(--blanco); font-size: 1.0625rem; }
.b-resultado__texto + .b-resultado__texto { margin-top: 12px; }
.b-cual__nota { margin-top: 14px; font-size: .9375rem; color: var(--texto-suave); }
@media (min-width: 640px) { .b-fichas { grid-template-columns: 1fr 1fr; } }
@media (prefers-reduced-motion: no-preference) { .b-resultado__texto.visible { animation: b-cambia .45s var(--anim) both; } }
@media (hover: hover) and (pointer: fine) {
  .b-ficha:hover { transform: translateY(-5px); box-shadow: 0 18px 34px rgba(11, 69, 64, .18); }
}
@media (prefers-reduced-motion: reduce) { .b-ficha:hover { transform: none !important; } }

/* ---------- Reglas en 4 columnas ("Lo que nunca hago") ---------- */
@media (min-width: 640px) { .b-decides__lista.b-decides__lista--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .b-decides__lista.b-decides__lista--4 { grid-template-columns: repeat(4, 1fr); } }

/* ---------- Preguntas frecuentes ---------- */
.b-faq-hero { padding: 44px 0 20px; background: var(--marfil); }
.b-faq-hero__titulo { font-size: 2.25rem; font-size: clamp(2.25rem, 5vw + .75rem, 4rem); letter-spacing: -.03em; line-height: 1.05; color: var(--verde); }
.b-buscador { margin-top: 26px; }
.b-buscador__label { display: block; margin-bottom: 8px; font-weight: 600; color: var(--verde); }
.b-buscador__campo { position: relative; display: block; }
.b-buscador__lupa { position: absolute; left: 18px; top: 50%; width: 24px; height: 24px; margin-top: -12px; color: var(--verde); pointer-events: none; }
.b-buscador__input {
  width: 100%; min-height: 56px; padding: 0 20px 0 54px; border: 2px solid var(--verde); border-radius: 999px;
  background: var(--blanco); color: var(--grafito); font: inherit; font-size: 1.0625rem;
}
.b-buscador__input::placeholder { color: var(--texto-suave); opacity: 1; }
.b-buscador__input:focus { outline: 3px solid var(--verde); outline-offset: 3px; }
.b-filtros { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.b-filtro { min-height: 44px; padding: 0 18px; border: 2px solid var(--verde); border-radius: 999px; background: var(--blanco); color: var(--verde); font-weight: 500; cursor: pointer; transition: background-color .2s var(--anim), color .2s var(--anim); }
.b-filtro:hover { background: var(--verde-tinte); }
.b-filtro[aria-pressed="true"] { background: var(--verde); color: var(--blanco); font-weight: 600; }
.b-faq__estado { min-height: 1.5em; margin-top: 14px; font-size: .9375rem; color: var(--texto-suave); }
.b-faq { padding: 12px 0 64px; background: var(--blanco); }
.b-faq__grupo + .b-faq__grupo { margin-top: 40px; }
.b-faq__grupo-titulo { margin-bottom: 4px; font-size: 1.375rem; color: var(--verde); }
.b-faq__vacio { margin-top: 28px; padding: 18px; border-radius: var(--radio); background: var(--verde-tinte); font-weight: 500; }
.b-noduda { padding: 52px 0; background: var(--grafito); color: var(--marfil); }
.b-noduda__fila { display: grid; grid-gap: 22px; align-items: center; }
.b-noduda__titulo { font-size: 1.75rem; font-size: clamp(1.75rem, 3vw + 1rem, 2.5rem); letter-spacing: -.02em; color: var(--marfil); }
.b-noduda__texto { margin-top: 8px; color: var(--gris); }
@media (min-width: 640px) { .b-noduda__fila { grid-template-columns: 1fr auto; } }

/* ---------- Contacto ---------- */
.b-guiado { min-width: 0; margin: 26px 0 0; padding: 0; border: 0; }
.b-guiado__leyenda { padding: 0; font-size: 1.25rem; font-weight: 600; color: var(--blanco); }
.b-guiado__ayuda { margin-top: 6px; max-width: 34rem; color: var(--sobre-verde-suave); }
.b-guiado__opciones { display: grid; grid-gap: 10px; margin: 14px 0 6px; max-width: 34rem; }
.b-opcion {
  position: relative; display: flex; align-items: center; min-height: 56px; padding: 12px 16px; border: 2px solid #86ADA8; border-radius: var(--radio);
  color: var(--blanco); line-height: 1.35; cursor: pointer; transition: background-color .25s var(--anim), border-color .25s var(--anim);
}
.b-opcion input { position: absolute; left: 0; top: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.b-opcion__caja { flex: none; display: grid; place-items: center; width: 26px; height: 26px; margin-right: 14px; border: 2px solid currentColor; border-radius: 8px; color: transparent; transition: background-color .2s var(--anim), border-color .2s var(--anim), color .2s var(--anim); }
.b-opcion:hover { border-color: var(--blanco); }
.b-opcion input:checked ~ .b-opcion__caja { background: var(--teal-claro); border-color: var(--teal-claro); color: var(--verde); }
.b-opcion:has(input:checked) { background: rgba(255, 255, 255, .1); border-color: var(--teal-claro); }
.b-opcion:has(input:focus-visible) { outline: 3px solid var(--blanco); outline-offset: 3px; }   /* 22/10: el foco rodea la tarjeta entera */
.b-hero__horario { margin-top: 14px; font-size: .9375rem; color: var(--sobre-verde-suave); }
.b-vista-previa { display: none; }
@media (min-width: 900px) {
  .b-vista-previa { display: block; }
  .b-vista-previa__tit { margin-bottom: 14px; text-align: center; font-weight: 600; color: var(--teal-claro); }
  .b-vista-previa .movil { max-width: 320px; margin: 0 auto; }
  .b-vista-previa .movil__pantalla { justify-content: flex-start; min-height: 360px; padding-top: 28px; }
}

/* Hilo con pasos que se encienden uno a uno (Contacto y Sobre mí) */
.b-camino { position: relative; margin-top: 32px; list-style: none; --p: 1; }
.b-camino::before, .b-camino::after { content: ""; position: absolute; left: 23px; top: 24px; bottom: 24px; width: 2px; border-radius: 2px; }
.b-camino::before { background: #C5D3CE; }
.b-camino::after { background: var(--verde); transform-origin: top; transform: scaleY(var(--p)); }
.b-camino__item { position: relative; display: grid; grid-template-columns: 48px 1fr; grid-gap: 0 18px; padding-bottom: 30px; }
.b-camino__item:last-child { padding-bottom: 0; }
.b-camino__marca { position: relative; z-index: 1; display: grid; place-items: center; width: 48px; height: 48px; border: 2px solid var(--verde); border-radius: 50%; background: var(--blanco); color: var(--verde); font-weight: 600; font-size: 1.125rem; }
.b-camino__marca .icono { width: 22px; height: 22px; }
.b-camino__fecha { font-weight: 600; font-size: .875rem; letter-spacing: .08em; color: var(--verde); }
.b-camino__titulo { margin-top: 2px; font-size: 1.1875rem; }
.b-camino__texto { margin-top: 6px; max-width: 36rem; color: var(--texto-suave); }
.b-camino--oscuro::before { background: rgba(110, 231, 183, .28); }
.b-camino--oscuro::after { background: var(--teal-claro); }
.b-camino--oscuro .b-camino__marca { background: var(--grafito); border-color: var(--teal-claro); color: var(--teal-claro); }
.b-camino--oscuro .b-camino__fecha { color: var(--teal-claro); }
.b-camino--oscuro .b-camino__titulo { color: var(--marfil); }
.b-camino--oscuro .b-camino__texto { color: var(--gris); }
@media (prefers-reduced-motion: no-preference) {
  .b-camino--anim::after { transition: transform .8s var(--anim); }
  .b-camino--anim .b-camino__item { transition: opacity .6s var(--anim), transform .6s var(--anim); }
  .b-camino--anim .b-camino__item:not(.visible) { opacity: 0; transform: translateY(28px); }
}
.b-pasos { padding-bottom: 64px; }

/* "Te digo 3 mejoras": banda grafito con onda de audio */
.b-gancho { padding: 64px 0; background: var(--grafito); color: var(--marfil); }
.b-gancho__rejilla { display: grid; grid-gap: 36px; align-items: center; }
.b-gancho__titulo { max-width: 18ch; font-size: 2rem; font-size: clamp(2rem, 3.6vw + 1rem, 3.25rem); letter-spacing: -.025em; line-height: 1.08; color: var(--marfil); }
.b-gancho__texto { margin-top: 16px; max-width: 36rem; color: var(--gris); }
.b-gancho .termino { color: var(--blanco); }
.b-gancho__puntos { display: grid; grid-gap: 10px; margin: 20px 0 26px; list-style: none; }
.b-gancho__puntos li { display: flex; align-items: flex-start; color: var(--marfil); }
.b-gancho__puntos .icono { flex: none; margin: 4px 10px 0 0; color: var(--teal-claro); }
.b-gancho__onda { display: none; }
.b-gancho .b-onda span { width: 6px; margin: 0 4px; }
@media (min-width: 900px) {
  .b-gancho__rejilla { grid-template-columns: 1.2fr .8fr; grid-gap: 56px; }
  .b-gancho__onda { display: grid; place-items: center; min-height: 280px; border-radius: var(--radio-grande); background: #262624; }
  .b-gancho__onda .b-onda { height: 130px; }
}

/* ---------- Sobre mí ---------- */
.b-foto { position: relative; max-width: 360px; margin: 0 auto; }
.b-foto img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radio-grande); }
.b-foto__sello { position: absolute; left: 14px; bottom: 14px; display: inline-flex; align-items: center; padding: 8px 14px; border-radius: 999px; background: var(--marfil); color: var(--verde); font-weight: 600; font-size: .9375rem; }
.b-foto__sello .icono { margin-right: 8px; }
.b-camino-sec { padding: 64px 0; background: var(--grafito); color: var(--marfil); }
.b-formacion { padding-bottom: 64px; }
.b-personal { background: var(--marfil); }
@media (min-width: 1080px) {
  .b-camino-sec, .b-gancho, .b-formacion, .b-pasos { padding-top: 88px; padding-bottom: 88px; }
  .b-noduda { padding: 64px 0; }
}

/* Contacto: título más contenido y opciones en dos columnas para que todo quepa en el primer pantallazo */
.b-contacto h1 { max-width: 20ch; font-size: 2.25rem; font-size: clamp(2.25rem, 3.4vw + 1rem, 3.25rem); }
.b-contacto .b-hero__parrafo { margin-top: 16px; }
.b-contacto .b-guiado { margin-top: 20px; }
.b-contacto .b-hero__botones { margin-top: 22px; }
@media (min-width: 640px) {
  .b-contacto .b-guiado__opciones { grid-template-columns: 1fr 1fr; max-width: 40rem; }
  .b-contacto .b-hero { padding-top: 48px; }
}

/* Sobre mí: título del hero más contenido (es una frase larga) */
.b-sobre h1 { max-width: 20ch; font-size: 2.125rem; font-size: clamp(2.125rem, 3vw + 1rem, 3rem); }

/* =====================================================================
   Páginas B (ronda 3): Servicios, Webs, Cómo trabajo, Blog y Sobre mí rediseñada
   ===================================================================== */

.b-auto__titulo--medio { font-size: 1.75rem; font-size: clamp(1.75rem, 2.6vw + 1rem, 2.5rem); margin-top: 56px; }
.b-camino__texto:empty { display: none; }

/* ---------- Notificaciones que van apareciendo (hero de Servicios y Blog) ---------- */
.b-notis ul { display: grid; grid-gap: 14px; list-style: none; max-width: 24rem; margin: 0 auto; }
.b-noti { display: flex; align-items: center; padding: 16px 18px; border-radius: var(--radio); background: var(--marfil); color: var(--grafito); font-weight: 600; box-shadow: 0 18px 36px rgba(0, 0, 0, .25); }
.b-noti__icono { flex: none; display: grid; place-items: center; width: 40px; height: 40px; margin-right: 14px; border-radius: 12px; background: var(--verde); color: var(--blanco); }
.b-noti:nth-child(2) { margin-left: 28px; }
.b-noti:nth-child(3) { margin-left: 8px; }
.b-notis--blog .b-noti { font-weight: 500; align-items: flex-start; }
@media (prefers-reduced-motion: no-preference) {
  .b-anim:not(.corre) .b-noti { opacity: 0; transform: translateY(24px); }
  .b-anim.corre .b-noti { animation: b-entra .6s var(--anim) both; animation-delay: calc(.3s + var(--n) * .6s); }
}

/* ---------- Servicios: diagnóstico "elige lo que te preocupa" ---------- */
.b-diag { margin-top: 26px; }
.b-diag__chips { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 760px) { .b-diag__chips { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.b-chipd {
  display: flex; align-items: center; min-height: 56px; padding: 8px 18px 8px 10px; border: 2px solid var(--verde); border-radius: 20px;
  background: var(--blanco); color: var(--verde); font: inherit; font-weight: 500; text-align: left; cursor: pointer;
  transition: background-color .2s var(--anim), color .2s var(--anim), transform .2s var(--anim);
}
.b-chipd__ico { display: grid; place-items: center; flex: none; width: 34px; height: 34px; margin-right: 10px; border-radius: 50%; background: var(--verde-tinte); color: var(--verde); }
.b-chipd__ico .icono { width: 18px; height: 18px; }
.b-chipd:hover { background: var(--verde-tinte); }
.b-chipd[aria-pressed="true"] { background: var(--verde); color: var(--blanco); font-weight: 600; }
.b-chipd[aria-pressed="true"] .b-chipd__ico { background: var(--teal-claro); color: var(--verde); }
.b-diag__vacio { margin-top: 18px; color: var(--texto-suave); }
.b-diag__paneles { margin-top: 18px; }
.js .b-diag__panel { display: none; }
.js .b-diag__panel.activo { display: block; }
.b-diag__panel { padding: 26px; border-radius: var(--radio-grande); background: var(--verde); color: var(--blanco); }
.b-diag__panel + .b-diag__panel { margin-top: 16px; }
.b-diag__problema { font-size: 1.375rem; color: var(--blanco); }
.b-diag__resp { margin-top: 10px; max-width: 40rem; color: var(--sobre-verde-suave); }
.b-diag__panel .termino { color: var(--blanco); }
.b-diag__linea { margin: 16px 0; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; font-size: .875rem; color: var(--teal-claro); }
@media (prefers-reduced-motion: no-preference) { .b-diag__panel.activo { animation: b-cambia .4s var(--anim) both; } }
@media (min-width: 900px) { .b-diag__paneles { max-width: 46rem; } }

/* ---------- Servicios: las tres líneas ---------- */
.b-linea__num { font-size: .875rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--verde); }
.b-linea .b-serv__nombre { margin-top: 4px; }
.b-puntos { display: grid; grid-gap: 2px; margin-top: 12px; list-style: none; }
.b-punto { display: flex; align-items: flex-start; color: var(--grafito); }
a.b-punto { display: inline-flex; align-items: center; min-height: 44px; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--verde); color: var(--verde); font-weight: 500; }
.b-punto .icono { flex: none; margin: 4px 8px 0 0; color: var(--verde); }
.b-punto--mas { color: var(--texto-suave); font-style: italic; }

/* ---------- Banda oscura (aplicaciones a medida, mantenimiento) ---------- */
.b-apps { padding: 64px 0; background: var(--verde); color: var(--blanco); }
.b-apps__rejilla { display: grid; grid-gap: 32px; }
.b-apps__titulo { max-width: 16ch; font-size: 2rem; font-size: clamp(2rem, 3.6vw + 1rem, 3.25rem); letter-spacing: -.025em; line-height: 1.08; color: var(--blanco); }
.b-apps__lead { margin-top: 16px; max-width: 30rem; font-size: 1.25rem; font-weight: 500; line-height: 1.4; color: var(--teal-claro); }
.b-apps__texto { margin-top: 14px; max-width: 36rem; color: var(--sobre-verde-suave); }
.b-apps .termino { color: var(--blanco); }
.b-apps__lista { display: grid; grid-gap: 10px; margin: 22px 0 28px; max-width: 36rem; list-style: none; }
.b-apps__lista li { display: flex; align-items: flex-start; color: var(--blanco); }
.b-apps__lista .icono { flex: none; margin: 4px 10px 0 0; color: var(--teal-claro); }

/* ---------- Servicios: por dónde empezar ---------- */
.b-empezar__lista { display: grid; grid-gap: 14px; margin-top: 26px; list-style: none; }
.b-empezar__op {
  display: flex; align-items: center; min-height: 80px; padding: 16px 18px; border: 2px solid var(--gris); border-radius: var(--radio-grande);
  background: var(--blanco); color: var(--grafito); text-decoration: none; transition: transform .25s var(--anim), border-color .25s var(--anim), box-shadow .25s var(--anim);
}
.b-empezar__op .b-tarjeta__icono { flex: none; margin: 0 16px 0 0; }
.b-empezar__txt { display: block; flex: 1; }
.b-empezar__nombre { display: block; font-weight: 600; font-size: 1.125rem; }
.b-empezar__linea { display: block; color: var(--verde); font-weight: 500; }
.b-empezar__flecha { flex: none; width: 24px; height: 24px; color: var(--verde); }
.b-empezar__otra { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 30px; }
.b-empezar__otra p { font-weight: 600; color: var(--verde); }
@media (min-width: 640px) { .b-empezar__lista { grid-template-columns: repeat(3, 1fr); } }
@media (hover: hover) and (pointer: fine) { .b-empezar__op:hover { transform: translateY(-5px); border-color: var(--verde); box-shadow: 0 18px 34px rgba(11, 69, 64, .16); } }
@media (prefers-reduced-motion: reduce) { .b-empezar__op:hover { transform: none !important; } }

/* ---------- Webs: tarjeta grande con ventana de navegador ---------- */
.b-bento--una { grid-template-columns: 1fr; }
.b-ventana { width: min(100%, 360px); border-radius: 14px 14px 0 0; background: var(--marfil); color: var(--grafito); overflow: hidden; box-shadow: 0 18px 40px rgba(0, 0, 0, .3); }
.b-ventana__barra { display: flex; align-items: center; padding: 10px 12px; background: var(--gris); }
.b-ventana__barra i { width: 10px; height: 10px; margin-right: 6px; border-radius: 50%; background: #8A8A86; }
.b-ventana__barra span { flex: 1; margin-left: 8px; padding: 3px 10px; border-radius: 999px; background: var(--blanco); font-size: .875rem; color: var(--texto-suave); }
.b-ventana__cuerpo { padding: 22px 18px 26px; }
.b-ventana__tit { font-size: 1.375rem; font-weight: 600; line-height: 1.15; color: var(--verde); }
.b-ventana__linea { display: block; height: 8px; margin-top: 12px; border-radius: 4px; background: var(--gris); }
.b-ventana__linea--corta { width: 60%; }
.b-ventana__boton { display: inline-block; margin-top: 16px; padding: 8px 16px; border-radius: 999px; background: var(--verde); color: var(--blanco); font-weight: 600; font-size: .9375rem; }
@media (prefers-reduced-motion: no-preference) {
  .b-anim:not(.corre) .b-ventana__cuerpo > * { opacity: 0; transform: translateY(12px); }
  .b-anim.corre .b-ventana__cuerpo > * { animation: b-entra .5s var(--anim) both; }
  .b-anim.corre .b-ventana__cuerpo > :nth-child(2) { animation-delay: .35s; }
  .b-anim.corre .b-ventana__cuerpo > :nth-child(3) { animation-delay: .5s; }
  .b-anim.corre .b-ventana__cuerpo > :nth-child(4) { animation-delay: .8s; }
}
@media (min-width: 900px) {
  .b-serv--ancha { flex-direction: row; }
  .b-serv--ancha .b-demo { flex: 0 0 46%; height: auto; min-height: 320px; }
  .b-serv--ancha .b-serv__cuerpo { padding: 32px 36px; justify-content: center; }
}

/* ---------- Cómo trabajo ---------- */
.b-chat-caja { max-width: 340px; margin: 0 auto; }
.b-chat .movil { max-width: 320px; margin: 0 auto; }
.b-chat .movil__pantalla { min-height: 340px; justify-content: flex-start; padding-top: 18px; }
.b-chat__cab { margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--gris); font-weight: 600; font-size: .9375rem; color: var(--verde); }
.b-chat .pant { display: block; }
.b-chat .pant + .pant { margin-top: 10px; }
.b-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 18px 0 0; list-style: none; }
.b-chips li { display: inline-flex; align-items: center; padding: 8px 14px; border-radius: 999px; background: rgba(255, 255, 255, .12); color: var(--blanco); font-size: .9375rem; font-weight: 500; }
.b-chips .icono { margin-right: 8px; color: var(--teal-claro); }
@media (prefers-reduced-motion: no-preference) {
  .b-anim:not(.corre) .b-chat .pant { opacity: 0; transform: translateY(16px); }
  .b-anim.corre .b-chat .pant { animation: b-entra .55s var(--anim) both; animation-delay: calc(.4s + var(--n) * 1s); }
}
/* Detalles de cada paso: se abren con un botón (sin JavaScript se ven abiertos) */
.b-mas { display: inline-flex; align-items: center; min-height: 44px; margin-top: 8px; padding: 0 4px; border: 0; background: transparent; color: var(--verde); font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.b-mas__flecha { margin-right: 8px; transition: transform .25s var(--anim); }
.b-mas[aria-expanded="true"] .b-mas__flecha { transform: rotate(180deg); }
.js .b-det[hidden] { display: none; }
.b-det { margin-top: 10px; max-width: 40rem; }
.b-det__caja { padding: 14px 16px; border-radius: var(--radio); background: var(--blanco); border: 2px solid var(--gris); }
.b-det__caja + .b-det__caja { margin-top: 10px; }
.b-det__tit { font-size: .875rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--verde); }
.b-det__parte { display: flex; align-items: flex-start; margin-top: 12px; font-weight: 500; }
.b-det__parte .icono { flex: none; margin: 4px 10px 0 0; color: var(--verde); }
@media (prefers-reduced-motion: no-preference) { .b-det:not([hidden]) { animation: b-cambia .4s var(--anim) both; } }
.b-decides__nota { margin-top: 36px; max-width: 38rem; color: var(--gris); }
.b-decides__enlace { margin-top: 10px; color: var(--teal-claro); }
.b-pilares, .b-camino-det { padding-bottom: 64px; }

/* ---------- Sobre mí: retrato en arco ---------- */
.b-retrato { position: relative; max-width: 380px; margin: 8px auto 0; padding-bottom: 8px; }
.b-retrato__marco { margin: 0; border-radius: 190px 190px 22px 22px; overflow: hidden; background: #0F5A53; border: 3px solid var(--teal-claro); }
.b-retrato__marco img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.b-retrato__sello { position: relative; width: fit-content; margin: 16px auto 0; display: flex; align-items: center; padding: 9px 16px; border-radius: 999px; background: var(--marfil); color: var(--verde); font-weight: 600; font-size: .9375rem; box-shadow: 0 10px 24px rgba(0, 0, 0, .25); }
.b-retrato__sello .icono { margin-right: 8px; }
.b-retrato__orbita { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 22px 0 0; list-style: none; }
.b-retrato__orbita li { padding: 8px 14px; border-radius: 999px; background: rgba(255, 255, 255, .12); color: var(--blanco); font-weight: 500; font-size: .9375rem; }
@media (min-width: 1080px) {
  .b-retrato__sello { position: absolute; right: -6px; bottom: 6px; margin: 0; }
  .b-retrato { max-width: 420px; padding: 24px 0 8px; }
  .b-retrato__orbita { position: absolute; left: 0; top: 0; width: 100%; height: 100%; margin: 0; padding: 0; pointer-events: none; }
  .b-retrato__orbita li { position: absolute; max-width: 14rem; background: var(--marfil); color: var(--verde); font-weight: 600; box-shadow: 0 12px 26px rgba(0, 0, 0, .28); }
  .b-retrato__orbita li:nth-child(1) { left: -64px; top: 12%; }
  .b-retrato__orbita li:nth-child(2) { right: -56px; top: 30%; }
  .b-retrato__orbita li:nth-child(3) { left: -80px; bottom: 28%; }
  .b-retrato__orbita li:nth-child(4) { right: -40px; top: -4%; }
}
@media (prefers-reduced-motion: no-preference) {
  .b-anim:not(.corre) .b-retrato__marco { clip-path: circle(30% at 50% 100%); }
  .b-anim.corre .b-retrato__marco { animation: b-arco 1s var(--anim) both; }
  .b-anim:not(.corre) .b-retrato__orbita li, .b-anim:not(.corre) .b-retrato__sello { opacity: 0; transform: scale(.85); }
  .b-anim.corre .b-retrato__orbita li { animation: b-pop .5s cubic-bezier(.34, 1.56, .64, 1) both; animation-delay: calc(.7s + var(--n) * .25s); }
  .b-anim.corre .b-retrato__sello { animation: b-pop .5s cubic-bezier(.34, 1.56, .64, 1) 1.8s both; }
}
@keyframes b-arco { from { clip-path: circle(30% at 50% 100%); } to { clip-path: circle(150% at 50% 100%); } }
@keyframes b-pop { from { opacity: 0; transform: scale(.8); } to { opacity: 1; transform: none; } }

/* ---------- Sobre mí: historia con puente ---------- */
.b-historia-sm__rejilla { display: grid; grid-gap: 28px; margin-top: 24px; }
.b-historia-sm__texto p { max-width: 38rem; }
.b-historia-sm__texto p + p { margin-top: 14px; }
.b-puente { display: grid; grid-gap: 18px; align-items: center; margin-top: 44px; padding: 28px 22px; border-radius: var(--radio-grande); background: var(--verde); color: var(--blanco); }
.b-puente__titulo { font-weight: 600; font-size: 1.125rem; color: var(--teal-claro); }
.b-puente__marcas { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; list-style: none; }
.b-puente__marcas li { padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .14); font-size: .9375rem; font-weight: 500; }
.b-puente__texto { margin-top: 10px; color: var(--sobre-verde-suave); }
.b-puente__arco { width: 100%; height: 90px; overflow: visible; }
.b-puente__suelo { fill: none; stroke: #4F7C76; stroke-width: 3; }
.b-puente__trazo { fill: none; stroke: var(--teal-claro); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; vector-effect: non-scaling-stroke; }
.b-puente__punto { fill: var(--blanco); offset-path: path('M0 120 C 60 120, 80 30, 150 30 S 240 120, 300 120'); offset-distance: 100%; }
@media (prefers-reduced-motion: no-preference) {
  .b-anim:not(.corre) .b-puente__trazo { stroke-dashoffset: 1; }
  .b-anim.corre .b-puente__trazo { animation: b-dibuja 1.8s var(--anim) both; }
  .b-anim:not(.corre) .b-puente__punto { offset-distance: 0%; opacity: 0; }
  .b-anim.corre .b-puente__punto { animation: b-cruza 2.4s var(--anim) .3s both; }
}
@keyframes b-cruza { from { offset-distance: 0%; opacity: 1; } to { offset-distance: 100%; opacity: 1; } }
@media (min-width: 900px) {
  .b-historia-sm__rejilla { grid-template-columns: 1.2fr .8fr; grid-gap: 56px; align-items: start; }
  .b-puente { grid-template-columns: 1fr minmax(180px, 280px) 1fr; padding: 34px 36px; grid-gap: 24px; }
  .b-puente__arco { height: 120px; }
}

/* ---------- Sobre mí: proyectos reales ---------- */
.b-proyectos__titulo { font-size: 1.75rem; font-size: clamp(1.75rem, 2.6vw + 1rem, 2.5rem); letter-spacing: -.02em; color: var(--verde); }
.b-proyectos__intro { margin-top: 8px; color: var(--grafito); }
.b-proyectos__lista { display: grid; grid-gap: 16px; margin-top: 24px; list-style: none; }
.b-proyecto { padding: 20px; border-radius: var(--radio-grande); background: var(--blanco); box-shadow: 0 10px 24px rgba(11, 69, 64, .10); }
.b-proyecto__nombre { font-weight: 600; font-size: 1.125rem; }
.b-proyecto__nombre span { display: block; margin-top: 2px; font-weight: 400; font-size: .9375rem; color: var(--texto-suave); }
.b-proyecto__dato { margin-top: 10px; color: var(--grafito); }
.b-proyecto__dato strong { color: var(--verde); font-size: 1.25rem; }
.b-proyecto__barra { display: block; height: 10px; margin-top: 12px; border-radius: 5px; background: var(--verde-tinte); overflow: hidden; }
.b-proyecto__barra span { display: block; width: var(--w); height: 100%; border-radius: 5px; background: var(--verde); }
.b-proyecto__equipo { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.b-proyecto__equipo i { width: 16px; height: 16px; border-radius: 50%; background: var(--teal); }
@media (prefers-reduced-motion: no-preference) {
  .b-anim .b-proyecto__barra span { transition: width 1.4s var(--anim); }
  .b-anim:not(.corre) .b-proyecto__barra span { width: 0; }
  .b-anim .b-proyecto__equipo i { transition: transform .35s cubic-bezier(.34, 1.56, .64, 1), opacity .35s var(--anim); transition-delay: calc(.4s + var(--n) * .06s); }
  .b-anim:not(.corre) .b-proyecto__equipo i { transform: scale(0); opacity: 0; }
}
@media (min-width: 900px) { .b-proyectos__lista { grid-template-columns: 1fr 1fr; } }

/* ---------- Sobre mí: trayectoria recorrible ---------- */
.b-ruta-sec { padding: 64px 0; background: var(--grafito); color: var(--marfil); }
.b-ruta { margin-top: 34px; }
.b-ruta__camino { position: relative; padding: 6px 0 4px; }
.b-ruta__linea { position: absolute; left: 22px; right: 22px; top: 28px; height: 3px; border-radius: 2px; background: rgba(110, 231, 183, .28); overflow: hidden; }
.b-ruta__linea span { display: block; width: 100%; height: 100%; background: var(--teal-claro); transform-origin: left; transform: scaleX(var(--p, 1)); transition: transform .6s var(--anim); }
.b-ruta__paradas { position: relative; display: flex; justify-content: space-between; list-style: none; }
.b-ruta__boton { display: flex; flex-direction: column; align-items: center; min-width: 44px; min-height: 44px; padding: 0; border: 0; background: transparent; color: var(--gris); font: inherit; cursor: pointer; }
.b-ruta__marca { display: grid; place-items: center; width: 44px; height: 44px; border: 2px solid var(--teal-claro); border-radius: 50%; background: var(--grafito); color: var(--teal-claro); transition: background-color .3s var(--anim), color .3s var(--anim), transform .3s var(--anim); }
.b-ruta__marca .icono { width: 20px; height: 20px; }
.b-ruta__anio { margin-top: 8px; font-size: .875rem; font-weight: 600; }
.b-ruta__parada.hecha .b-ruta__marca { background: #12403A; }
.b-ruta__parada.activa .b-ruta__marca { background: var(--teal-claro); color: var(--verde); transform: scale(1.14); }
.b-ruta__parada.activa .b-ruta__anio { color: var(--blanco); }
.b-ruta__fichas { margin-top: 26px; }
.js .b-ruta__ficha:not(.activa) { display: none; }
.b-ruta__ficha { padding: 22px; border-radius: var(--radio-grande); background: #262624; border-left: 4px solid var(--teal-claro); }
.b-ruta__ficha + .b-ruta__ficha { margin-top: 14px; }
.b-ruta__fecha { font-weight: 600; font-size: .875rem; letter-spacing: .1em; color: var(--teal-claro); }
.b-ruta__titulo { margin-top: 4px; font-size: 1.375rem; color: var(--marfil); }
.b-ruta__texto { margin-top: 8px; max-width: 42rem; color: var(--gris); }
.b-ruta__ctrl { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 20px; }
.b-ruta .b-carrusel__flecha { background: var(--marfil); border-color: var(--marfil); color: var(--grafito); }
.b-ruta .b-carrusel__flecha[aria-disabled="true"] { background: #3A3A38; border-color: #3A3A38; color: #B5B5B0; }
.b-ruta .b-ruta__pausa { background: transparent; border-color: var(--marfil); color: var(--marfil); }
.b-ruta__contador { margin-left: 6px; font-weight: 600; color: var(--gris); }
.b-ruta a:focus, .b-ruta button:focus { outline-color: var(--blanco); }
@media (prefers-reduced-motion: no-preference) { .b-ruta__ficha.activa { animation: b-cambia .45s var(--anim) both; } }
@media (min-width: 900px) { .b-ruta__linea { left: 30px; right: 30px; } .b-ruta__fichas { max-width: 46rem; } }

/* ---------- Sobre mí: traductor de formación ---------- */
.b-trad { display: grid; grid-gap: 14px; margin-top: 22px; list-style: none; }
.b-trad__item { padding: 18px; border: 2px solid var(--gris); border-radius: var(--radio-grande); background: var(--blanco); }
.b-trad__boton { display: none; width: 100%; align-items: center; padding: 0; border: 0; background: transparent; color: var(--grafito); font: inherit; text-align: left; cursor: pointer; }
.js .b-trad__boton { display: grid; grid-template-columns: 48px 1fr 24px; align-items: center; grid-gap: 0 14px; }
.js .b-trad__titulo-fijo { display: none; }
.b-trad__titulo-fijo { display: flex; align-items: center; font-size: 1.0625rem; color: var(--verde); }
.b-trad__titulo-fijo .icono { margin-right: 10px; flex: none; }
.b-trad__boton .b-tarjeta__icono { margin: 0; grid-row: 1 / span 2; align-self: start; }
.b-trad__nombre { flex: 1; min-width: 0; font-weight: 600; font-size: 1.0625rem; }
.b-trad__pista { grid-column: 2 / 4; margin: 4px 0 0; font-size: .9375rem; color: var(--verde); font-weight: 500; }
.b-trad__flecha { grid-column: 3; grid-row: 1; width: 24px; height: 24px; color: var(--verde); transition: transform .25s var(--anim); }
.b-trad__boton[aria-expanded="true"] .b-trad__flecha { transform: rotate(180deg); }
.b-trad__boton[aria-expanded="true"] .b-trad__pista { display: none; }
.b-trad__texto { margin-top: 12px; padding-top: 12px; border-top: 2px dashed var(--gris); color: var(--grafito); }
.js .b-trad__texto[hidden] { display: none; }
.b-trad__todo { margin-top: 16px; }
@media (prefers-reduced-motion: no-preference) { .b-trad__texto:not([hidden]) { animation: b-cambia .4s var(--anim) both; } }
@media (min-width: 640px) { .b-trad { grid-template-columns: 1fr 1fr; align-items: start; } }
@media (min-width: 1080px) { .b-trad { grid-template-columns: repeat(3, 1fr); } }
@media (hover: hover) and (pointer: fine) { .b-trad__item:hover { border-color: var(--verde); } }

/* ---------- Sobre mí: mi ruta ---------- */
.b-personal__rejilla { display: grid; grid-gap: 34px; align-items: center; }
.b-mapa { position: relative; display: grid; grid-gap: 20px; list-style: none; padding-left: 8px; }
.b-mapa::before { content: ""; position: absolute; left: 21px; top: 14px; bottom: 14px; width: 3px; border-radius: 2px; background: var(--verde); transform-origin: top; }
.b-mapa li { position: relative; display: grid; padding-left: 44px; }
.b-mapa__pin { position: absolute; left: 6px; top: 4px; width: 32px; height: 32px; border: 3px solid var(--verde); border-radius: 50% 50% 50% 0; background: var(--blanco); transform: rotate(-45deg); }
.b-mapa__pin::after { content: ""; position: absolute; left: 8px; top: 8px; width: 10px; height: 10px; border-radius: 50%; background: var(--verde); }
.b-mapa li:last-child .b-mapa__pin { background: var(--verde); }
.b-mapa li:last-child .b-mapa__pin::after { background: var(--teal-claro); }
.b-mapa__lugar { font-weight: 600; font-size: 1.1875rem; color: var(--verde); }
.b-mapa__texto { color: var(--grafito); }
@media (prefers-reduced-motion: no-preference) {
  .b-anim:not(.corre).b-mapa::before { transform: scaleY(0); }
  .b-anim.corre.b-mapa::before { animation: b-hilo-y 1.6s var(--anim) both; }
  .b-anim:not(.corre) .b-mapa__pin, .b-anim:not(.corre) .b-mapa__lugar, .b-anim:not(.corre) .b-mapa__texto { opacity: 0; transform: translateX(-10px); }
  .b-anim.corre li .b-mapa__pin { animation: b-pop .5s cubic-bezier(.34, 1.56, .64, 1) both; }
  .b-anim.corre li .b-mapa__lugar, .b-anim.corre li .b-mapa__texto { animation: b-entra .5s var(--anim) both; }
  .b-anim.corre li { animation-delay: calc(.3s + var(--n) * .45s); }
  .b-anim.corre li .b-mapa__pin, .b-anim.corre li .b-mapa__lugar, .b-anim.corre li .b-mapa__texto { animation-delay: calc(.3s + var(--n) * .45s); }
}
@media (min-width: 900px) { .b-personal__rejilla { grid-template-columns: 1fr 1fr; grid-gap: 64px; } }
@media (min-width: 1080px) { .b-ruta-sec, .b-apps { padding-top: 96px; padding-bottom: 96px; } .b-apps__rejilla { grid-template-columns: 1.1fr .9fr; align-items: center; } }

/* El texto dentro de un móvil dibujado siempre es oscuro, aunque el bloque donde está sea oscuro */
.movil__pantalla, .b-hero .movil__pantalla, .b-vista-previa .movil__pantalla, .b-chat .movil__pantalla { color: var(--grafito); }
.b-hero .movil__pantalla .burbuja__quien { color: var(--verde); }

/* =====================================================================
   Ronda 4 (09/10/2026): Servicios, Webs y Reputación
   ===================================================================== */

/* ---------- Logos de marca como icono (WhatsApp, Google) ----------
   Son imágenes a color: la casilla que las contiene pasa a fondo blanco con borde para que el logo se vea con su color original. */
.icono--marca { display: block; object-fit: contain; }
.icono--m-google-estrellas { width: auto; height: 16px; }
.b-nodo__icono .icono--marca, .b-sit__icono .icono--marca, .b-tarjeta__icono .icono--marca, .b-chipd__ico .icono--marca,
.b-noti__icono .icono--marca, .b-hub__icono .icono--marca, .b-camino__marca .icono--marca, .b-decides__icono .icono--marca,
.m-opcion__icono .icono--marca, .ct-paso__marca .icono--marca, .ct-tarjeta__icono .icono--marca, .b-ruta__marca .icono--marca { width: 28px; height: 28px; }
.b-sit__icono:has(.icono--marca), .b-tarjeta__icono:has(.icono--marca), .b-noti__icono:has(.icono--marca), .b-chipd__ico:has(.icono--marca),
.b-decides__icono:has(.icono--marca), .ct-paso__marca:has(.icono--marca), .ct-tarjeta__icono:has(.icono--marca), .b-ruta__marca:has(.icono--marca) {
  background: var(--blanco); border: 2px solid var(--gris);
}
.b-chipd__ico .icono--marca { width: 20px; height: 20px; }
.b-chipd[aria-pressed="true"] .b-chipd__ico:has(.icono--marca) { background: var(--blanco); }
.m-opcion:hover .m-opcion__icono:has(.icono--marca), .m-opcion:focus-visible .m-opcion__icono:has(.icono--marca) { background: var(--blanco); }

/* ---------- Hero claro (Servicios: el mapa general se distingue de las páginas de cada servicio) ---------- */
.b-hero--claro { background: var(--verde-tinte); color: var(--grafito); }
.b-hero--claro::before, .b-hero--claro::after { content: ""; position: absolute; border: 2px solid rgba(11, 69, 64, .14); border-radius: 50%; pointer-events: none; }
.b-hero--claro::before { right: -180px; top: -160px; width: 520px; height: 520px; }
.b-hero--claro::after { right: -40px; top: 40px; width: 300px; height: 300px; }
.b-hero--claro .b-hero__rejilla { position: relative; z-index: 1; }
.b-hero--claro h1 { color: var(--verde); }
.b-hero--claro .b-etiqueta { color: var(--verde); }
.b-hero--claro .b-hero__parrafo { color: var(--grafito); }
.b-hero--claro .b-hero__enlace { color: var(--verde); }
.b-hero--claro .termino, .b-hero--claro .enlace-flecha { color: var(--verde); }
.b-hero--claro + .b-dia { border-top: 0; }

/* Mapa: "Tu negocio" en el centro y tres ramas unidas por un hilo */
.b-hub { max-width: 27rem; margin: 0 auto; }
.b-hub__centro {
  display: inline-flex; align-items: center; padding: 10px 22px 10px 12px; border-radius: 999px; background: var(--verde); color: var(--blanco);
  font-weight: 600; font-size: 1.125rem; box-shadow: 0 14px 28px rgba(11, 69, 64, .25);
}
.b-hub__centro-ico { display: grid; place-items: center; width: 34px; height: 34px; margin-right: 10px; border-radius: 50%; background: var(--teal-claro); color: var(--verde); }
.b-hub__centro-ico .icono { width: 20px; height: 20px; }
.b-hub__ramas { display: grid; grid-gap: 14px; margin: 0 0 0 28px; padding: 28px 0 0 36px; list-style: none; }
.b-hub__rama {
  position: relative; display: flex; align-items: center; padding: 14px 16px; border: 2px solid var(--blanco); border-radius: var(--radio);
  background: var(--blanco); box-shadow: 0 14px 28px rgba(11, 69, 64, .12);
}
.b-hub__rama::before {   /* codo del hilo: baja desde la rama anterior y entra por el lado */
  content: ""; position: absolute; left: -38px; top: -16px; width: 38px; height: calc(50% + 16px);
  border-left: 2px solid var(--verde); border-bottom: 2px solid var(--verde); border-radius: 0 0 0 14px;
}
.b-hub__rama:first-child::before { top: -30px; height: calc(50% + 30px); }
.b-hub__rama:not(:last-child)::after { content: ""; position: absolute; left: -38px; top: 50%; bottom: -16px; width: 2px; background: var(--verde); }
.b-hub__icono { flex: none; display: grid; place-items: center; width: 48px; height: 48px; margin-right: 14px; border-radius: 14px; background: var(--verde-tinte); color: var(--verde); }
.b-hub__icono:has(.icono--marca) { background: var(--blanco); border: 2px solid var(--gris); }
.b-hub__titulo { display: block; font-weight: 600; font-size: 1.125rem; color: var(--verde); }
.b-hub__texto { display: block; color: var(--grafito); }
@media (prefers-reduced-motion: no-preference) {
  .b-anim:not(.corre) .b-hub__rama, .b-anim:not(.corre) .b-hub__centro { opacity: 0; transform: translateY(18px); }
  .b-anim.corre .b-hub__centro { animation: b-entra .5s var(--anim) both; }
  .b-anim.corre .b-hub__rama { animation: b-entra .55s var(--anim) both; animation-delay: calc(.35s + var(--n) * .5s); }
}
@media (min-width: 900px) { .b-hero--claro::before { right: -120px; width: 640px; height: 640px; } }

/* ---------- Las tres líneas: el botón ocupa todo el ancho de la tarjeta (siempre al mismo nivel, nunca se sale) ---------- */
.b-linea .b-serv__pie .boton { width: 100%; justify-content: center; white-space: normal; text-align: center; }

/* ---------- ¿No sabes por dónde empezar? ---------- */
.b-dia.b-empezar { background: var(--blanco); border-top: 1px solid var(--gris); }
.b-empezar__lista > li { display: flex; }
.b-empezar__op { flex: 1; width: 100%; background: var(--marfil); }
/* Franja de salto: frase + botón, en una misma pieza (se reutiliza en otras páginas) */
.b-salto { display: grid; grid-gap: 16px; align-items: center; margin-top: 32px; padding: 22px 22px; border-radius: var(--radio-grande); background: var(--verde-tinte); }
.b-salto__texto { font-size: 1.1875rem; font-weight: 600; line-height: 1.3; color: var(--verde); }
.b-salto .boton { width: 100%; justify-content: center; }
.b-salto.b-empezar__otra { display: grid; margin-top: 32px; }
@media (min-width: 640px) {
  .b-salto { grid-template-columns: 1fr auto; grid-gap: 28px; padding: 24px 30px; }
  .b-salto .boton { width: auto; }
  .b-salto__texto { font-size: 1.375rem; }
}

/* ---------- Así empezamos: banda grafito con los cuatro pasos en fila ---------- */
.b-dia.b-pasos--oscuro { padding: 72px 0; background: var(--grafito); color: var(--marfil); }
.b-pasos--oscuro .b-decides__titulo { max-width: none; }
.b-pasos--oscuro .b-camino__titulo { font-size: 1.25rem; }
.b-pasos--oscuro .b-camino__item:last-child .b-camino__marca { background: var(--teal-claro); border-color: var(--teal-claro); color: var(--verde); }
.b-pasos__boton { margin-top: 48px; }
.b-pasos--oscuro a:focus { outline-color: var(--blanco); }
@media (min-width: 900px) {
  .b-pasos--oscuro .b-camino { display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 28px; margin-top: 52px; }
  .b-pasos--oscuro .b-camino::before, .b-pasos--oscuro .b-camino::after { left: 24px; right: 24px; top: 23px; bottom: auto; width: auto; height: 2px; }
  .b-pasos--oscuro .b-camino::after { transform-origin: left; transform: scaleX(var(--p)); }
  .b-pasos--oscuro .b-camino__item { display: block; padding-bottom: 0; }
  .b-pasos--oscuro .b-camino__cuerpo { margin-top: 20px; padding-right: 12px; }
}
@media (min-width: 1080px) { .b-dia.b-pasos--oscuro { padding: 96px 0; } }

/* ---------- Enlaces de cierre de tarjeta y de módulo: botón en contorno, bien visible ---------- */
.version-b .b-sit__solucion .enlace-flecha, .version-b .sp-otras__ct .enlace-flecha, .version-b .b-faqlinea__enlace {
  min-height: 44px; padding: 0 18px; border: 2px solid var(--verde); border-radius: 999px; background: var(--blanco); color: var(--verde); font-weight: 600; text-decoration: none;
  transition: background-color .2s var(--anim), color .2s var(--anim);
}
.version-b .b-sit__solucion .enlace-flecha { margin-top: 12px; }
.version-b .b-sit__solucion .enlace-flecha:hover, .version-b .sp-otras__ct .enlace-flecha:hover, .version-b .b-faqlinea__enlace:hover,
.version-b .b-sit__solucion .enlace-flecha:focus-visible, .version-b .sp-otras__ct .enlace-flecha:focus-visible, .version-b .b-faqlinea__enlace:focus-visible { background: var(--verde); color: var(--blanco); text-decoration: none; }
/* "Muchos negocios lo combinan con…": la frase y el botón forman una misma franja */
.version-b .sp-otras__ct { display: grid; grid-gap: 14px; justify-items: start; margin-top: 28px; padding: 22px; border-radius: var(--radio-grande); background: var(--verde-tinte); font-weight: 600; font-size: 1.1875rem; line-height: 1.3; color: var(--verde); }
.version-b .sp-otras__ct .enlace-flecha { margin-left: 0; }
@media (min-width: 640px) {
  .version-b .sp-otras__ct { grid-template-columns: 1fr auto; align-items: center; grid-gap: 28px; padding: 24px 30px; font-size: 1.375rem; }
}

/* ---------- Preguntas sobre este servicio: fondo verde suave, título a un lado y dibujo ---------- */
.b-faqlinea { padding: 64px 0; border-top: 0; background: var(--verde-tinte); }
.b-faqlinea__rejilla { display: grid; grid-gap: 28px; }
.b-faqlinea h2 { font-size: 1.875rem; font-size: clamp(1.875rem, 2.6vw + 1rem, 2.75rem); letter-spacing: -.025em; line-height: 1.1; color: var(--verde); }
.b-faqlinea__texto { margin-top: 12px; max-width: 28rem; }
.b-faqlinea__dibujo { display: none; width: 100%; max-width: 240px; margin-top: 26px; }
.b-fl-a { fill: var(--verde); }
.b-fl-t { fill: var(--blanco); font-family: inherit; font-weight: 600; font-size: 64px; }
.b-fl-b { fill: var(--blanco); stroke: var(--verde); stroke-width: 3; }
.b-fl-c { fill: none; stroke: var(--teal); stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; }
.b-faqlinea .b-faqlinea__enlace { margin-top: 18px; }
.b-faqlinea .acordeon { margin-top: 0; border-top: 0; }
.b-faqlinea .acordeon details { margin-bottom: 10px; padding: 0 20px; border: 2px solid var(--blanco); border-radius: var(--radio); background: var(--blanco); }
.b-faqlinea .acordeon details[open] { border-color: var(--verde); }
.b-faqlinea .acordeon__resp { padding: 0 0 20px; }
@media (min-width: 640px) { .b-faqlinea__dibujo { display: block; } }
@media (min-width: 900px) {
  .b-faqlinea__rejilla { grid-template-columns: 5fr 7fr; grid-gap: 64px; align-items: start; }
  .b-faqlinea__intro { position: sticky; top: calc(var(--alto-cab) + 24px); }
}
@media (min-width: 1080px) { .b-faqlinea { padding: 96px 0; } }

/* ---------- Reputación: estrellas de Google en las fichas y fotos de ejemplo ---------- */
.b-ficha__nota { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px 0; }
.b-ficha__numero { font-weight: 600; font-size: 1.125rem; }
.b-estrellas { position: relative; display: inline-block; flex: none; width: 80px; height: 16px; margin: 0 8px; background: url(../img/marcas/google-estrellas-gris.svg) 0 0 / 80px 16px no-repeat; }
.b-estrellas::before { content: ""; position: absolute; left: 0; top: 0; width: var(--r); height: 100%; background: url(../img/marcas/google-estrellas.svg) 0 0 / 80px 16px no-repeat; }
.b-ficha__imagen { display: block; margin: 0 0 16px; border-radius: var(--radio); background: var(--verde-tinte); overflow: hidden; }
.b-ficha__imagen img { display: block; width: 100%; height: auto; }

/* Tres escenas dibujadas para las tarjetas de "Para que se hable bien de ti" */
.b-demo--mini { height: 220px; padding: 20px; place-items: center; }
.b-mini__estrellas { height: 16px; width: auto; margin: 0 auto; }
.b-cartel { width: 188px; padding: 14px 14px 12px; border-radius: 14px; background: var(--marfil); color: var(--grafito); text-align: center; box-shadow: 0 14px 28px rgba(0, 0, 0, .3); }
.b-cartel__qr { display: block; width: 72px; height: 72px; margin: 0 auto 8px; border: 5px solid var(--grafito); background: repeating-conic-gradient(var(--grafito) 0% 25%, var(--marfil) 0% 50%) 0 0 / 18px 18px; }
.b-cartel__tit { font-weight: 600; font-size: .9375rem; line-height: 1.2; }
.b-cartel__pie { margin-top: 4px; font-size: .875rem; color: var(--texto-suave); }
.b-cartel .b-mini__estrellas { margin-top: 6px; }
.b-mini-chat { width: min(100%, 250px); }
.b-mini-chat__burbuja { padding: 10px 12px; border-radius: 4px 14px 14px 14px; background: var(--marfil); color: var(--grafito); font-size: .875rem; line-height: 1.35; box-shadow: 0 10px 22px rgba(0, 0, 0, .25); }
.b-mini-chat__boton { display: flex; flex-direction: column; align-items: center; margin: 10px 0 0 auto; width: 70%; padding: 8px 10px; border-radius: 12px; background: var(--blanco); color: var(--verde); font-weight: 600; font-size: .875rem; }
.b-mini-chat__boton .b-mini__estrellas { margin-bottom: 4px; }
.b-mini-ficha { width: min(100%, 230px); padding: 12px 14px; border-radius: 14px; background: var(--marfil); color: var(--grafito); box-shadow: 0 14px 28px rgba(0, 0, 0, .3); }
.b-mini-ficha__cab { display: flex; align-items: center; font-size: .9375rem; }
.b-mini-ficha__cab .icono { width: 20px; height: 20px; margin-right: 8px; }
.b-mini-ficha__nota { display: flex; align-items: center; margin-top: 6px; }
.b-mini-ficha__nota b { margin-right: 8px; }
.b-mini-ficha__nota .b-mini__estrellas { margin: 0; }
.b-mini-ficha__estado { margin-top: 4px; font-size: .875rem; font-weight: 600; color: #0B6B3A; }
.b-mini-ficha__fotos { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 6px; margin-top: 10px; }
.b-mini-ficha__fotos i { display: block; height: 40px; border-radius: 8px; background: var(--teal-claro); }
.b-mini-ficha__fotos i:nth-child(2) { background: #86C9B1; }
.b-mini-ficha__fotos i:nth-child(3) { background: var(--verde-tinte); border: 1px solid var(--gris); }

/* ---------- Imágenes opcionales (mockups creados en ChatGPT) ---------- */
.b-apps__imagen { max-width: 520px; margin: 0 auto; }
.b-apps__imagen img { display: block; width: 100%; height: auto; filter: drop-shadow(0 22px 30px rgba(0, 0, 0, .3)); }
.b-demo--imagen { padding: 28px 24px; }
.b-demo--imagen img { display: block; width: 100%; height: 100%; max-height: 380px; object-fit: contain; filter: drop-shadow(0 18px 26px rgba(0, 0, 0, .3)); }
@media (min-width: 900px) { .b-serv--ancha .b-demo--imagen { flex: 0 0 52%; padding: 32px; } }
.b-hero__rejilla > * { min-width: 0; }
@media (max-width: 479.98px) { .b-hub__ramas { margin-left: 22px; padding-left: 26px; } .b-hub__rama::before, .b-hub__rama:not(:last-child)::after { left: -28px; } .b-hub__rama::before { width: 28px; } .b-hub__texto { font-size: .9375rem; } }
.b-hub__ramas { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 479.98px) {
  .b-hub__ramas { margin-left: 18px; padding-left: 24px; }
  .b-hub__rama::before { left: -26px; width: 26px; } .b-hub__rama:not(:last-child)::after { left: -26px; }
  .b-hub__rama { padding: 12px; } .b-hub__icono { width: 40px; height: 40px; margin-right: 10px; } .b-hub__titulo { font-size: 1rem; }
}
.b-hub__rama:not(:last-child)::after { top: calc(50% - 14px); }


/* =====================================================================
   Sobre mí · ronda 5
   ===================================================================== */
/* Hero cálido: se distingue de los heros verdes de las páginas de servicio */
.b-hero.b-sobre--calido { background: var(--terracota-tinte); color: var(--grafito); }
.b-sobre--calido::before, .b-sobre--calido::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; }
.b-sobre--calido::before { left: -140px; bottom: -200px; width: 460px; height: 460px; background: rgba(217, 143, 114, .18); }
.b-sobre--calido::after { right: -120px; top: -140px; width: 380px; height: 380px; border: 2px solid rgba(154, 69, 39, .18); }
.b-sobre--calido .b-hero__rejilla { position: relative; z-index: 1; }
.b-sobre--calido h1 { color: var(--verde); }
.b-sobre--calido .b-etiqueta { color: #823C22; }
.b-sobre--calido .b-hero__parrafo { color: var(--grafito); }
.b-sobre--calido .b-retrato__marco { background: var(--verde); border: 4px solid var(--blanco); box-shadow: 0 22px 44px rgba(130, 60, 34, .22); }
.b-sobre--calido .b-retrato__sello { background: var(--verde); color: var(--blanco); }
.b-sobre--calido .b-retrato__orbita li { background: var(--blanco); color: var(--verde); box-shadow: 0 10px 22px rgba(130, 60, 34, .16); }
.b-sobre--calido .b-retrato__orbita li::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 8px; border-radius: 50%; background: var(--terracota); }
.b-sobre--calido .b-retrato__orbita li:nth-child(even)::before { background: var(--teal); }

/* De las grandes marcas a tu negocio: dos tarjetas y una flecha (antes, un diagrama animado) */
.b-puente { display: block; padding: 28px 20px; background: var(--verde-tinte); color: var(--grafito); }
.b-puente__encabezado { max-width: 34rem; margin-bottom: 22px; font-size: 1.375rem; color: var(--verde); }
.b-puente__rejilla { display: grid; grid-gap: 14px; align-items: stretch; }
.b-puente__lado { padding: 22px; border-radius: var(--radio-grande); background: var(--blanco); box-shadow: var(--sombra); }
.b-puente__lado--der { background: var(--verde); color: var(--blanco); }
.b-puente__titulo { font-weight: 600; font-size: 1.125rem; color: var(--verde); }
.b-puente__lado--der .b-puente__titulo { color: var(--teal-claro); }
.b-puente__texto { margin-top: 6px; color: var(--texto-suave); }
.b-puente__lado--der .b-puente__texto { color: var(--sobre-verde-suave); }
.b-puente__marcas li { background: var(--verde-tinte); color: var(--verde); font-weight: 600; }
.b-puente__flecha { display: grid; place-items: center; justify-self: center; width: 48px; height: 48px; border-radius: 50%; background: var(--teal); color: var(--sobre-teal); transform: rotate(90deg); }
.b-puente__puntos { display: grid; grid-gap: 12px; margin-top: 16px; list-style: none; }
.b-puente__puntos li { display: flex; align-items: center; gap: 12px; font-weight: 500; }
.b-puente__puntos .b-tarjeta__icono { flex: none; width: 40px; height: 40px; margin: 0; border-radius: 12px; }
.b-puente__puntos .b-tarjeta__icono svg.icono { width: 22px; height: 22px; }
@media (min-width: 900px) {
  .b-puente { padding: 34px 36px; }
  .b-puente__rejilla { grid-template-columns: 1.15fr 56px 1fr; grid-gap: 18px; }
  .b-puente__flecha { align-self: center; transform: none; }
}
.b-puente__arco { display: none; }

/* Proyectos: casos destacados */
.b-proyecto__cifras { display: flex; flex-wrap: wrap; gap: 4px 20px; margin-top: 12px; color: var(--grafito); }
.b-proyecto__cifras strong { color: var(--verde); font-size: 1.375rem; }
.b-proyecto__equipo { margin-top: 12px; }
.b-proyectos__nota { margin-top: 18px; max-width: 40rem; color: var(--texto-suave); }

/* Traducir: todas las tarjetas del mismo tamaño y alineadas */
@media (min-width: 640px) { .b-trad { align-items: stretch; } }
.b-trad__item { display: flex; flex-direction: column; }
.js .b-trad__boton { align-content: start; flex: none; }
.b-trad__item .b-trad__texto { margin-top: auto; }
.b-trad__item .b-trad__texto:not([hidden]) { margin-top: 12px; }
.js .b-trad__boton { min-height: 96px; }

/* Un poco más de mí: texto con botones claros + ruta en tarjetas con iconos de color */
.b-personal__botones { display: grid; grid-gap: 12px; justify-items: start; margin-top: 24px; }
.b-personal__botones .boton { width: 100%; justify-content: center; }
@media (min-width: 640px) { .b-personal__botones { display: flex; flex-wrap: wrap; align-items: center; } .b-personal__botones .boton { width: auto; } }
.b-mapa { display: grid; grid-gap: 12px; padding-left: 0; }
.b-mapa::before { display: none; }
.b-mapa li { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 2px solid var(--gris); border-radius: var(--radio); background: var(--blanco); box-shadow: var(--sombra); }
.b-mapa li::after { content: ""; position: absolute; left: 36px; top: 100%; width: 2px; height: 12px; background: var(--gris); }
.b-mapa li:last-child::after { display: none; }
.b-mapa__pin { position: static; flex: none; display: grid; place-items: center; width: 48px; height: 48px; border: 0; border-radius: 14px; transform: none; }
.b-mapa__pin::after { display: none; }
.b-mapa__cuerpo { display: grid; }
.b-mapa li.b-mapa__final { border-color: var(--verde); background: var(--verde); }
.b-mapa__final .b-mapa__lugar { color: var(--teal-claro); }
.b-mapa__final .b-mapa__texto { color: var(--blanco); }
.b-mapa__final .b-mapa__pin { background: var(--blanco); }
.version-b .b-mapa__pin svg.icono { width: 26px; height: 26px; }
@media (prefers-reduced-motion: no-preference) {
  .b-anim:not(.corre) .b-mapa__pin, .b-anim:not(.corre) .b-mapa__cuerpo { opacity: 1; transform: none; }
  .b-anim:not(.corre).b-mapa li { opacity: 0; transform: translateX(-12px); }
  .b-anim.corre.b-mapa li { animation: b-entra .5s var(--anim) both; animation-delay: calc(.2s + var(--n) * .3s); }
  .b-anim.corre li .b-mapa__pin, .b-anim.corre li .b-mapa__lugar, .b-anim.corre li .b-mapa__texto { animation: none; }
}

/* Preguntas frecuentes (ronda 5): mismo diseño que "Preguntas sobre este servicio", con buscador y temas a la izquierda */
.b-faqpag { padding: 44px 0 64px; }
.b-faqpag__titulo { font-size: 2.25rem; font-size: clamp(2.25rem, 4vw + .75rem, 3.5rem); letter-spacing: -.03em; line-height: 1.05; color: var(--verde); }
.b-faqpag .b-buscador { margin-top: 22px; }
.b-filtros--lista { display: grid; grid-template-columns: 1fr; gap: 8px; margin-top: 16px; }
.b-filtros--lista .b-filtro { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0 16px; border-radius: var(--radio); text-align: left; }
.b-filtro__n { flex: none; min-width: 28px; margin-left: 12px; padding: 2px 8px; border-radius: 999px; background: var(--verde-tinte); color: var(--verde); font-size: .875rem; font-weight: 600; text-align: center; }
.b-filtro[aria-pressed="true"] .b-filtro__n { background: var(--blanco); }
@media (min-width: 480px) and (max-width: 899.98px) { .b-filtros--lista { grid-template-columns: 1fr 1fr; } }
.b-faqpag .b-faq { padding: 0; background: transparent; }
.b-faqpag .b-faq__grupo + .b-faq__grupo { margin-top: 28px; }
.b-faqpag .b-faq__grupo-titulo { margin-bottom: 12px; font-size: 1.125rem; letter-spacing: .02em; color: var(--verde); }
.b-faqpag .acordeon { margin-top: 0; border-top: 0; }
.b-faqpag .acordeon details { margin-bottom: 10px; padding: 0 20px; border: 2px solid var(--blanco); border-radius: var(--radio); background: var(--blanco); }
.b-faqpag .acordeon details[open] { border-color: var(--verde); }
.b-faqpag .acordeon__resp { padding: 0 0 20px; }
@media (min-width: 900px) { .b-faqpag .b-faqlinea__rejilla { grid-template-columns: 5fr 7fr; } }
@media (min-width: 1080px) { .b-faqpag { padding: 64px 0 96px; } }
@media (min-width: 900px) and (max-height: 759.98px) { .b-faqpag .b-faqlinea__intro { position: static; } }

/* Contacto (ronda 5): hero claro con opciones en tarjetas de color y mensaje de ejemplo sobre un panel verde */
.b-hero.b-contacto--claro { background: var(--marfil); color: var(--grafito); border-bottom: 1px solid var(--gris); }
.b-contacto--claro h1 { color: var(--verde); }
.b-contacto--claro .b-etiqueta { color: var(--verde); }
.b-contacto--claro .b-hero__parrafo { color: var(--grafito); }
.b-contacto--claro .b-guiado__leyenda { color: var(--verde); }
.b-contacto--claro .b-guiado__ayuda { color: var(--texto-suave); }
.b-contacto--claro .b-hero__enlace { color: var(--verde); }
.b-contacto--claro .b-hero__horario { color: var(--texto-suave); }
.b-contacto--claro .b-opcion { border-color: var(--gris); background: var(--blanco); color: var(--grafito); box-shadow: var(--sombra); font-weight: 500; }
.b-contacto--claro .b-opcion:hover { border-color: var(--verde); }
.b-contacto--claro .b-opcion:has(input:checked) { background: var(--verde-tinte); border-color: var(--verde); }
.b-contacto--claro .b-opcion__caja { margin: 0 0 0 auto; border-color: var(--verde); color: transparent; }
.b-contacto--claro .b-opcion input:checked ~ .b-opcion__caja { background: var(--verde); border-color: var(--verde); color: var(--blanco); }
.b-contacto--claro .b-opcion:has(input:focus-visible) { outline-color: var(--verde); }
.b-opcion__ico { order: -1; flex: none; display: grid; place-items: center; width: 40px; height: 40px; margin-right: 12px; border-radius: 12px; }
.b-opcion__ico svg.icono { width: 22px; height: 22px; }
.b-opcion__ico .icono--marca { width: 24px; height: 24px; }
.b-opcion__ico:has(.icono--marca) { background: var(--blanco); border: 2px solid var(--gris); }
.b-opcion__texto { margin-right: 10px; }
@media (min-width: 900px) {
  .b-contacto--claro .b-vista-previa { padding: 28px 24px 32px; border-radius: var(--radio-grande); background: var(--verde); box-shadow: 0 24px 48px rgba(11, 69, 64, .25); }
}
/* Zona de trabajo */
.b-zona { background: var(--blanco); padding: 56px 0 64px; }
.b-zona__titulo { max-width: 30ch; font-size: 1.75rem; font-size: clamp(1.75rem, 2.4vw + 1rem, 2.5rem); letter-spacing: -.02em; line-height: 1.12; color: var(--verde); }
.b-zona__texto { margin-top: 12px; max-width: 40rem; }
.b-zona__formas { display: grid; grid-gap: 14px; margin-top: 26px; list-style: none; }
.b-zona__formas li { padding: 22px; border: 2px solid var(--gris); border-radius: var(--radio-grande); background: var(--blanco); box-shadow: var(--sombra); }
.b-zona__formas h3 { font-size: 1.1875rem; color: var(--verde); }
.b-zona__formas p { margin-top: 6px; color: var(--grafito); }
@media (min-width: 768px) { .b-zona__formas { grid-template-columns: repeat(3, 1fr); } }
.b-contacto--claro .b-opcion__texto { flex: 1; min-width: 0; }
.b-contacto--claro .b-opcion__caja { order: 2; margin: 0 0 0 8px; }

/* "Así empezamos" (Servicios): los cuatro pasos aparecen de uno en uno y el hilo se dibuja despacio (rápido, pero sin atropellarse) */
@media (prefers-reduced-motion: no-preference) and (min-width: 900px) {
  .b-pasos--oscuro .b-camino--anim::after { transition: transform 2.4s cubic-bezier(.4, 0, .4, 1) .2s; }
  .b-pasos--oscuro .b-camino--anim .b-camino__item { transition: opacity .7s var(--anim), transform .7s var(--anim); }
  .b-pasos--oscuro .b-camino--anim .b-camino__item:nth-child(2) { transition-delay: .6s; }
  .b-pasos--oscuro .b-camino--anim .b-camino__item:nth-child(3) { transition-delay: 1.2s; }
  .b-pasos--oscuro .b-camino--anim .b-camino__item:nth-child(4) { transition-delay: 1.8s; }
}

/* =====================================================================
   Ronda 5 · segunda tanda
   ===================================================================== */
/* Sobre mí: hero partido (texto en marfil · retrato sobre bloque verde que sale hasta el borde) */
.b-hero.b-sobre--split { padding: 0; background: var(--marfil); color: var(--grafito); }
.b-sobre--split .b-hero__rejilla { grid-gap: 0; align-items: stretch; }
.b-sobre--split .b-hero__texto { padding: 40px 0 44px; }
.b-sobre--split h1 { color: var(--verde); }
.b-sobre--split .b-etiqueta { color: var(--verde); }
.b-sobre--split .b-hero__parrafo { color: var(--grafito); }
.b-split { position: relative; display: flex; flex-direction: column; align-items: center; padding: 40px 20px 36px; background: var(--verde); }
.b-split::before, .b-split::after { content: ""; position: absolute; top: 0; bottom: 0; width: 100vmax; background: var(--verde); }
.b-split::before { right: calc(100% - 2px); }
.b-split::after { left: calc(100% - 2px); }
.b-split__foto { position: relative; width: 100%; max-width: 340px; margin: 0; }
.b-split__foto img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radio-grande); border: 4px solid var(--blanco); }
.b-split__tarjeta { position: absolute; left: -12px; bottom: 22px; display: grid; padding: 12px 16px; border-radius: var(--radio); background: var(--blanco); box-shadow: 0 14px 28px rgba(0, 0, 0, .25); color: var(--grafito); }
.b-split__tarjeta strong { font-size: 1.0625rem; color: var(--verde); }
.b-split__tarjeta span { font-size: .9375rem; }
.b-split__datos { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 26px 0 0; list-style: none; }
.b-split__datos li { padding: 8px 14px; border-radius: 999px; background: rgba(255, 255, 255, .14); color: var(--blanco); font-weight: 500; font-size: .9375rem; }
.b-split__sello { display: flex; align-items: center; margin-top: 16px; color: var(--teal-claro); font-weight: 600; font-size: .9375rem; }
.b-split__sello .icono { margin-right: 8px; }
@media (min-width: 900px) {
  .b-sobre--split .b-hero__rejilla { grid-template-columns: 1.1fr .9fr; }
  .b-sobre--split .b-hero__texto { padding: 72px 48px 72px 0; align-self: center; }
  .b-split { padding: 40px 40px 36px; }
  .b-split::before { display: none; }
  .b-split__foto { max-width: 300px; }
  .b-split__datos { margin-top: 20px; }
}
@media (prefers-reduced-motion: no-preference) {
  .b-anim:not(.corre) .b-split__foto img, .b-anim:not(.corre) .b-split__tarjeta, .b-anim:not(.corre) .b-split__datos li { opacity: 0; transform: translateY(18px); }
  .b-anim.corre .b-split__foto img { animation: b-entra .7s var(--anim) both; }
  .b-anim.corre .b-split__tarjeta { animation: b-pop .5s cubic-bezier(.34, 1.56, .64, 1) .6s both; }
  .b-anim.corre .b-split__datos li { animation: b-entra .5s var(--anim) both; animation-delay: calc(.8s + var(--n) * .15s); }
}

/* Contacto: hero compacto (cabe sin hacer scroll) y transición clara hacia "Qué pasa cuando me escribes" */
.b-contacto--claro .b-hero__rejilla { grid-gap: 28px; }
.b-hero.b-contacto--claro { padding: 24px 0 40px; border-bottom: 0; }
.b-contacto h1 { font-size: 2rem; font-size: clamp(2rem, 2.4vw + 1rem, 3rem); }
.b-contacto .b-hero__parrafo { margin-top: 12px; font-size: 1.0625rem; }
.b-contacto .b-guiado { margin-top: 16px; }
.b-contacto .b-guiado__leyenda { font-size: 1.0625rem; }
.b-contacto .b-guiado__opciones { grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0 0; max-width: 38rem; }
.b-contacto--claro .b-opcion { min-height: 52px; padding: 8px 10px; font-size: .9375rem; }
.b-contacto--claro .b-opcion__ico { width: 34px; height: 34px; margin-right: 8px; }
.b-contacto--claro .b-opcion__ico svg.icono { width: 20px; height: 20px; }
.b-contacto--claro .b-opcion__caja { width: 22px; height: 22px; margin-left: 4px; }
.b-contacto .b-hero__botones { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin-top: 16px; }
.b-contacto .b-hero__horario { margin-top: 8px; }
@media (max-width: 479.98px) {
  .b-contacto--claro .b-opcion__caja { display: none; }
  .b-contacto--claro .b-opcion { font-size: .875rem; }
  .b-contacto--claro .b-opcion__ico { display: none; }
  .b-contacto--claro .b-opcion:has(input:checked) .b-opcion__texto::after { content: " ✓"; font-weight: 700; }
}
@media (min-width: 900px) {
  .b-hero.b-contacto--claro { padding: 32px 0 48px; }
  .b-contacto--claro .b-vista-previa { padding: 18px 20px 22px; }
  .b-contacto .b-vista-previa .movil { max-width: 270px; }
  .b-contacto .b-vista-previa .movil__pantalla { min-height: 260px; padding-top: 22px; }
  .b-contacto .b-vista-previa__tit { margin-bottom: 8px; }
}
.b-dia.b-pasos--tras-hero { position: relative; padding-top: 88px; background: var(--verde-tinte); border-top: 0; }
.b-pasos--tras-hero .b-pasos__nudo { position: absolute; left: 50%; top: -28px; display: grid; place-items: center; width: 56px; height: 56px; margin-left: -28px; border: 4px solid var(--marfil); border-radius: 50%; background: var(--verde); color: var(--blanco); box-shadow: 0 8px 18px rgba(11, 69, 64, .25); }
.b-pasos--tras-hero .b-camino::before { background: #B5CEC6; }

/* Cierre de "Cuando te buscan…" en una sola línea y distinto según se vea "Sin web" o "Con web" */
.b-dia__cierre--linea { max-width: none; }
.b-dia__cierre--dual .b-dia__cierre-con { display: none; }
[data-vista="despues"] .b-dia__cierre--dual .b-dia__cierre-con { display: inline; }
[data-vista="despues"] .b-dia__cierre--dual .b-dia__cierre-sin { display: none; }
@media (min-width: 640px) { .b-dia__cierre--linea { font-size: clamp(1.125rem, 1.6vw, 1.25rem); white-space: nowrap; } }

/* Cinco ideas: títulos largos ("Acompañamiento") caben dentro de su tarjeta sin tocar el borde */
.b-carrusel--cinco .b-serv__nombre { font-size: 1.0625rem; letter-spacing: -.01em; overflow-wrap: anywhere; hyphens: auto; }
@media (min-width: 1080px) { .b-carrusel--cinco .b-serv__cuerpo { padding-left: 16px; padding-right: 16px; } }

/* Glosario (Preguntas frecuentes): 6 tarjetas y "Ver más" de 3 en 3 en pantallas anchas */
.b-vermas { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 28px; }
.b-vermas[hidden] { display: none; }
.b-vermas__estado { font-size: .9375rem; color: var(--texto-suave-fuerte); }
@media (min-width: 640px) { .b-glosario--pagina .b-term--oculta { display: none; } }
@media (max-width: 639.98px) { .b-vermas { display: none; } }
.b-term:focus { outline: 3px solid var(--verde); outline-offset: 3px; }

/* =====================================================================
   Sobre mí · hero editorial (nombre grande a los lados del retrato, sobre fondo oscuro)
   ===================================================================== */
.b-hero.b-sobre--ed { padding: 0; background: #0E1110; color: var(--blanco); }
.b-sobre--ed::before { content: ""; position: absolute; left: 50%; top: 38%; width: 900px; height: 900px; margin: -450px 0 0 -450px; border-radius: 50%; background: radial-gradient(circle, rgba(16, 185, 129, .20), rgba(11, 69, 64, .10) 45%, transparent 70%); pointer-events: none; }
.ed { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr; justify-items: center; padding-top: 28px; padding-bottom: 44px; text-align: center; }
.ed__eyebrow { font-size: .875rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--sobre-verde-suave); }
.b-sobre--ed .ed__nombre { display: flex; flex-direction: column; align-items: center; margin-top: 22px; font-weight: 600; font-size: 3.5rem; font-size: clamp(3.25rem, 15vw, 5.5rem); letter-spacing: -.035em; line-height: .98; color: var(--blanco); max-width: none; }
.ed__n2 { color: var(--teal-claro); }
.ed__foto { position: relative; width: 100%; max-width: 280px; margin: 24px 0 0; }
.ed__foto img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 160px 160px 24px 24px; border: 2px solid rgba(255, 255, 255, .22); -webkit-mask-image: linear-gradient(#000 78%, transparent); mask-image: linear-gradient(#000 78%, transparent); }
.ed__texto { margin-top: 8px; }
.ed__lema { font-size: 1.25rem; font-weight: 500; color: var(--blanco); max-width: 22rem; margin: 0 auto; }
.ed__botones { display: grid; justify-items: center; gap: 6px; margin-top: 20px; }
.ed__boton { background: var(--blanco); border-color: var(--blanco); color: #0E1110; }
.ed__boton:hover, .ed__boton:focus-visible { background: var(--teal-claro); border-color: var(--teal-claro); color: #0E1110; }
.ed__enlace { display: inline-flex; align-items: center; min-height: 44px; font-weight: 500; color: var(--sobre-verde-suave); text-decoration: underline; text-underline-offset: 5px; }
.ed__enlace .icono { margin-left: 8px; }
.ed__dato { display: grid; gap: 2px; margin-top: 22px; padding: 14px 20px; border: 1px solid rgba(255, 255, 255, .22); border-radius: var(--radio); background: rgba(255, 255, 255, .06); text-align: left; max-width: 17rem; }
.ed__dato strong { font-size: 1.75rem; line-height: 1.1; color: var(--teal-claro); }
.ed__dato span { font-size: .9375rem; color: var(--sobre-verde-suave); }
.ed__tag { margin-top: 22px; font-size: .875rem; font-weight: 500; letter-spacing: .28em; text-transform: uppercase; color: var(--sobre-verde-suave); }
@media (min-width: 900px) {
  .ed { grid-template-columns: 1fr minmax(300px, 380px) 1fr; grid-template-rows: auto auto auto auto; align-items: center; padding-top: 32px; padding-bottom: 36px; text-align: left; min-height: min(760px, calc(100vh - 140px)); }
  .ed__eyebrow { grid-column: 1 / -1; grid-row: 1; justify-self: start; }
  .b-sobre--ed .ed__nombre { grid-column: 1 / -1; grid-row: 2; display: grid; grid-template-columns: 1fr minmax(300px, 380px) 1fr; align-items: center; margin-top: 0; width: 100%; font-size: clamp(2.75rem, 5.2vw, 5.25rem); white-space: nowrap; }
  .ed__n1 { grid-column: 1; justify-self: end; padding-right: 24px; }
  .ed__n2 { grid-column: 3; justify-self: start; padding-left: 24px; margin-top: 1.4em; }
  .ed__foto { grid-column: 2; grid-row: 2; max-width: none; margin: 8px 0 0; z-index: 2; }
  .ed__texto { grid-column: 1; grid-row: 3; align-self: end; margin: 0; }
  .ed__lema { margin: 0; max-width: 20rem; }
  .ed__botones { justify-items: start; }
  .ed__dato { grid-column: 3; grid-row: 3; justify-self: end; align-self: end; margin: 0; }
  .ed__tag { grid-column: 1 / -1; grid-row: 4; justify-self: center; margin-top: 24px; }
}
@media (prefers-reduced-motion: no-preference) {
  .b-anim:not(.corre) .ed__nombre span, .b-anim:not(.corre) .ed__foto, .b-anim:not(.corre) .ed__dato, .b-anim:not(.corre) .ed__texto { opacity: 0; transform: translateY(22px); }
  .b-anim.corre .ed__nombre span { animation: b-entra .8s var(--anim) both; }
  .b-anim.corre .ed__n2 { animation-delay: .2s; }
  .b-anim.corre .ed__foto { animation: b-entra .9s var(--anim) .1s both; }
  .b-anim.corre .ed__texto { animation: b-entra .7s var(--anim) .5s both; }
  .b-anim.corre .ed__dato { animation: b-entra .7s var(--anim) .7s both; }
}

/* Sobre mí: retrato recortado (PNG) sin marco, por delante del nombre */
.b-sobre--ed .ed__foto { max-width: 320px; margin-top: 18px; z-index: 2; }
.b-sobre--ed .ed__foto img { aspect-ratio: auto; border: 0; border-radius: 0; -webkit-mask-image: none; mask-image: none; filter: drop-shadow(0 24px 40px rgba(0, 0, 0, .45)); }
@media (min-width: 900px) {
  .ed { grid-template-columns: 1fr minmax(380px, 460px) 1fr; }
  .b-sobre--ed .ed__nombre { grid-template-columns: 1fr minmax(380px, 460px) 1fr; }
  .b-sobre--ed .ed__foto { grid-row: 2 / 4; align-self: end; max-width: none; margin: 0; }
  .b-sobre--ed .ed__n1 { padding-right: 0; margin-right: -90px; position: relative; z-index: 1; }
  .b-sobre--ed .ed__n2 { padding-left: 0; margin-left: -90px; position: relative; z-index: 1; margin-top: 2.6em; }
  .b-sobre--ed .ed__texto, .b-sobre--ed .ed__dato { z-index: 3; }
}

/* Sobre mí (ajuste): el retrato toca el borde inferior del hero y ya no tapa el apellido */
.b-sobre--ed .ed__foto img { -webkit-mask-image: linear-gradient(#000 86%, transparent); mask-image: linear-gradient(#000 86%, transparent); }
@media (min-width: 900px) {
  .b-sobre--ed .ed__foto img { -webkit-mask-image: none; mask-image: none; }
  .ed { padding-bottom: 0; align-items: end; }
  .b-sobre--ed .ed__foto { align-self: end; }
  .b-sobre--ed .ed__nombre { z-index: 3; }
  .b-sobre--ed .ed__n1 { margin-right: -28px; }
  .b-sobre--ed .ed__n2 { margin-left: -12px; z-index: 3; }
  .b-sobre--ed .ed__texto, .b-sobre--ed .ed__dato { margin-bottom: 40px; }
  .b-sobre--ed .ed__tag { grid-row: 1; grid-column: 3; justify-self: end; margin-top: 0; }
  .b-sobre--ed .ed__eyebrow { margin-top: 0; }
}
@media (min-width: 900px) { .b-sobre--ed .ed__foto { grid-row: 2 / 5; } .b-sobre--ed .ed__nombre { align-self: center; } }

/* Imágenes de móvil (fichas de Google y WhatsApp de Cómo trabajo) */
.b-chat-caja--img { max-width: 440px; }
.b-chat-img img { display: block; width: 100%; height: auto; filter: drop-shadow(0 22px 30px rgba(0, 0, 0, .3)); }
/* «¿A cuál llamarías tú?»: fichas horizontales (móvil a la izquierda, datos a la derecha) para que el bloque quepa en una pantalla */
.b-ficha:has(.b-ficha__imagen) { display: grid; grid-template-columns: 92px 1fr; grid-template-areas: "img cab" "img datos"; grid-column-gap: 16px; align-content: start; padding: 16px; }
.b-ficha .b-ficha__imagen { grid-area: img; margin: 0; background: none; border-radius: 0; align-self: center; }
.b-ficha .b-ficha__imagen img { width: 100%; height: auto; filter: drop-shadow(0 10px 14px rgba(11, 69, 64, .22)); }
.b-ficha:has(.b-ficha__imagen) .b-ficha__cab { grid-area: cab; flex-direction: column; align-items: flex-start; gap: 2px; }
.b-ficha:has(.b-ficha__imagen) .b-ficha__datos { grid-area: datos; margin-top: 10px; grid-gap: 4px; }
@media (min-width: 900px) {
  .b-dia.b-cual { padding: 48px 0 56px; }
  .b-cual .seccion__intro { max-width: 46rem; }
  .b-cual__pregunta { margin-top: 18px; }
  .b-ficha:has(.b-ficha__imagen) { grid-template-columns: 128px 1fr; grid-column-gap: 22px; padding: 20px 24px; }
}

/* Imágenes en las tarjetas de Servicios (webs y automatización) */
.b-linea__imagen { display: block; margin: 0; background: var(--fondo, var(--verde-tinte)); border-bottom: 1px solid var(--gris); }
.b-linea__imagen img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: contain; }
@media (min-width: 600px) and (max-width: 899.98px) { .b-linea__imagen img { aspect-ratio: 16 / 9; max-height: 340px; } }
@media (min-width: 1024px) {
  /* Texto a la izquierda y las dos fichas apiladas a la derecha: todo el bloque, y la respuesta, en una sola pantalla */
  .b-cual > .contenedor { display: grid; grid-template-columns: 5fr 6fr; grid-column-gap: 56px; align-items: start; }
  .b-cual > .contenedor > * { grid-column: 1; }
  .b-cual > .contenedor > .b-fichas { grid-column: 2; grid-row: 1 / span 7; grid-template-columns: 1fr; margin-top: 0; }
  .b-cual .b-ficha:has(.b-ficha__imagen) { grid-template-columns: 112px 1fr; }
}
@media (max-width: 639.98px) {
  /* Móvil: menos aire y fichas compactas para que el bloque quepa en una pantalla de 390 × 844 */
  .b-dia.b-cual { padding: 40px 0 40px; }
  .b-cual__pregunta { margin-top: 16px; }
  .b-ficha:has(.b-ficha__imagen) { grid-template-columns: 76px 1fr; grid-column-gap: 14px; padding: 14px 16px; }
  .b-ficha:has(.b-ficha__imagen) .b-ficha__nombre { font-size: 1.125rem; }
  .b-ficha:has(.b-ficha__imagen) .b-ficha__datos { margin-top: 6px; grid-gap: 2px; font-size: .9375rem; line-height: 1.45; }
  .b-cual__nota { margin-top: 10px; }
}

/* ---------- Cómo trabajo · camino de 8 pasos con círculos ----------
   Todo el módulo cabe en una pantalla (círculos y separaciones se adaptan a la altura disponible).
   Accesibilidad: cada círculo es un botón real; el detalle se abre en un cuadro de diálogo nativo (foco atrapado, Esc cierra, el foco vuelve al círculo).
   Sin JavaScript se ven los 8 pasos como lista con su detalle. Los iconos llevan casilla blanca y su color natural (iconos.css). */
.b-dia.cs2 { padding: 28px 0 32px; }
.cs2 .seccion__titulo { font-size: 1.625rem; line-height: 1.15; }
.cs2-pista { margin-top: 8px; font-weight: 600; color: var(--verde); }
.cs2-lista { margin: 16px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-gap: 10px 12px; }
.cs2-item { min-width: 0; }
.cs2-burbuja { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: default; }
.cs2-circulo { position: relative; flex: none; display: grid; place-items: center; width: 64px; aspect-ratio: 1; border: 2px solid var(--gris); border-radius: 50%; background: var(--blanco); box-shadow: 0 6px 16px rgba(26, 26, 26, .10); }
.cs2-circulo > .icono, .cs2-circulo > svg { width: 30px; height: 30px; }
.cs2-num { position: absolute; top: -4px; left: -4px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--grafito); color: var(--blanco); font-size: .875rem; font-weight: 600; }
.cs2-titulo { min-width: 0; flex: 1 1 0; overflow-wrap: anywhere; hyphens: auto; font-weight: 600; font-size: .9375rem; line-height: 1.25; color: var(--grafito); }
@media (max-width: 359.98px) { .cs2-lista { grid-gap: 10px 8px; } .cs2-burbuja { gap: 8px; } .cs2-circulo { width: 52px; } .cs2-circulo > .icono, .cs2-circulo > svg { width: 26px; height: 26px; } }
.cs2-visto { position: absolute; right: -4px; bottom: -4px; display: none; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #15803D; color: var(--blanco); }
.cs2-visto .icono { width: 14px; height: 14px; }
.cs2-item.visto .cs2-visto { display: grid; }
.cs2-det { margin: 8px 0 0; text-align: left; }
.cs2-dialogo__titulo { font-size: 1.375rem; line-height: 1.2; }
.cs2-dialogo__de { margin-top: 2px; font-size: .875rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--verde); }
.cs2-dialogo__texto { margin-top: 10px; font-size: 1.0625rem; }
.cs2-datos { margin: 12px 0 0; }
.cs2-datos > div { padding: 10px 0; border-top: 1px solid var(--gris); }
.cs2-datos dt { font-size: .875rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--verde); }
.cs2-datos dd { margin: 2px 0 0; }
.js .cs2-det { display: none; }
.js .cs2-burbuja { cursor: pointer; }
.cs2-burbuja:hover .cs2-circulo { box-shadow: 0 12px 24px rgba(26, 26, 26, .18); }
.cs2-burbuja:focus-visible { outline: 3px solid var(--grafito); outline-offset: 4px; border-radius: 40px; }

/* Cuadro de diálogo con el detalle */
.cs2-dialogo { width: min(480px, calc(100% - 24px)); max-height: calc(100% - 24px); margin: auto; padding: 0; border: 0; border-radius: var(--radio-grande); background: var(--blanco); color: var(--grafito); box-shadow: 0 30px 70px rgba(0, 0, 0, .35); overflow: auto; }
.cs2-dialogo::backdrop { background: rgba(26, 26, 26, .6); }
.cs2-dialogo__cuerpo { padding: 24px 64px 4px 22px; }
.cs2-dialogo__cerrar { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--verde-tinte); color: var(--verde); cursor: pointer; }
.cs2-dialogo__cerrar .icono { width: 22px; height: 22px; }
.cs2-dialogo__pie { display: flex; justify-content: space-between; gap: 10px; padding: 12px 22px 20px; }
.cs2-dialogo__pie .boton { min-height: 44px; }
.cs2-dialogo__pie .boton[disabled] { opacity: .45; cursor: not-allowed; }
body.cs2-bloqueado { overflow: hidden; }
@media (max-width: 639.98px) {
  .cs2-dialogo { width: 100%; max-width: none; max-height: 86%; margin: auto 0 0; border-radius: var(--radio-grande) var(--radio-grande) 0 0; }
}
@media (prefers-reduced-motion: no-preference) {
  .cs2-dialogo[open] { animation: cs2-sube .35s var(--anim) both; }
  .cs2-dialogo[open]::backdrop { animation: b-cambia .3s var(--anim) both; }
  .cs2-circulo { transition: box-shadow .25s var(--anim), transform .25s var(--anim); }
  .cs2-burbuja:hover .cs2-circulo { transform: scale(1.06); }
  .cs2--anim .cs2-item { transition: opacity .55s var(--anim), transform .55s var(--anim); transition-delay: calc(var(--n) * 70ms); }
  .cs2--anim .cs2-item:not(.entra) { opacity: 0; transform: scale(.7) translateY(20px); }
}
@keyframes cs2-sube { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

@media (min-width: 640px) {
  /* Círculos con el título debajo, en dos filas de cuatro; el tamaño depende de la altura de la pantalla */
  .b-dia.cs2 { padding: clamp(24px, 4.5vh, 56px) 0 clamp(28px, 5vh, 64px); }
  .cs2 .seccion__titulo { font-size: clamp(1.75rem, 3.2vw, 2.25rem); }
  .cs2-lista { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-gap: clamp(14px, 3vh, 36px) 16px; margin-top: clamp(16px, 3vh, 32px); }
  .cs2-burbuja { flex-direction: column; justify-content: flex-start; gap: 10px; min-height: 0; text-align: center; }
  .cs2-circulo { --b: clamp(84px, 14vh, 150px); width: var(--b); }
  .cs2-circulo > .icono, .cs2-circulo > svg { width: calc(var(--b) * .38); height: calc(var(--b) * .38); }
  .cs2-circulo--img > .b-ico-img { width: 82%; height: 82%; }
  .cs2-num { top: 0; left: 0; width: 28px; height: 28px; font-size: 1rem; }
  .cs2-titulo { max-width: 13rem; font-size: 1rem; }
  .cs2-visto { right: 0; bottom: 0; width: 26px; height: 26px; }
}
@media (min-width: 900px) {
  /* Escritorio: tamaños distintos y filas escalonadas, dentro del mismo espacio */
  .cs2-item:nth-child(1) .cs2-circulo, .cs2-item:nth-child(6) .cs2-circulo { width: calc(var(--b) * 1.15); }
  .cs2-item:nth-child(3) .cs2-circulo, .cs2-item:nth-child(8) .cs2-circulo { width: calc(var(--b) * 1.05); }
  .cs2-item:nth-child(2) .cs2-circulo, .cs2-item:nth-child(7) .cs2-circulo { width: calc(var(--b) * .92); }
  .cs2-lista { align-items: start; }
  .cs2-item:nth-child(even) { margin-top: clamp(0px, 3vh, 28px); }
  .cs2-titulo { font-size: 1.0625rem; }
}

/* ---------- Servicios · «Soluciones reales para tu negocio»: todo el módulo cabe en una pantalla (como en la Home) ---------- */
.b-auto--lineas { padding: clamp(24px, 5vh, 56px) 0 clamp(28px, 6vh, 64px); }
.b-auto--lineas .b-auto__titulo { max-width: none; font-size: clamp(1.75rem, 3.4vw, 2.5rem); line-height: 1.12; }
.b-auto--lineas .b-auto__intro { margin-top: 8px; font-size: 1.0625rem; }
.b-auto--lineas .b-linea__imagen img { aspect-ratio: auto; height: clamp(130px, 25vh, 250px); object-fit: contain; }
.b-auto--lineas .b-serv__cuerpo { padding: 18px 20px 20px; }
.b-auto--lineas .b-tarjeta__icono { margin-bottom: 10px; }
.b-auto--lineas .b-linea .b-serv__nombre { font-size: 1.125rem; line-height: 1.25; }
.b-auto--lineas .b-serv__desc { margin-top: 6px; font-size: 1rem; line-height: 1.45; }
.b-auto--lineas .b-serv__pie { padding-top: 14px; }
.b-auto--lineas .b-carrusel__barra { margin-top: 10px; }
@media (min-width: 900px) { .b-auto--lineas .b-carrusel--tres { margin-top: 16px; } }
@media (max-width: 599.98px) {
  .b-auto--lineas .b-linea__imagen img { height: clamp(100px, 15vh, 140px); }
  .b-auto--lineas .b-serv__cuerpo { padding: 14px 16px 16px; }
  .b-auto--lineas { padding: 20px 0 22px; }
  .b-auto--lineas .b-auto__titulo { font-size: 1.5rem; }
  .b-auto--lineas .b-auto__intro { margin-top: 4px; font-size: 1rem; }
}
@media (min-width: 600px) and (max-width: 899.98px) {
  /* Tableta: tarjetas horizontales (imagen a la izquierda, texto a la derecha) para no alargar el módulo */
  .b-auto--lineas .b-linea { flex-direction: row; }
  .b-auto--lineas .b-linea--imagen .b-linea__imagen { flex: 0 0 36%; display: grid; place-items: center; border-bottom: 0; border-right: 1px solid var(--gris); }
  .b-auto--lineas .b-linea__imagen img { height: clamp(130px, 18vh, 200px); }
}
@media (max-width: 419.98px) { .cs2-circulo { width: 56px; } .cs2-circulo > .icono, .cs2-circulo > svg { width: 28px; height: 28px; } .cs2-titulo { font-size: .875rem; hyphens: manual; } }


/* =====================================================================
   Página 404
   ===================================================================== */
.b-404__nota { margin-top: 14px; max-width: 34rem; color: var(--sobre-verde-suave); font-size: 1rem; }
.b-404__ventana { justify-self: center; width: 100%; max-width: 420px; padding: 14px 20px 24px; border-radius: 24px; background: var(--marfil); color: var(--grafito); text-align: center; box-shadow: 0 24px 48px rgba(0, 0, 0, .28); }
.b-404__barra { display: flex; align-items: center; gap: 6px; margin: 0 -6px 18px 0; text-align: left; }
.b-404__barra span { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--gris); }
.b-404__barra p { flex: 1; min-width: 0; margin: 0 0 0 8px; padding: 6px 14px; overflow: hidden; border-radius: 999px; background: var(--gris); color: var(--texto-suave); font-size: .875rem; white-space: nowrap; text-overflow: ellipsis; }
.b-404__codigo { margin: 0; font-size: 4.5rem; font-size: clamp(4.5rem, 14vw, 7rem); font-weight: 600; line-height: 1; letter-spacing: -.04em; color: var(--verde); }
.b-404__texto { margin: 8px 0 0; font-size: 1.125rem; font-weight: 500; color: var(--grafito); }
.b-404__opciones { padding: 56px 0 72px; background: var(--marfil); }
.b-404__lista { display: grid; grid-gap: 14px; margin-top: 28px; list-style: none; padding: 0; }
.b-404__enlace {
  position: relative; display: grid; grid-template-columns: 48px 1fr 24px; grid-column-gap: 16px; align-items: center;
  box-sizing: border-box; height: 100%; min-height: 44px; padding: 18px; border: 2px solid var(--gris); border-radius: 20px; background: var(--blanco);
  color: var(--texto); text-decoration: none; transition: border-color .25s var(--anim), box-shadow .25s var(--anim);
}
.b-404__enlace .b-tarjeta__icono { grid-row: 1 / span 2; margin: 0; }
.b-404__nombre { font-size: 1.125rem; font-weight: 600; color: var(--verde); }
.b-404__desc { grid-column: 2; font-size: 1rem; color: var(--texto-suave); }
.b-404__ir { grid-column: 3; grid-row: 1 / span 2; color: var(--verde); }
.b-404__enlace:hover, .b-404__enlace:focus-visible { border-color: var(--verde); box-shadow: 0 12px 28px rgba(11, 69, 64, .14); }
@media (min-width: 640px) { .b-404__lista { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) {
  .b-404__lista { grid-template-columns: repeat(4, 1fr); }
  .b-404__enlace { grid-template-columns: 1fr 24px; align-items: start; padding: 24px; }
  .b-404__enlace .b-tarjeta__icono { grid-row: auto; grid-column: 1 / -1; margin-bottom: 14px; }
  .b-404__nombre { grid-column: 1; }
  .b-404__desc { grid-column: 1 / -1; margin-top: 6px; }
  .b-404__ir { grid-column: 2; grid-row: 2; align-self: center; }
}


/* Imagen superior de las tarjetas de «Cómo trabajo» (mismo tamaño las tres; sin imagen, panel con su icono) */
.b-serv__img { display: grid; place-items: center; box-sizing: border-box; aspect-ratio: 4 / 3; padding: 20px 20px 16px; background: var(--verde-tinte); }
.b-serv__img { position: relative; }
.b-serv__img img { position: absolute; left: 20px; top: 20px; display: block; width: calc(100% - 40px); height: calc(100% - 36px); object-fit: contain; filter: drop-shadow(0 10px 16px rgba(11, 69, 64, .18)); }
.b-serv__img--icono { color: var(--verde); }
.b-serv__img--icono svg.icono, .b-serv__img--icono img.icono { width: 72px; height: 72px; }
.b-serv--pequeno:has(.b-serv__img)::before { display: none; }
@media (min-width: 640px) and (max-width: 899.98px) { .b-serv__img { aspect-ratio: 16 / 7; } }


/* Contacto · zona: texto + imagen en dos columnas desde 900 px; en móvil, el texto y debajo la imagen */
.b-zona__cab--imagen { display: grid; grid-row-gap: 24px; align-items: center; }
.b-zona__imagen { max-width: 520px; width: 100%; margin: 0 auto; }
.b-zona__imagen img { display: block; width: 100%; height: auto; }
@media (min-width: 900px) {
  .b-zona__cab--imagen { grid-template-columns: 1fr 1fr; grid-column-gap: 56px; }
  .b-zona__cab--imagen .b-zona__imagen { margin: 0; justify-self: end; }
}


/* Ronda 7 · mini-ilustraciones decorativas de las líneas (alt vacío) */
.b-empezar__img { flex: none; display: block; width: 72px; height: 72px; margin: 0 16px 0 0; object-fit: contain; }
.m-opcion__img { display: block; width: 64px; height: 64px; object-fit: contain; }
.b-opcion__img { order: -1; flex: none; display: block; width: 44px; height: 44px; margin-right: 10px; object-fit: contain; }
@media (max-width: 479.98px) {
  .b-contacto .b-guiado__opciones { grid-template-columns: 1fr; }
  .b-contacto--claro .b-opcion__img { display: block; width: 36px; height: 36px; margin-right: 8px; }
}
@media (min-width: 640px) and (max-width: 899.98px) { .b-empezar__lista { grid-template-columns: 1fr; } }

/* Sobre mí · hero claro de dos columnas (propuesta 12/10/2026). El anterior sigue disponible con HERO_SM=editorial */
.smh { padding: 32px 0 48px; background: var(--marfil); color: var(--grafito); overflow: hidden; }
.smh__rejilla { display: grid; grid-row-gap: 28px; align-items: center; }
.smh__h1 { max-width: 16ch; font-size: 2.125rem; font-size: clamp(2.125rem, 3.2vw + 1rem, 3.5rem); line-height: 1.08; letter-spacing: -.02em; color: var(--verde); }
.smh__parrafo { max-width: 34rem; margin-top: 16px; font-size: 1.125rem; color: var(--grafito); }
.smh__datos { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 0; padding: 0; list-style: none; }
.smh__datos li { display: flex; flex-direction: column; padding: 10px 16px; border: 2px solid var(--gris); border-radius: 16px; background: var(--blanco); font-size: .9375rem; color: var(--grafito); }
.smh__datos strong { font-size: 1.25rem; font-weight: 700; color: var(--verde); }
.smh__datos li:last-child { justify-content: center; font-weight: 600; }
.smh__botones { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; margin-top: 26px; }
.smh__enlace { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 600; color: var(--verde); text-decoration: underline; text-underline-offset: 4px; }
.smh__enlace:focus-visible { outline: 3px solid var(--verde); outline-offset: 3px; border-radius: 4px; }
.smh__foto { position: relative; margin: 0 auto; width: 100%; max-width: 420px; }
.smh__arco { position: absolute; left: 6%; right: 6%; top: 8%; bottom: 14%; border-radius: 999px 999px 28px 28px; background: var(--verde-tinte); border: 2px solid var(--gris); }
.smh__foto img { position: relative; display: block; width: 88%; height: auto; margin: 0 auto; }
.smh__foto figcaption { position: relative; display: flex; flex-direction: column; margin: -18px auto 0; width: max-content; max-width: 92%; padding: 10px 18px; border-radius: 16px; background: var(--blanco); box-shadow: var(--sombra); font-size: .9375rem; text-align: center; color: var(--grafito); }
.smh__foto figcaption strong { font-weight: 700; color: var(--verde); }
@media (min-width: 900px) {
  .smh { padding: 48px 0 64px; }
  .smh__rejilla { grid-template-columns: 1.1fr .9fr; grid-column-gap: 56px; }
  .smh__foto { max-width: 480px; justify-self: end; }
}

/* Webs · Extras: bloque compacto para que se vea completo en una pantalla */
.b-auto--extras { padding-top: 36px; padding-bottom: 40px; }
.b-auto--extras .b-auto__titulo { font-size: 1.75rem; font-size: clamp(1.75rem, 1.6vw + 1rem, 2.25rem); }
.b-auto--extras .b-auto__intro { margin-top: 8px; }
.b-auto--extras .b-auto__glosario { margin-top: 6px; }
.b-auto--extras .b-serv__img { aspect-ratio: 16 / 9; padding: 12px 20px 8px; }
.b-auto--extras .b-serv__img img { left: 20px; top: 12px; width: calc(100% - 40px); height: calc(100% - 20px); }
.b-auto--extras .b-serv__cuerpo { padding-top: 16px; padding-bottom: 20px; }
.b-auto--extras .b-serv__desc { margin-top: 6px; }
@media (min-width: 900px) {
  .b-auto--extras { padding-top: 28px; padding-bottom: 30px; }
  .b-auto--extras .b-auto__titulo, .b-auto--extras .b-auto__intro { max-width: none; }
  .b-auto--extras .b-serv__img { aspect-ratio: 2 / 1; padding: 8px 20px 4px; }
  .b-auto--extras .b-serv__img img { top: 8px; height: calc(100% - 12px); }
  .b-auto--extras .b-serv__cuerpo { padding-top: 12px; padding-bottom: 16px; }
}

/* Contacto · zona: botones de contacto */
.b-zona__botones { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; margin-top: 22px; }
.b-zona__correo { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 600; color: var(--verde); text-decoration: underline; text-underline-offset: 4px; }
.b-zona__correo:focus-visible { outline: 3px solid var(--verde); outline-offset: 3px; border-radius: 4px; }

/* Sobre mí · hero: fondo suave y borde curvo que enlaza con el módulo siguiente */
.smh { position: relative; padding-bottom: 88px; background: var(--verde-tinte); }
.smh::after { content: ""; position: absolute; left: -10%; right: -10%; bottom: -1px; height: 64px; background: var(--marfil); border-radius: 50% 50% 0 0 / 100% 100% 0 0; pointer-events: none; }
.smh__arco { background: var(--blanco); border-color: var(--blanco); box-shadow: 0 18px 40px rgba(11, 69, 64, .12); }
.smh__datos li { border-color: var(--blanco); box-shadow: var(--sombra); }
@media (min-width: 900px) { .smh { padding-bottom: 112px; } .smh::after { height: 84px; } }

/* Ronda 8 · Situaciones con mini-ilustración decorativa */
.b-sit__img { grid-row: 1 / span 2; display: block; width: 72px; height: 72px; object-fit: contain; }
.b-sit__fila:has(.b-sit__img) { grid-template-columns: 72px 1fr; }
@media (min-width: 900px) {
  .b-sit__img { grid-row: auto; width: 88px; height: 88px; }
  .b-sit__fila:has(.b-sit__img) { grid-template-columns: 88px 1fr 1fr; align-items: center; }
}

/* Ronda 8 · Contacto: mockup de WhatsApp según la opción elegida; trayectoria con imagen por año */
.b-vista-previa [hidden] { display: none !important; }
.b-vp__img img { display: block; width: 100%; max-width: 300px; height: auto; margin: 0 auto; }
.b-contacto .b-vp__img img { max-width: 270px; }
.b-ruta__img { margin: -4px -4px 16px; border-radius: 14px; background: var(--verde-tinte); }
.b-ruta__img img { display: block; width: 100%; max-height: 240px; height: auto; object-fit: contain; padding: 10px; box-sizing: border-box; }

/* Ronda 8 · Sobre mí: hero con la foto real tal cual (3:2), formación y «Un poco más de mí» con ilustración */
.smh__arco { display: none; }
.smh__foto { max-width: 560px; }
.smh__foto img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 24px; box-shadow: 0 18px 40px rgba(11, 69, 64, .18); }
.smh__foto figcaption { margin: -22px 0 0 18px; width: auto; max-width: calc(100% - 36px); align-items: flex-start; text-align: left; }
@media (min-width: 900px) { .smh__rejilla { grid-template-columns: 1fr 1fr; } .smh__foto { max-width: 560px; justify-self: end; } }
.b-trad__img { margin: -6px -6px 12px; border-radius: 14px; background: var(--verde-tinte); }
.b-trad__img img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; max-height: 190px; object-fit: contain; padding: 10px; box-sizing: border-box; }
.b-personal__img { max-width: 320px; margin: 0 auto 18px; }
.b-personal__img img { display: block; width: 100%; height: auto; }
.smh__foto figcaption { margin: 12px 0 0; width: auto; max-width: none; padding: 0 4px; border-radius: 0; background: transparent; box-shadow: none; flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }

/* Ajustes 12/10 · Sobre mí: línea temporal con el año dentro del círculo, formación sin iconos, «Un poco más de mí» sin tarjetas */
.b-ruta__linea { left: 26px; right: 26px; top: 32px; }
.b-ruta__marca { width: 52px; height: 52px; flex-direction: column; font-size: .875rem; font-weight: 700; line-height: 1.15; letter-spacing: -.01em; }
.b-ruta__marca span { display: block; }
.b-ruta__parada.activa .b-ruta__marca { transform: scale(1.1); box-shadow: 0 0 0 4px rgba(110, 231, 183, .3); }
.b-ruta__parada.hecha .b-ruta__marca { color: var(--blanco); }
@media (min-width: 480px) { .b-ruta__linea { left: 32px; right: 32px; top: 38px; } .b-ruta__marca { width: 64px; height: 64px; font-size: 1rem; } }
@media (min-width: 900px) { .b-ruta__linea { left: 36px; right: 36px; top: 42px; } .b-ruta__marca { width: 72px; height: 72px; font-size: 1.125rem; } }
.js .b-trad__boton { grid-template-columns: 1fr 24px; }
.b-trad__boton .b-trad__nombre { grid-column: 1; }
.b-trad__pista { grid-column: 1 / 3; }
.js .b-trad__boton { min-height: 0; }
.b-personal__img { max-width: 520px; margin: 0 auto; }
@media (min-width: 900px) { .b-personal__img { margin: 0; } }

/* Ronda 9 · objetos 3D (WebP con transparencia, decorativos) en lugar de iconos */
.b-ico-img { display: block; width: 100%; height: 100%; object-fit: contain; }
.b-nodo--img { --nodo: 72px; grid-template-columns: var(--nodo) 1fr; }
.b-nodo--img .b-nodo__icono { width: var(--nodo); height: var(--nodo); padding: 5px; box-sizing: border-box; border-radius: 20px; }
.b-nodo--img:not(:last-child)::before, .b-nodo--img:not(:last-child)::after { left: calc(var(--nodo) / 2 - 1px); top: calc(var(--nodo) + 4px); }
@media (min-width: 480px) { .b-nodo--img { --nodo: 88px; } }
.b-hub__centro:has(.b-hub__centro-ico--img) { padding: 8px 24px 8px 8px; }
.b-hub__centro-ico--img { width: 64px; height: 64px; margin-right: 12px; padding: 4px; box-sizing: border-box; border-radius: 18px; background: var(--marfil); }
.b-hub__icono--img { width: 72px; height: 72px; padding: 4px; box-sizing: border-box; border-radius: 18px; background: var(--verde-tinte); }
.b-chipd__ico--img { width: 52px; height: 52px; margin-right: 12px; padding: 3px; box-sizing: border-box; border-radius: 14px; background: var(--blanco); border: 2px solid var(--gris); }
.b-chipd[aria-pressed="true"] .b-chipd__ico--img { background: var(--blanco); border-color: var(--blanco); }
@media (max-width: 479.98px) { .b-hub__icono--img { width: 64px; height: 64px; } .b-hub__centro-ico--img { width: 56px; height: 56px; } .b-chipd__ico--img { width: 48px; height: 48px; } }

/* Ronda 9 · «Tú decides siempre» y «Tu proyecto en 8 pasos» con objetos 3D */
.b-decides__icono--img { width: 88px; height: 88px; padding: 6px; box-sizing: border-box; border: 0; border-radius: 22px; background: var(--marfil); }
.cs2-circulo--img > .b-ico-img { width: 82%; height: 82%; }
/* Móviles estrechos: círculo encima y título debajo, para que ninguna palabra se parta */
@media (max-width: 419.98px) {
  .cs2-burbuja { flex-direction: column; justify-content: flex-start; gap: 6px; text-align: center; min-height: 0; }
  .cs2-titulo { flex: none; width: 100%; text-align: center; overflow-wrap: normal; hyphens: manual; }
  .cs2-lista { grid-gap: 12px 8px; }
}

/* Sobre mí · «Del lenguaje técnico al sencillo»: el bloque entero cabe en una pantalla
   (escritorio: 5 tarjetas en una fila; tablet y móvil: tarjetas compactas con la imagen a la izquierda) */
.b-formacion .b-trad { margin-top: 16px; grid-gap: 10px; }
.b-formacion .b-trad__todo { margin-top: 10px; }
@media (max-width: 999.98px) {
  .b-formacion { padding-top: 40px; padding-bottom: 40px; }
  .b-formacion .b-trad { grid-template-columns: minmax(0, 1fr); }
  .js .b-trad__item { display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 12px; align-items: center; padding: 8px 12px; }
  .js .b-trad__item .b-trad__img { grid-column: 1; grid-row: 1; margin: 0; }
  .js .b-trad__item .b-trad__img img { width: 64px; height: 64px; max-height: none; aspect-ratio: 1; padding: 3px; }
  .js .b-trad__item .b-trad__boton { grid-column: 2; grid-row: 1; min-height: 48px; align-content: center; }
  .js .b-trad__item .b-trad__pista { display: none; }
  .js .b-trad__item .b-trad__texto { grid-column: 1 / -1; margin-top: 10px; }
  .js .b-trad__item .b-trad__texto[hidden] { display: none; }
  .js .b-trad__boton { grid-template-columns: minmax(0, 1fr) 24px; }
}
@media (min-width: 640px) and (max-width: 999.98px) { .b-formacion .b-trad { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) {
  .b-formacion { padding-top: 56px; padding-bottom: 56px; }
  .b-formacion .b-trad { grid-template-columns: repeat(5, minmax(0, 1fr)); grid-gap: 14px; }
  .b-formacion .b-trad__item { padding: 12px; }
  .b-formacion .b-trad__img { margin: 0 0 8px; }
  .b-formacion .b-trad__img img { max-height: 120px; padding: 4px; }
  .js .b-formacion .b-trad__boton { grid-template-columns: minmax(0, 1fr) 20px; min-height: 0; }
  .b-formacion .b-trad__nombre { font-size: 1rem; }
  .b-formacion .b-trad__pista { font-size: .875rem; }
}

/* Ajustes 13/10 · Sobre mí: el rango «2022-2026» va en una sola línea dentro de una cápsula; en móvil los círculos son de 44 px para que quepan los cinco */
.b-ruta__marca span { white-space: nowrap; }
.b-ruta__marca--rango { width: auto; min-width: 52px; padding: 0 10px; border-radius: 999px; }
@media (max-width: 479px) {
  .b-ruta__linea { left: 22px; right: 22px; top: 28px; }
  .b-ruta__marca { width: 44px; height: 44px; }
  .b-ruta__marca--rango { width: auto; padding: 0 8px; }
}
@media (min-width: 480px) { .b-ruta__marca--rango { width: auto; padding: 0 14px; } }
@media (min-width: 900px) { .b-ruta__marca--rango { width: auto; padding: 0 16px; } }
@media (max-width: 359px) { .b-ruta__marca--rango { padding: 0 6px; } }

/* Ronda 10 (13/10) · objetos 3D en «Cuando termino, no desaparezco» (usa .b-decides__icono--img), «Lo que aplico ahora a tu negocio» y el glosario de palabras técnicas.
   Mientras falte un archivo, cada elemento sigue con su icono. */
.b-puente__img { flex: none; display: block; width: 64px; height: 64px; }
.b-puente__puntos li:has(.b-puente__img) { gap: 14px; }
.b-term__img { display: block; width: 72px; height: 72px; margin-bottom: 6px; }
@media (max-width: 479.98px) { .b-puente__img { width: 56px; height: 56px; } .b-term__img { width: 64px; height: 64px; } }


/* ============ Blog: listado, filtro por tema y plantilla del artículo ============ */
.blog-sec { padding: 48px 0 56px; background: var(--marfil); }
.blog-sec__titulo { margin-bottom: 24px; }
.blog-sec--rel { background: var(--blanco); border-top: 1px solid var(--gris); }

/* Filtro por tema: enlaces con forma de botón (≥ 44 px) */
.blog-filtros { margin-bottom: 28px; }
.blog-filtros ul { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.blog-chip { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 18px; border: 2px solid var(--gris); border-radius: 999px; background: var(--blanco); color: var(--texto); font-weight: 500; font-size: 1rem; text-decoration: none; transition: border-color .2s var(--anim), background .2s var(--anim); }
.blog-chip:hover, .blog-chip:focus-visible { border-color: var(--verde); }
.blog-chip[aria-current="page"] { background: var(--verde); border-color: var(--verde); color: var(--blanco); }
.blog-filtros__btn { display: none; }

/* Filtro en móvil (con JavaScript): un botón «Tema: …» que despliega la lista; el tema activo se distingue con marca y negrita, no solo por el color */
@media (max-width: 639.98px) {
  .blog-filtros { margin-bottom: 24px; }
  .js .blog-filtros__btn { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 52px; padding: 8px 18px; border: 2px solid var(--gris); border-radius: var(--radio); background: var(--blanco); color: var(--texto); font: inherit; font-size: 1rem; text-align: left; cursor: pointer; }
  .js .blog-filtros__btn:hover, .js .blog-filtros__btn:focus-visible { border-color: var(--verde); }
  .blog-filtros__etq { font-size: .875rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-suave); }
  .blog-filtros__act { flex: 1; font-weight: 600; }
  .blog-filtros__flecha { flex: none; transition: transform .2s var(--anim); }
  .blog-filtros.abierto .blog-filtros__flecha { transform: rotate(180deg); }
  .js .blog-filtros__lista { display: none; }
  .js .blog-filtros.abierto .blog-filtros__lista { display: block; }
  .blog-filtros ul { gap: 0; margin-top: 8px; border: 2px solid var(--gris); border-radius: var(--radio); background: var(--blanco); overflow: hidden; }
  .blog-filtros li + li { border-top: 1px solid var(--gris); }
  .blog-chip { display: flex; width: 100%; min-height: 48px; padding: 10px 18px; border: 0; border-radius: 0; background: transparent; }
  .blog-chip:hover, .blog-chip:focus-visible { background: var(--verde-tinte); }
  .blog-chip:focus-visible { outline-offset: -3px; }
  .blog-chip[aria-current="page"] { background: var(--verde-tinte); color: var(--verde); font-weight: 600; }
  .blog-chip[aria-current="page"]::before { content: "\2713" / ""; margin-right: 10px; }
}
@media (prefers-reduced-motion: reduce) { .blog-filtros__flecha { transition: none; } }

/* Tarjetas de artículo: mismo peso, el recuadro entero es el enlace del título */
.blog-lista { display: grid; gap: 24px; margin: 0; padding: 0; list-style: none; grid-template-columns: 1fr; }
@media (min-width: 640px) { .blog-lista { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .blog-lista { grid-template-columns: repeat(3, 1fr); } }
.blog-card { position: relative; display: flex; flex-direction: column; background: var(--blanco); border: 2px solid var(--gris); border-radius: var(--radio-grande); overflow: hidden; transition: border-color .2s var(--anim), transform .2s var(--anim); }
.blog-card:hover { border-color: var(--borde-hover); transform: translateY(-2px); }
.blog-card__img { position: relative; aspect-ratio: 16 / 10; background: var(--verde-tinte); }
.blog-card__foto { position: absolute; inset: 16px; width: calc(100% - 32px); height: calc(100% - 32px); object-fit: contain; filter: drop-shadow(0 10px 16px rgba(11, 69, 64, .18)); }
.blog-card__img--icono { display: grid; place-items: center; color: var(--verde); }
.blog-card__img--icono .icono { width: 56px; height: 56px; }
.blog-card__cuerpo { display: flex; flex-direction: column; flex: 1; padding: 22px 24px 24px; }
.blog-card__cat { margin: 0; font-size: .875rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--verde); }
.blog-card__titulo { margin: 8px 0 0; font-size: 1.25rem; font-weight: 600; letter-spacing: -.01em; line-height: 1.3; }
.blog-card__titulo a { color: inherit; text-decoration: none; }
.blog-card__titulo a::after { content: ""; position: absolute; inset: 0; border-radius: var(--radio-grande); }
.blog-card__titulo a:focus-visible { outline: none; }
.blog-card__titulo a:focus-visible::after { outline: 3px solid var(--verde); outline-offset: 2px; }
.blog-card__texto { margin: 10px 0 0; color: var(--texto-suave); }
.blog-card__meta { margin: auto 0 0; padding-top: 16px; font-size: .9375rem; color: var(--texto-suave); }
@media (min-width: 900px) {
  .blog-card--destacada { grid-column: 1 / -1; flex-direction: row; }
  .blog-card--destacada .blog-card__img { flex: 0 0 44%; aspect-ratio: auto; min-height: 280px; }
  .blog-card--destacada .blog-card__cuerpo { justify-content: center; padding: 32px 36px; }
  .blog-card--destacada .blog-card__titulo { font-size: 1.75rem; }
  .blog-card--destacada .blog-card__meta { margin-top: 18px; padding-top: 0; }
}
@media (prefers-reduced-motion: reduce) { .blog-card, .blog-chip { transition: none; } .blog-card:hover { transform: none; } }

/* Pregunta «¿Hay algún tema…?» (cuando ya hay artículos) */
.blog-tema { padding: 40px 0; background: var(--verde-tinte); }
.blog-tema__fila { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.blog-tema__titulo { margin: 0; font-size: 1.375rem; font-weight: 600; letter-spacing: -.01em; }
@media (min-width: 768px) { .blog-tema__fila { flex-direction: row; align-items: center; justify-content: space-between; gap: 32px; } }

/* Artículo: cabecera */
.blog-borrador { margin: 16px 0 0; padding: 12px 16px; border: 2px solid var(--terracota); border-radius: var(--radio); background: var(--terracota-tinte); color: var(--terracota-texto); }
.blog-art__cab { padding: 32px 0 8px; background: var(--marfil); }
.blog-art__rejilla { display: grid; gap: 28px; align-items: center; }
.blog-art__etiqueta { margin: 0 0 14px; }
.blog-art__cat { display: inline-flex; align-items: center; min-height: 44px; padding: 6px 16px; border-radius: 999px; background: var(--verde-tinte); color: var(--verde); font-size: .875rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; }
a.blog-art__cat:hover, a.blog-art__cat:focus-visible { background: var(--teal-tinte); }
.blog-art__h1 { margin: 0; font-size: 2rem; font-size: clamp(2rem, 3vw + 1rem, 2.875rem); line-height: 1.15; letter-spacing: -.02em; }
.blog-art__bajada { margin: 16px 0 0; max-width: 40rem; font-size: 1.1875rem; line-height: 1.55; color: var(--texto-suave); }
.blog-art__meta { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 20px 0 0; font-size: .9375rem; color: var(--texto-suave); }
.blog-art__meta span:first-child { font-weight: 600; color: var(--texto); }
.blog-art__revisado { display: flex; align-items: center; gap: 8px; margin: 8px 0 0; font-size: .9375rem; color: var(--verde); font-weight: 500; }
.blog-art__revisado .icono { flex: none; width: 18px; height: 18px; }
.blog-art__portada { position: relative; aspect-ratio: 4 / 3; max-width: 420px; width: 100%; justify-self: center; border-radius: var(--radio-grande); background: var(--verde-tinte); }
.blog-art__portada-img { position: absolute; inset: 20px; width: calc(100% - 40px); height: calc(100% - 40px); object-fit: contain; filter: drop-shadow(0 10px 16px rgba(11, 69, 64, .18)); }
@media (min-width: 900px) { .blog-art__rejilla { grid-template-columns: minmax(0, 1fr) 380px; gap: 48px; } .blog-art__cab { padding: 48px 0 16px; } }

/* Artículo: cuerpo (columna de lectura de ~68 caracteres) */
.blog-art__pagina { padding-top: 24px; padding-bottom: 56px; }
.blog-art__pagina > * { max-width: 44rem; }
.blog-art__resumen { margin: 0 0 32px; padding: 20px 24px; border-left: 4px solid var(--verde); border-radius: var(--radio); background: var(--verde-tinte); }
.blog-art__resumen h2 { margin: 0 0 8px; font-size: .9375rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--verde); }
.blog-art__resumen ul { margin: 0; padding-left: 20px; }
.blog-art__resumen li + li { margin-top: 6px; }
.blog-art__indice { margin: 0 0 32px; padding: 16px 24px; border: 2px solid var(--gris); border-radius: var(--radio); background: var(--blanco); }
.blog-art__indice-tit { margin: 0 0 6px; font-size: .9375rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-suave); }
.blog-art__indice ol { margin: 0; padding-left: 20px; }
.blog-art__indice a { display: inline-flex; align-items: center; min-height: 44px; color: var(--verde); }
.blog-art__cuerpo { font-size: 1.125rem; line-height: 1.75; }
.blog-art__cuerpo h2 { margin: 2em 0 .5em; font-size: 1.5rem; line-height: 1.25; letter-spacing: -.01em; }
.blog-art__cuerpo p { margin: 1em 0; }
.blog-art__cuerpo ul { margin: 1em 0; padding-left: 22px; }
.blog-art__cuerpo li + li { margin-top: .4em; }
.blog-art__ejemplo { margin: 1.6em 0; padding: 18px 22px; border-left: 4px solid var(--terracota); border-radius: var(--radio); background: var(--terracota-tinte); }
.blog-art__ejemplo p { margin: 0; }
.blog-art__ejemplo-tit { margin-bottom: 4px !important; font-size: .875rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--terracota-texto); }
.blog-art__fuentes { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--gris); }
.blog-art__fuentes h2 { margin: 0 0 8px; font-size: 1rem; font-weight: 600; }
.blog-art__fuentes ul { margin: 0; padding-left: 20px; }
.blog-art__fuentes a { display: inline-flex; align-items: center; min-height: 44px; color: var(--verde); }

/* Artículo: autor */
.blog-art__autor { display: flex; gap: 20px; align-items: flex-start; margin-top: 48px; padding: 24px; border: 2px solid var(--gris); border-radius: var(--radio-grande); background: var(--blanco); }
.blog-art__autor img { flex: none; width: 72px; height: 72px; border-radius: 50%; object-fit: cover; object-position: 50% 25%; background: var(--verde-tinte); }
.blog-art__autor p { margin: 0; }
.blog-art__autor-et { font-size: .875rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-suave); }
.blog-art__autor-nombre { margin: 2px 0 8px; font-size: 1.25rem; }
.blog-art__aviso { margin-top: 10px !important; font-size: .9375rem; color: var(--texto-suave); }
@media (max-width: 479.98px) { .blog-art__autor { flex-direction: column; } }

/* Zonas táctiles de 44 px también en enlaces cortos del menú de escritorio y en la etiqueta de tema del artículo */
@media (min-width: 1080px) { .menu__lista > li > a { min-width: 44px; justify-content: center; } }
.blog-art__cat { min-width: 44px; justify-content: center; }
.pie li a { min-width: 44px; }
.blog-art__cuerpo ol { margin: 1em 0; padding-left: 24px; }
.blog-art__cuerpo a { color: var(--verde); font-weight: 500; }
.blog-art__cita { margin: 1.4em 0; padding: 6px 0 6px 20px; border-left: 4px solid var(--teal); font-weight: 500; }
.blog-art__cita p { margin: 0; }

/* Artículo · la cabecera se separa del texto: fondo verde suave y borde curvo hacia el cuerpo (mismo recurso que el hero de Sobre mí) */
.blog-art__cab { position: relative; margin-top: 16px; padding: 36px 0 80px; background: var(--verde-tinte); overflow: hidden; }
.blog-art__cab::after { content: ""; position: absolute; left: -10%; right: -10%; bottom: -1px; height: 56px; background: var(--marfil); border-radius: 50% 50% 0 0 / 100% 100% 0 0; pointer-events: none; }
.blog-art__cab .blog-art__rejilla { position: relative; z-index: 1; }
.blog-art__cat { background: var(--blanco); }
a.blog-art__cat:hover, a.blog-art__cat:focus-visible { background: var(--teal-tinte); }
.blog-art__portada { background: var(--blanco); box-shadow: var(--sombra); }
.blog-art__pagina { padding-top: 8px; }
@media (min-width: 900px) { .blog-art__cab { padding: 56px 0 104px; } .blog-art__cab::after { height: 72px; } }

/* ---------- 16/10/2026: imágenes del hero del Blog, correo en el cierre y selección única en Contacto ---------- */
.b-noti__icono--img { width: 64px; height: 64px; margin: -6px 12px -6px -4px; border: 0; border-radius: 0; background: none; }
.b-noti__img { display: block; width: 100%; height: 100%; object-fit: contain; }
@media (max-width: 479.98px) { .b-noti__icono--img { width: 56px; height: 56px; } }
.b-guiado__ayuda { margin: 4px 0 0; font-size: .9375rem; color: var(--sobre-verde-suave); }
.b-contacto--claro .b-guiado__ayuda { color: var(--grafito); }
.b-contacto--claro .b-opcion__caja { border-radius: 50%; }
/* Contacto: separación entre el icono y el texto de los enlaces «O llámame…» y «O escríbeme…» */
.b-contacto .b-hero__enlace .icono { margin: 0 10px 0 0; }
.b-contacto .b-hero__enlace:hover .icono { transform: none; }

/* =====================================================================
   TARIFARIO 2.0 · planes, precios, extras, cuidado y bloques de precios
   (20/10/2026). Mismos colores y tipografía de siempre; contrastes AAA.
   ===================================================================== */
.b-serv__precio { display: inline-block; align-self: flex-start; margin-top: 8px; padding: 3px 12px; border-radius: 999px; background: var(--verde-tinte); color: var(--verde); font-size: 1rem; font-weight: 700; letter-spacing: -.005em; }
.b-serv--grande .b-serv__precio { background: rgba(255, 255, 255, .14); color: var(--teal-claro); }
.b-serv__limite { margin-top: 12px; padding-left: 12px; border-left: 3px solid var(--teal); font-size: .9375rem; color: var(--texto-suave); }
.b-serv--grande .b-serv__limite { color: var(--sobre-verde-suave); border-left-color: var(--teal-claro); }

.b-planes { padding: 64px 0 72px; background: var(--marfil); }
.b-planes__lista { display: grid; grid-gap: 20px; margin-top: 32px; list-style: none; }
.b-plan { display: flex; flex-direction: column; padding: 26px 24px; background: var(--blanco); border: 2px solid var(--gris); border-radius: var(--radio-grande); box-shadow: var(--sombra); }
.b-plan:target { border-color: var(--verde); }
.b-plan__nombre { font-size: 1.375rem; font-weight: 600; letter-spacing: -.01em; color: var(--grafito); }
.b-plan__precio { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-top: 8px; }
.b-plan__importe { font-size: 2.5rem; font-weight: 700; letter-spacing: -.03em; line-height: 1.05; color: var(--verde); }
.b-plan__pie { font-size: .9375rem; color: var(--texto-suave); }
.b-plan__frase { margin-top: 12px; color: var(--texto); }
.b-plan__puntos { display: grid; grid-gap: 10px; margin-top: 18px; list-style: none; }
.b-plan__puntos li { display: flex; align-items: flex-start; gap: 10px; }
.b-plan__puntos .icono { flex: none; margin-top: 4px; color: var(--verde); }
.b-plan__incluido { margin-top: 20px; padding: 14px 16px; border-radius: var(--radio); background: var(--verde-tinte); }
.b-plan__incluido-tit { font-size: .875rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--verde); }
.b-plan__incluido p + p { margin-top: 4px; }
.b-plan__boton { margin-top: auto; padding-top: 22px; }
.b-plan__boton .boton { width: 100%; justify-content: center; }
.b-planes__comunes { max-width: 46rem; margin-top: 32px; }
.b-planes__comunes p { margin-top: 8px; }
.b-planes__nota, .b-precios__nota { font-size: .9375rem; color: var(--texto-suave-fuerte); }
.b-precios__nota { margin-top: 18px; }
.b-planes__detalles { margin-top: 16px; background: var(--blanco); border: 2px solid var(--gris); border-radius: var(--radio); }
.b-planes__detalles summary { display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: 10px 16px; font-weight: 600; cursor: pointer; list-style: none; }
.b-planes__detalles summary::-webkit-details-marker { display: none; }
.b-planes__detalles summary:focus-visible { outline: 3px solid var(--verde); outline-offset: 2px; border-radius: var(--radio); }
.b-planes__detalles[open] .acordeon__chevron { transform: rotate(180deg); }
.b-planes__detalles > p { margin: 0; padding: 0 16px 16px; color: var(--texto-suave); }

.b-combos { margin-top: 28px; padding: 20px 22px; background: var(--blanco); border: 2px solid var(--blanco); border-radius: var(--radio-grande); box-shadow: 0 10px 24px rgba(11, 69, 64, .10); }
.b-combos__tit { font-size: 1.125rem; font-weight: 700; color: var(--verde); }
.b-combos__intro { margin-top: 4px; color: var(--texto-suave); }
.b-combos__lista { display: grid; margin-top: 10px; list-style: none; }
.b-combos__lista li { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; padding: 12px 0; border-top: 1px solid var(--gris); }
.b-combos__precio { font-size: 1.25rem; font-weight: 700; color: var(--verde); white-space: nowrap; }
.b-extras__lista { display: grid; grid-gap: 12px; margin-top: 20px; list-style: none; }
.b-extras__item { display: grid; gap: 6px 24px; padding: 18px 20px; background: var(--blanco); border: 2px solid var(--blanco); border-radius: var(--radio-grande); box-shadow: 0 10px 24px rgba(11, 69, 64, .10); }
.b-extras__item:target { border-color: var(--verde); }
.b-extras__item h3 { font-size: 1.0625rem; font-weight: 600; }
.b-extras__item p { margin-top: 4px; color: var(--texto-suave); }
.b-extras__precio { margin-top: 0 !important; font-weight: 700; font-size: 1.0625rem; color: var(--verde) !important; }
.b-extras__cta { margin-top: 22px; }

.b-apps__pie { margin: -12px 0 24px; max-width: 36rem; font-size: .9375rem; color: var(--sobre-verde-suave); }
.b-preciosmini { display: flex; flex-wrap: wrap; align-items: stretch; justify-content: center; gap: 16px; }
.b-preciomini { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 150px; padding: 24px 28px; border: 2px solid rgba(255, 255, 255, .22); border-radius: var(--radio-grande); background: rgba(255, 255, 255, .08); text-align: center; }
.b-preciomini b { font-size: 2rem; letter-spacing: -.02em; color: var(--teal-claro); }
.b-preciomini span { margin-top: 4px; color: var(--blanco); }

.b-precios { padding: 64px 0 72px; background: var(--marfil); }
.b-precios__lista, .b-modos__lista { display: grid; grid-gap: 16px; margin-top: 28px; list-style: none; }
.b-precios__item, .b-modos__item { display: flex; align-items: flex-start; gap: 14px; padding: 18px 20px; background: var(--blanco); border: 2px solid var(--gris); border-radius: var(--radio-grande); }
.b-precios__item .b-tarjeta__icono, .b-modos__item .b-tarjeta__icono { flex: none; margin: 0; }
.b-precios__item h3, .b-modos__item h3 { font-size: 1.0625rem; font-weight: 600; }
.b-precios__item p, .b-modos__item p { margin-top: 6px; color: var(--texto-suave); }
.b-modos__ficha { margin-top: 24px; padding: 20px 22px; border-radius: var(--radio-grande); background: var(--verde-tinte); }
.b-modos__ficha h3 { font-size: 1.125rem; font-weight: 600; }
.b-modos__ficha p { margin: 8px 0 14px; max-width: 46rem; }
.b-modos__ficha .b-serv__precio { margin: 0 0 0 8px; background: var(--blanco); }

.b-precios-corto { padding: 44px 0 48px; background: var(--marfil); border-top: 1px solid var(--gris); }
.b-precios-corto__titulo { font-size: 1.375rem; font-weight: 600; letter-spacing: -.01em; color: var(--verde); }
.b-precios-corto__lista { display: grid; grid-gap: 12px; margin: 18px 0 16px; list-style: none; }
.b-precios-corto__lista li { display: flex; align-items: center; gap: 12px; }
.b-precios-corto__num { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--verde); color: var(--blanco); font-weight: 700; font-size: .9375rem; }

@media (min-width: 700px) {
  .b-extras__item { grid-template-columns: 1fr auto; align-items: start; }
  .b-extras__precio { text-align: right; max-width: 14rem; }
  .b-precios__lista, .b-modos__lista { grid-template-columns: repeat(2, 1fr); }
  .b-precios-corto__lista { grid-template-columns: repeat(4, 1fr); align-items: start; }
  .b-precios-corto__lista li { align-items: flex-start; }
}
@media (min-width: 980px) {
  .b-planes__lista { grid-template-columns: repeat(3, 1fr); align-items: stretch; }
  .b-planes, .b-precios { padding-top: 88px; padding-bottom: 88px; }
}

/* =====================================================================
   Correcciones de la web · v1 (20/10/2026)
   Botones de contacto, tarjetas que giran, extras 3 × 3, situaciones con ilustración, «Cómo funcionan los precios» escalonado
   ===================================================================== */

/* ---------- Botones de contacto: «Me interesa» + «Escribir por correo» (texto corto; si hace falta, en dos líneas, sin salirse) ---------- */
.b-acciones { display: flex; flex-wrap: wrap; gap: 10px; }
.b-acciones .boton, .b-serv__pie .b-acciones .boton { flex: 1 1 10.5rem; min-width: 0; max-width: 100%; white-space: normal; text-wrap: balance; text-align: center; line-height: 1.25; padding-top: 8px; padding-bottom: 8px; }
.b-acciones .boton > * + * { margin-left: 8px; }
.b-apps__botones { display: flex; flex-wrap: wrap; gap: 12px; }
.b-apps__botones .boton { white-space: normal; text-wrap: balance; max-width: 100%; }
@media (max-width: 479.98px) { .b-acciones .boton { flex-basis: 100%; } .b-apps__botones .boton { flex: 1 1 100%; } }

/* ---------- Tarjetas que giran (Webs, Automatización, Reputación) ---------- */
.b-giros { display: grid; grid-gap: 28px; max-width: 34rem; margin: 28px auto 0; padding: 0; list-style: none; }
.b-giros__pista { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: .9375rem; color: var(--grafito); }
.b-giro { display: flex; flex-direction: column; min-width: 0; overflow: hidden; background: var(--blanco); border: 2px solid var(--blanco); border-radius: var(--radio-grande); box-shadow: 0 10px 24px rgba(11, 69, 64, .12); }
.b-giro__escena { flex: 1 1 auto; display: flex; perspective: 1500px; }
.b-giro__interior { position: relative; display: flex; flex-direction: column; width: 100%; }
.b-giro__cara { display: flex; flex-direction: column; overflow: hidden; background: var(--blanco); }
.b-giro__img { flex: 1 1 auto; display: flex; align-items: center; background: var(--fondo, var(--verde-tinte)); }
.b-giro__img img { display: block; width: 100%; height: auto; }
.b-giro__img--demo { display: grid; place-items: center; overflow: hidden; min-height: 200px; }
.b-giro__texto { padding: 16px 20px 22px; }
.b-giro__titulo { font-size: 1.25rem; font-weight: 600; line-height: 1.25; color: var(--grafito); }
.b-giros--alinear .b-giro__titulo { min-height: 2.5em; }
.b-giro__precio { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin-top: 6px; font-size: 1.75rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; color: var(--verde); }
.b-giro__pie { font-size: .9375rem; font-weight: 400; letter-spacing: 0; color: var(--texto-suave); }
.b-giro__dorso { padding: 22px 22px 24px; background: var(--verde); color: var(--blanco); }
.b-giro__dorso-tit { font-size: 1.125rem; font-weight: 600; line-height: 1.3; }
.b-giro__dorso-tit span { color: var(--teal-claro); }
.b-giro__lista { display: grid; grid-gap: 8px; margin-top: 12px; padding: 0; list-style: none; font-size: .9rem; line-height: 1.4; }
.b-giro__lista li { display: flex; align-items: flex-start; gap: 10px; }
.b-giro__lista .icono { flex: none; margin-top: 4px; color: var(--teal-claro); }
.b-giro__acciones { display: flex; flex-direction: column; gap: 8px; padding: 10px 18px 18px; border-top: 1px solid var(--gris); background: var(--blanco); }
.b-giro__ver { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 8px 14px; border: 0; border-radius: 999px; background: transparent; color: var(--verde); font: 600 .9688rem/1.2 inherit; font-family: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.b-giro__ver:hover { background: rgba(11, 69, 64, .08); }
.b-giro__ver:focus-visible { outline: 3px solid var(--verde); outline-offset: 2px; }
.b-giro__ver[hidden] { display: none; }
/* Con JavaScript: las dos caras ocupan el mismo sitio y la tarjeta gira */
.b-giro--js .b-giro__interior { display: grid; transform-style: preserve-3d; transition: transform .7s var(--anim); }
.b-giro--js .b-giro__cara { grid-area: 1 / 1; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.b-giro--js .b-giro__dorso { transform: rotateY(180deg); }
.b-giro--js.es-girada .b-giro__interior { transform: rotateY(180deg); }
@media (hover: hover) and (pointer: fine) {
  .b-giro--js .b-giro__escena:hover .b-giro__interior { transform: rotateY(180deg); }
  .b-giro--js .b-giro__escena { cursor: pointer; }
}
@media (min-width: 900px) { .b-giros { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-gap: 24px; max-width: none; } }
/* «Reducir movimiento»: sin giro, solo un cambio rápido entre caras */
@media (prefers-reduced-motion: reduce) {
  .b-giro--js .b-giro__interior, .b-giro--js.es-girada .b-giro__interior { transform: none; transition: none; }
  .b-giro--js .b-giro__cara { backface-visibility: visible; -webkit-backface-visibility: visible; transition: opacity .15s linear; }
  .b-giro--js .b-giro__dorso { transform: none; opacity: 0; visibility: hidden; }
  .b-giro--js.es-girada .b-giro__dorso { opacity: 1; visibility: visible; }
  .b-giro--js.es-girada .b-giro__frente { opacity: 0; visibility: hidden; }
}
@media (prefers-reduced-motion: reduce) and (hover: hover) and (pointer: fine) {
  .b-giro--js .b-giro__escena:hover .b-giro__interior { transform: none; }
  .b-giro--js .b-giro__escena:hover .b-giro__dorso { opacity: 1; visibility: visible; }
  .b-giro--js .b-giro__escena:hover .b-giro__frente { opacity: 0; visibility: hidden; }
}

/* ---------- Extras: cuadrícula de 3 × 3 con ilustración ---------- */
.b-extras3 { display: grid; grid-gap: 14px; margin: 22px 0 0; padding: 0; list-style: none; }
.b-extra { display: grid; grid-template-columns: 104px 1fr; gap: 14px; align-items: center; padding: 12px; background: var(--blanco); border: 2px solid var(--blanco); border-radius: var(--radio-grande); box-shadow: 0 10px 24px rgba(11, 69, 64, .10); }
.b-extra:target { border-color: var(--verde); }
.b-extra__visual { aspect-ratio: 1 / 1; overflow: hidden; border-radius: 14px; background: var(--verde-tinte); }
.b-extra__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.b-extra__nombre { font-size: 1.0625rem; font-weight: 600; line-height: 1.25; color: var(--grafito); }
.b-extra__precio { margin-top: 4px; font-size: 1.125rem; font-weight: 700; color: var(--verde); }
.b-extra__frase { margin-top: 4px; font-size: .9375rem; color: var(--texto-suave); }
.b-extras__notas { margin-top: 14px; max-width: 46rem; font-size: .9375rem; color: var(--grafito); }
.b-extras__notas + .b-extras__notas { margin-top: 6px; }
@media (min-width: 560px) { .b-extras3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) {
  .b-extras3 { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-gap: 20px; }
  .b-extra { grid-template-columns: 1fr; align-items: start; gap: 0; padding: 0 0 20px; overflow: hidden; }
  .b-extra__visual { aspect-ratio: 3 / 2; border-radius: 0; }
  .b-extra__cuerpo { padding: 14px 20px 0; }
}
.b-extras__cta { margin-top: 24px; max-width: 30rem; }

/* ---------- Situaciones con ilustración (Automatización) ---------- */
.b-sitt__lista { display: grid; grid-gap: 20px; margin: 28px 0 0; padding: 0; list-style: none; }
.b-sitt { display: flex; flex-direction: column; overflow: hidden; background: var(--marfil); border: 2px solid var(--gris); border-radius: var(--radio-grande); }
.b-sitt__visual { display: grid; place-items: center; aspect-ratio: 1 / 1; background: var(--verde-tinte); }
.b-sitt__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.b-sitt__icono { display: grid; place-items: center; width: 96px; height: 96px; border-radius: 28px; background: var(--verde); color: var(--blanco); }
.b-sitt__icono .icono { width: 44px; height: 44px; }
.b-sitt__situacion { margin: 18px 20px 0; font-size: 1.125rem; font-weight: 600; line-height: 1.35; }
.b-sitt .b-sit__solucion { margin: 10px 20px 22px; }
@media (min-width: 760px) { .b-sitt__lista { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- «Para atender a tus clientes a cualquier hora»: las dos tarjetas a la vez ---------- */
.b-atencion { padding: 48px 0 56px; }
.b-atencion__lista { display: grid; grid-gap: 20px; margin: 24px 0 0; padding: 0; list-style: none; }
.b-atencion .b-demo { height: auto; padding: 20px 24px 0; }
.b-atencion .b-serv__cuerpo { padding: 20px 22px 22px; }
.b-atencion .b-serv__limite { margin-top: 10px; }
@media (min-width: 900px) { .b-atencion__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-gap: 24px; } .b-atencion { padding: 56px 0 64px; } }

/* ---------- «Lo que puedo preparar» y «¿No ves la tuya?» ---------- */
.b-auto__otra { max-width: 34rem; margin-top: 32px; padding: 20px 22px; background: var(--blanco); border-radius: var(--radio-grande); box-shadow: 0 10px 24px rgba(11, 69, 64, .10); }
.b-auto__otra h3 { font-size: 1.125rem; font-weight: 600; }
.b-auto__otra p { margin: 6px 0 14px; color: var(--texto-suave); }

/* ---------- Cuidado de tu web: imagen con esquinas redondeadas ---------- */
.b-apps .b-apps__imagen img { border-radius: var(--radio-grande); }

/* ---------- «Cómo funcionan los precios»: cuatro puntos con icono que aparecen uno tras otro ---------- */
.b-pc__lista { display: grid; grid-gap: 16px; margin: 22px 0 18px; padding: 0; list-style: none; }
.b-pc__item { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: var(--blanco); border: 2px solid var(--gris); border-radius: var(--radio-grande); }
.b-pc__icono { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--verde); color: var(--blanco); }
.b-pc__icono .icono { width: 26px; height: 26px; }
.b-pc__texto { font-weight: 500; line-height: 1.35; }
@media (prefers-reduced-motion: no-preference) {
  .b-secuencia .b-pc__icono { transition: transform .6s cubic-bezier(.34, 1.56, .64, 1) .25s; }
  .b-secuencia .b-pc__item:not(.visible) .b-pc__icono { transform: scale(.5); }
}
@media (min-width: 700px) {
  .b-pc__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1080px) {
  .b-pc__lista { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .b-pc__item { flex-direction: column; align-items: flex-start; padding: 20px; }
}

/* ---------- Un trabajo real (Laura): mismo bloque que en la Home ---------- */
.h-real { background: var(--blanco); }
.h-real__tarjeta { display: grid; overflow: hidden; border-radius: var(--radio-grande); background: var(--marfil); border: 1px solid var(--gris); box-shadow: var(--sombra); }
.h-real__visual { display: flex; align-items: center; justify-content: center; min-height: 160px; padding: 20px 16px; background: var(--verde-tinte); }
.h-real__visual img { display: block; width: 100%; max-width: 440px; height: auto; margin: 0 auto; }
.h-real__icono { display: flex; align-items: center; justify-content: center; width: 88px; height: 88px; border-radius: 50%; background: var(--blanco); color: var(--verde); }
.h-real__texto { padding: 24px 22px 26px; }
.h-real__negocio { margin: 8px 0 12px; }
.h-real__nota { margin-top: 12px; font-size: .875rem; color: var(--texto-suave); }
.h-real__botones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
@media (min-width: 900px) { .h-real__tarjeta { grid-template-columns: 2fr 3fr; } .h-real__texto { padding: 36px 40px; } }
@media (max-width: 479px) { .h-real__botones .boton { flex: 1 1 100%; justify-content: center; padding-left: 16px; padding-right: 16px; } }

/* ---------- Ronda 2 (21/10/2026) ---------- */

/* Enlace discreto al correo («o escribe a alberto@…»): sin botón, para que el WhatsApp pese más */
.b-correo { margin: 0; font-size: .9375rem; color: var(--texto-suave-fuerte); text-align: center; }
.b-correo a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px; font-weight: 600; color: var(--verde); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.b-correo a:hover { text-decoration-thickness: 2px; }
.b-correo--oscuro { color: var(--sobre-verde-suave); }
.b-correo--oscuro a { color: var(--blanco); }
.b-correo a:focus-visible { outline: 3px solid var(--verde); outline-offset: 2px; border-radius: 4px; }
.b-correo--oscuro a:focus-visible { outline-color: var(--teal-claro); }
.b-hero__correo, .b-apps__correo, .b-medida__correo { margin-top: 10px; text-align: left; }
.b-salto__correo { text-align: center; }
.b-acciones { display: flex; flex-direction: column; gap: 2px; }
.b-acciones .boton { flex: none; width: 100%; max-width: 100%; white-space: normal; text-wrap: balance; text-align: center; }
.b-acciones .b-correo { text-align: center; }

/* Tarjetas que giran: variantes */
.b-giros--solapa { position: relative; z-index: 1; margin-top: -72px; }
.b-giro--extra .b-giro__img { flex: none; aspect-ratio: 4 / 3; }
.b-giro--extra .b-giro__img img { width: 100%; height: 100%; object-fit: contain; }
.b-giro--extra .b-giro__texto { padding: 12px 18px 14px; }
.b-giro--extra .b-giro__titulo { font-size: 1.125rem; min-height: 2.5em; }
.b-giro--extra .b-giro__precio { font-size: 1.375rem; }
.b-giro--extra .b-giro__acciones { padding: 6px 12px 10px; }
.b-giro--extra .b-giro__dorso { padding: 18px 18px 20px; }
.b-giros--extras { margin-top: 22px; max-width: 34rem; }
@media (min-width: 900px) { .b-giros--extras { max-width: none; } .b-giros--solapa { margin-top: -96px; } }
.b-giros__pista--oscura { color: var(--sobre-verde-suave); }

/* Elige tu web: banda oscura propia y tarjetas que se montan sobre ella */
.b-planes--hito { padding: 0; background: var(--marfil); }
.b-planes__cab { padding: 56px 0 130px; background: var(--verde); }
.b-planes__titulo { font-size: 2rem; font-size: clamp(2rem, 3vw + 1rem, 3.25rem); font-weight: 600; line-height: 1.08; letter-spacing: -.025em; color: var(--marfil); }
.b-planes__intro { margin-top: 12px; max-width: 36rem; color: var(--sobre-verde-suave); }
.b-planes__cuerpo { padding-bottom: 72px; }
@media (min-width: 900px) { .b-planes__cab { padding: 80px 0 160px; } .b-planes__cuerpo { padding-bottom: 88px; } }

/* Puente entre «Cuando te buscan» y los planes */
.b-puente { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 20px; margin-top: 32px; padding: 18px 22px; border-radius: var(--radio-grande); background: var(--verde-tinte); font-size: 1.125rem; font-weight: 600; color: var(--verde); }
.b-puente .boton { background: var(--blanco); }

/* Qué conviene saber antes de elegir */
.b-info { margin-top: 40px; }
.b-info__titulo { font-size: 1.375rem; font-weight: 600; letter-spacing: -.01em; color: var(--verde); }
.b-info__rejilla { display: grid; grid-gap: 16px; margin-top: 18px; }
.b-info__caja { padding: 20px 22px 22px; background: var(--blanco); border: 2px solid var(--gris); border-top-width: 5px; border-radius: var(--radio-grande); }
.b-info__caja--si { border-top-color: var(--verde); }
.b-info__caja--no { border-top-color: var(--terracota); }
.b-info__caja--nota { border-top-color: var(--gris); }
.b-info__caja h4 { font-size: 1.0625rem; font-weight: 700; color: var(--grafito); }
.b-info__lista { display: grid; grid-gap: 10px; margin: 14px 0 0; padding: 0; list-style: none; font-size: .9688rem; }
.b-info__lista li { display: flex; align-items: flex-start; gap: 10px; }
.b-info__lista .icono { flex: none; margin-top: 4px; }
.b-info__caja--si .icono { color: var(--verde); }
.b-info__caja--no .icono { color: var(--terracota-texto); }
.b-info__punto { flex: none; width: 8px; height: 8px; margin-top: 9px; border-radius: 50%; background: var(--texto-suave); }
@media (min-width: 900px) { .b-info__rejilla { grid-template-columns: 1.4fr 1fr 1fr; } }

/* «Ver más» de los extras */
.b-xmas { margin-top: 22px; }
.b-xmas__resumen { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; max-width: 26rem; margin: 0 auto; padding: 10px 22px; border: 2px solid var(--verde); border-radius: 999px; background: var(--blanco); color: var(--verde); font-weight: 600; text-align: center; cursor: pointer; list-style: none; }
.b-xmas__resumen::-webkit-details-marker { display: none; }
.b-xmas__resumen:hover { background: var(--verde-tinte); }
.b-xmas__resumen:focus-visible { outline: 3px solid var(--verde); outline-offset: 3px; }
.b-xmas[open] .acordeon__chevron { transform: rotate(180deg); }
.b-xmas[open] > .b-giros { margin-top: 22px; }

/* Combos con QR de reseñas */
.b-combos2 { margin-top: 40px; }
.b-combos2__tit { font-size: 1.375rem; font-weight: 700; color: var(--verde); }
.b-combos2__intro { margin-top: 4px; color: var(--grafito); }
.b-combos2__lista { display: grid; grid-gap: 16px; margin: 18px 0 0; padding: 0; list-style: none; }
.b-combo { position: relative; padding: 22px 22px 20px; background: var(--blanco); border: 2px solid var(--blanco); border-radius: var(--radio-grande); box-shadow: 0 10px 24px rgba(11, 69, 64, .12); }
.b-combo__badge { display: inline-block; padding: 4px 12px; border-radius: 999px; background: var(--verde); color: var(--blanco); font-size: .875rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.b-combo__visual { display: flex; align-items: center; gap: 10px; margin: 16px 0 14px; }
.b-combo__img { flex: 1 1 0; min-width: 0; max-width: 150px; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 14px; }
.b-combo__mas { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--verde); color: var(--blanco); font-size: 1.25rem; font-weight: 700; line-height: 1; }
.b-combo__nombre { font-size: 1.0625rem; font-weight: 600; line-height: 1.3; color: var(--grafito); }
.b-combo__precio { margin-top: 4px; font-size: 1.75rem; font-weight: 700; letter-spacing: -.02em; color: var(--verde); }
@media (min-width: 700px) { .b-combos2__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* «Cómo funcionan los precios»: panel propio con ilustraciones */
.b-precios-corto { padding: 56px 0 64px; border-top: 0; background: var(--marfil); }
.b-pc__panel { padding: 32px 22px 28px; background: var(--verde-tinte); border: 2px solid #CFE6DE; border-radius: 28px; }
.b-pc__panel .b-precios-corto__titulo { font-size: 1.75rem; font-size: clamp(1.75rem, 1.6vw + 1rem, 2.25rem); letter-spacing: -.02em; }
.b-pc__lista { display: grid; grid-gap: 14px; margin: 22px 0 14px; padding: 0; list-style: none; }
.b-pc__item { display: flex; align-items: center; gap: 14px; padding: 12px 16px 12px 12px; background: var(--blanco); border: 2px solid var(--blanco); border-radius: var(--radio-grande); }
.b-pc__icono { display: grid; place-items: center; flex: none; width: 84px; height: 84px; }
.b-pc__img { display: block; width: 84px; height: 84px; object-fit: contain; }
.b-pc__icono > svg { width: 48px; height: 48px; padding: 12px; box-sizing: border-box; border-radius: 14px; background: var(--verde); color: var(--blanco); }
.b-pc__texto { font-weight: 500; line-height: 1.35; }
.b-pc__check { display: inline-grid; place-items: center; width: 20px; height: 20px; margin-right: 8px; border-radius: 50%; background: var(--verde); color: var(--blanco); vertical-align: -4px; }
.b-pc__check .icono { width: 12px; height: 12px; }
.b-pc__enlace { margin-top: 6px; }
@media (min-width: 700px) { .b-pc__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } .b-pc__panel { padding: 40px 36px 34px; } }
@media (min-width: 1080px) {
  .b-pc__lista { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .b-pc__item { flex-direction: column; align-items: flex-start; padding: 18px 18px 20px; }
  .b-pc__icono, .b-pc__img { width: 96px; height: 96px; }
}
@media (prefers-reduced-motion: no-preference) {
  .b-secuencia .b-pc__item:not(.visible) { opacity: 0; transform: translateY(36px); }
}

/* Cómo trabajo · «Precios claros»: ilustración + título con check */
.b-precios__item { align-items: center; }
.b-precios__visual { display: grid; place-items: center; flex: none; width: 96px; height: 96px; }
.b-precios__img { display: block; width: 96px; height: 96px; object-fit: contain; }
.b-precios__item h3 { display: flex; align-items: flex-start; }

/* «¿No ves la tuya?»: banda propia con más peso */
.b-otra { display: grid; grid-gap: 16px; align-items: center; margin-top: 40px; padding: 26px 24px; border-radius: var(--radio-grande); background: var(--verde); color: var(--blanco); box-shadow: 0 18px 36px rgba(11, 69, 64, .25); }
.b-otra__icono { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: var(--teal); color: var(--sobre-teal); }
.b-otra__icono .icono { width: 28px; height: 28px; }
.b-otra__texto h3 { font-size: 1.5rem; font-weight: 600; letter-spacing: -.01em; color: var(--blanco); }
.b-otra__texto p { margin-top: 6px; color: var(--sobre-verde-suave); }
.b-otra__acciones { min-width: 0; }
@media (min-width: 900px) { .b-otra { grid-template-columns: auto 1fr minmax(15rem, 19rem); grid-gap: 24px; padding: 30px 34px; } }

/* «¿Los mensajes salen solos?»: dos tarjetas con ilustración */
.b-modos__lista--tarjetas .b-modo { display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 0; overflow: hidden; }
.b-modo__img { aspect-ratio: 3 / 2; background: var(--fondo, var(--verde-tinte)); }
.b-modo__img img { display: block; width: 100%; height: 100%; object-fit: contain; }
.b-modo__cuerpo { display: flex; align-items: flex-start; gap: 14px; padding: 18px 20px 22px; }
.b-modo__icono { flex: none; margin: 0; }

/* Cómo trabajo: viñetas con check */
.b-bullets { display: grid; grid-gap: 8px; margin: 0; padding: 0; list-style: none; }
.b-bullets li { display: flex; align-items: flex-start; gap: 10px; }
.b-bullets .icono { flex: none; margin-top: 4px; color: var(--verde); }

/* Ilustraciones de «Cómo funcionan los precios»: sin el recuadro verde del icono antiguo */
.b-pc__icono { background: none; border-radius: 0; color: inherit; }
.b-pc__icono .icono { width: auto; height: auto; }
.b-xmas__resumen { max-width: 32rem; }
.b-acciones .boton, .b-serv__pie .b-acciones .boton { flex: none; }

/* Cómo trabajo · «Nunca te quedas sin saber…»: el módulo cabe en una pantalla de escritorio */
.b-auto--informado { padding-top: 32px; padding-bottom: 36px; }
.b-auto--informado .b-auto__titulo { font-size: 2rem; font-size: clamp(1.75rem, 2.2vw + 1rem, 2.5rem); }
.b-auto--informado .b-serv__img { aspect-ratio: 2 / 1; padding: 12px 16px 8px; }
.b-auto--informado .b-serv__img img { left: 16px; top: 12px; width: calc(100% - 32px); height: calc(100% - 20px); object-fit: contain; }
.b-auto--informado .b-serv__cuerpo { padding-top: 18px; padding-bottom: 20px; }
.b-auto--informado .b-bullets { grid-gap: 6px; font-size: .9688rem; }

/* 21-10 · «¿No sabes por dónde empezar?»: el correo queda justo debajo del botón de WhatsApp */
.b-salto__acciones { display: grid; justify-items: center; gap: 2px; }
.b-salto__acciones .boton { width: 100%; }
.b-salto__acciones .b-correo { text-align: center; }
@media (min-width: 720px) { .b-salto__acciones .boton { width: auto; } }
.cierre__correo { text-align: left; }

/* ===== 21-10 · Tarjetas que giran: más compactas, con cabecera de texto con color y precio en etiqueta ===== */
[data-giro-pista] { display: none !important; }
.b-giro__img { aspect-ratio: 16 / 10; }
.b-giro__img img { height: 100%; object-fit: contain; }
.b-giro__texto { flex: 1; padding: 14px 20px 16px; background: linear-gradient(160deg, #FFFFFF 0%, var(--teal-tinte) 100%); border-top: 3px solid var(--teal); }
.b-giro__titulo { min-height: 0 !important; font-size: 1.1875rem; }
.b-giro__precio { align-items: center; gap: 4px 10px; margin-top: 8px; }
.b-giro__cifra { display: inline-block; padding: 4px 14px; border-radius: 999px; background: var(--verde); color: var(--blanco); font-size: 1.25rem; font-weight: 700; letter-spacing: -.01em; line-height: 1.2; }
.b-giro__acciones { padding: 6px 16px 12px; gap: 2px; }
.b-giro--extra .b-giro__img { aspect-ratio: 16 / 9; }
.b-giro--extra .b-giro__texto { padding: 10px 16px 12px; }
.b-giro--extra .b-giro__titulo { font-size: 1.0625rem; }
.b-giro--extra .b-giro__cifra { font-size: 1.0625rem; padding: 3px 12px; }
.b-giro--extra .b-giro__precio { margin-top: 6px; }
@media (min-width: 900px) {
  .b-giro__img { aspect-ratio: 2 / 1; }
  .b-planes__cab { padding: 56px 0 120px; }
  .b-giros--solapa { margin-top: -96px; }
  .b-giro--extra .b-giro__img { aspect-ratio: 2 / 1; }
}
.b-giro__dorso { background: linear-gradient(160deg, var(--verde) 0%, #0F5A52 100%); }

/* ===== «Antes de elegir»: tres paneles con icono ===== */
.b-info__rejilla { gap: 18px; }
.b-info__caja { position: relative; padding: 22px 22px 22px; border: 0; border-radius: var(--radio-grande); box-shadow: 0 10px 24px rgba(11, 69, 64, .10); }
.b-info__caja--si { background: linear-gradient(160deg, #E4F6EE 0%, #FFFFFF 70%); }
.b-info__caja--no { background: linear-gradient(160deg, var(--terracota-tinte) 0%, #FFFFFF 70%); }
.b-info__caja--nota { background: linear-gradient(160deg, #EAF0F4 0%, #FFFFFF 70%); }
.b-info__ico { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 10px; border-radius: 50%; color: var(--blanco); }
.b-info__ico .icono { width: 24px; height: 24px; }
.b-info__caja--si .b-info__ico { background: var(--verde); }
.b-info__caja--no .b-info__ico { background: var(--terracota-texto); }
.b-info__caja--nota .b-info__ico { background: var(--texto-suave); }
.b-info__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.b-info__chips li { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px 6px 10px; border-radius: 999px; background: var(--blanco); border: 1px solid #E9C9BB; color: var(--grafito); font-size: .9375rem; }
.b-info__chips .icono { color: var(--terracota-texto); margin: 0; }
.b-info__caja--nota .icono { color: var(--texto-suave); }

/* ===== Combos: banda propia, cálida, con tarjetas grandes ===== */
.b-combos-sec { padding: 56px 0 64px; background: linear-gradient(180deg, var(--terracota-tinte) 0%, #F7DED2 100%); border-top: 6px solid var(--terracota); }
.b-combos-sec .b-auto__titulo { color: var(--verde); }
.b-combos-sec .b-auto__intro { color: var(--grafito); }
.b-combos-sec .b-combos2__lista { margin-top: 28px; grid-gap: 22px; }
.b-combos-sec .b-combo { display: flex; flex-direction: column; padding: 0; overflow: hidden; border-radius: 26px; box-shadow: 0 18px 38px rgba(130, 60, 34, .18); }
.b-combos-sec .b-combo__visual { margin: 0; padding: 22px 18px; justify-content: center; gap: 14px; background: var(--verde); }
.b-combos-sec .b-combo__img { max-width: 210px; aspect-ratio: 3 / 2; border-radius: 16px; }
.b-combos-sec .b-combo__mas { width: 38px; height: 38px; background: var(--terracota); color: var(--grafito); }
.b-combos-sec .b-combo__cuerpo { padding: 18px 22px 20px; }
.b-combos-sec .b-combo__precio { display: inline-block; margin-top: 8px; padding: 4px 16px; border-radius: 999px; background: var(--verde); color: var(--blanco); font-size: 1.5rem; }
.b-combos-sec .b-acciones { margin-top: 12px; }
@media (min-width: 900px) { .b-combos-sec { padding: 72px 0 80px; } }
.b-info__caja .b-info__ico .icono { color: var(--blanco); margin: 0; }
.b-giro__img { flex: 0 0 auto; }
.b-giro__dorso { padding: 16px 18px 16px; }
.b-giro__dorso-tit { font-size: 1.0625rem; }
.b-giro__lista { grid-gap: 5px; margin-top: 8px; font-size: .875rem; line-height: 1.35; }
.b-giro__ver { min-height: 40px; padding: 4px 14px; }
.b-giro--extra .b-giro__dorso { padding: 14px 16px 16px; }
.b-giro__img:not(.b-giro__img--demo) { position: relative; display: block; overflow: hidden; }
.b-giro__img:not(.b-giro__img--demo) img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.b-giro__img:not(.b-giro__img--demo) { flex: 1 1 auto; }
.b-giro__texto { flex: 0 0 auto; }
.b-giro:not(.b-giro--extra) .b-giro__titulo { min-height: 2.5em !important; }
@media (min-width: 900px) { .b-auto__intro { max-width: none; } }

/* 21-10 · avisos de «¿Quieres añadir algo?» y viñetas de «Después de entregar» */
.b-avisos { display: grid; gap: 8px; margin: 16px 0 22px; padding: 0; list-style: none; }
.b-avisos li { display: flex; align-items: flex-start; gap: 10px; max-width: 52rem; color: var(--grafito); }
.b-avisos .icono { flex: none; margin-top: 3px; color: var(--verde); }
.b-decides__bullets { display: grid; gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; }
.b-decides__bullets li { display: flex; align-items: flex-start; gap: 8px; }
.b-decides__bullets .icono { flex: none; margin-top: 3px; color: var(--teal-claro); }
.b-decides__bullets li { border: 0 !important; padding: 0 !important; margin: 0 !important; }
@media (min-width: 1180px) { .b-decides__lista--4:has(> li:nth-child(5)) { grid-template-columns: repeat(5, 1fr); } }
.b-decides .b-decides__lista .b-decides__bullets li { border: 0 !important; padding: 0 !important; margin: 0 !important; }
.b-decides__bullets li::before { display: none !important; }

/* ===== 21-10 (2) · Precio como texto (no como botón), pie en etiqueta aparte, ilustración en «¿No ves la tuya?» ===== */
.b-giro__precio { display: block; margin-top: 2px; }
.b-giro__cifra { display: block; padding: 0; border-radius: 0; background: none; color: var(--verde); font-size: 1.75rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }
.b-giro__pie { display: inline-block; margin-top: 8px; padding: 3px 10px; border-radius: 8px; background: rgba(11, 69, 64, .08); color: var(--grafito); font-size: .875rem; font-weight: 500; line-height: 1.3; }
.b-giro--extra .b-giro__cifra { font-size: 1.375rem; padding: 0; }
.b-giro--extra .b-giro__precio { margin-top: 2px; }
.b-giro__texto { padding-top: 12px; }
.b-otra__icono--img { width: 96px; height: 96px; background: none; border-radius: 0; }
.b-otra__img { display: block; width: 96px; height: 96px; object-fit: contain; }

/* ===== Cómo trabajo · «Después de entregar»: tarjetas que giran sobre fondo oscuro ===== */
.b-decides--giro .b-giros--despues { margin-top: 30px; max-width: none; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 560px) { .b-decides--giro .b-giros--despues { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .b-decides--giro .b-giros--despues { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; } }
.b-giro--despues .b-giro__img, .b-giro--despues .b-giro__img--demo { aspect-ratio: 4 / 3; min-height: 0; background: var(--blanco); }
.b-giro--despues .b-giro__img:not(.b-giro__img--demo) img { inset: 12%; width: 76%; height: 76%; }
.b-giro--despues .b-giro__icono-grande .icono { width: 72px; height: 72px; }
.b-giro--despues .b-giro__titulo { min-height: 0 !important; font-size: 1.0625rem; }
.b-giro--despues .b-giro__texto { padding: 12px 16px 14px; }
.b-giro--despues .b-giro__dorso { min-height: 100%; }
.b-giro--despues .b-giro__acciones { padding: 4px 12px 8px; border-top: 0; }
.b-giro--despues .b-giro__demo-icono, .b-giro--despues .b-giro__icono-grande { display: grid; place-items: center; color: var(--verde); }
.b-giro--despues .b-giro__ver { font-size: .875rem; padding: 4px 6px; text-align: center; }
/* Hover de «Precios claros desde el primer día» */
.b-precios__item { transition: transform .25s var(--anim), box-shadow .25s var(--anim), background-color .25s var(--anim); border-radius: var(--radio-grande); }
@media (hover: hover) and (pointer: fine) { .b-precios__item:hover { transform: translateY(-5px); box-shadow: 0 16px 32px rgba(11, 69, 64, .14); background-color: var(--teal-tinte); } }
@media (prefers-reduced-motion: reduce) { .b-precios__item { transition: none; } .b-precios__item:hover { transform: none !important; } }
.b-giro--plan .b-giro__titulo { min-height: 0 !important; } .b-giro--plan .b-giro__precio { margin-top: 0; } .b-giro--plan .b-giro__pie { margin-top: 10px; }

/* ===== Combos · diseño C sobre el verde del diseño B ===== */
.b-combos-sec { background: #0F5A52; border-top: 6px solid var(--terracota); }
.b-combos-sec .b-etiqueta { color: var(--teal-claro); }
.b-combos-sec .b-auto__titulo { color: var(--blanco); }
.b-combos-sec .b-auto__intro { color: var(--sobre-verde-suave); }
.b-combos-sec .b-combos2__lista { grid-gap: 24px; }
@media (min-width: 760px) { .b-combos-sec .b-combos2__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.b-combos-sec .b-combo { position: relative; display: flex; flex-direction: column; padding: 26px 26px 24px; overflow: visible; border: 0; border-radius: 28px; background: var(--blanco); box-shadow: 0 22px 44px rgba(0, 0, 0, .28); }
.b-combo__cinta { position: absolute; top: 22px; left: -8px; padding: 6px 18px 6px 16px; border-radius: 0 8px 8px 0; background: var(--terracota-texto); color: var(--blanco); font-size: .8125rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; box-shadow: 0 6px 14px rgba(0, 0, 0, .3); }
.b-combos-sec .b-combo__visual { position: relative; display: block; margin: 34px 0 30px; padding: 0; background: none; }
.b-combos-sec .b-combo__img { display: block; width: 100%; max-width: none; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 16px; }
.b-combos-sec .b-combo__qr { position: absolute; right: -6px; bottom: -22px; width: 42%; aspect-ratio: 1 / 1; object-fit: cover; border: 5px solid var(--blanco); border-radius: 18px; box-shadow: 0 10px 22px rgba(0, 0, 0, .22); }
.b-combos-sec .b-combo__fila { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; margin-top: 8px; }
.b-combos-sec .b-combo__nombre { font-size: 1.25rem; font-weight: 600; line-height: 1.25; color: var(--grafito); }
.b-combos-sec .b-combo__precio { display: grid; place-items: center; flex: none; width: 112px; height: 112px; margin: 0; padding: 0; border: 3px dashed var(--terracota); border-radius: 50%; background: var(--terracota-tinte); color: var(--terracota-texto); font-size: 1.75rem; font-weight: 700; letter-spacing: -.02em; }
.b-combos-sec .b-acciones { margin-top: 16px; }
.b-combos-sec .b-combo .boton { width: 100%; }

/* Botón «Me interesa» de las tarjetas que giran: tan ancho como su texto, con aire a los lados */
.b-giro__acciones { align-items: center; }
.b-giro__acciones .b-acciones { width: 100%; }
.b-giro__acciones .b-acciones .boton { width: auto; padding-left: 28px; padding-right: 28px; }
.b-giro__acciones .b-acciones { display: flex; flex-direction: column; align-items: center; }
.b-combos-sec .b-combo__qr { height: auto; }
.b-combos-sec .b-combo__img { height: auto; }
.b-giro.b-giro--plan .b-giro__titulo { min-height: 0 !important; }

/* Combos con imágenes sin fondo (PNG transparentes) */
.b-combos-sec .b-combo__visual { display: flex; align-items: center; justify-content: center; margin: 34px 0 18px; padding: 18px 16px 34px; border-radius: 18px; background: linear-gradient(160deg, #E4F6EE 0%, #FBEFEA 100%); min-height: 250px; }
.b-combos-sec .b-combo__img { width: 82%; max-width: 420px; aspect-ratio: auto; height: auto; object-fit: contain; border-radius: 0; filter: drop-shadow(0 14px 18px rgba(11, 69, 64, .25)); }
.b-combos-sec .b-combo__qr { right: 4px; bottom: -26px; width: 36%; aspect-ratio: auto; height: auto; object-fit: contain; border: 0; border-radius: 0; box-shadow: none; filter: drop-shadow(0 12px 16px rgba(0, 0, 0, .28)); }
.b-combos-sec .b-combo__visual { display: grid; grid-template-columns: 1.5fr 1fr; align-items: center; gap: 8px; height: 250px; min-height: 0; margin: 34px 0 20px; padding: 14px 16px; }
.b-combos-sec .b-combo__img, .b-combos-sec .b-combo__qr { position: static; width: 100%; max-width: none; height: auto; max-height: 220px; object-fit: contain; }
.b-combos-sec .b-combo__qr { right: auto; bottom: auto; }
@media (max-width: 520px) { .b-combos-sec .b-combo__visual { height: 190px; padding: 10px; } .b-combos-sec .b-combo__img, .b-combos-sec .b-combo__qr { max-height: 160px; } }

/* ===== 21-10 (4) · extras de imagen de marca como subsección, combos sin scroll, cuidado, hover, aparición escalonada ===== */
.b-marca { margin-top: 44px; padding: 26px 24px 28px; border-radius: 28px; background: linear-gradient(160deg, #FBEFEA 0%, #FFFFFF 85%); border-top: 6px solid var(--terracota); box-shadow: 0 18px 38px rgba(130, 60, 34, .14); }
.b-marca__cab { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 22px; }
.b-marca__etiqueta { padding: 4px 14px; border-radius: 999px; background: var(--terracota-texto); color: var(--blanco); font-size: .8125rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.b-marca__titulo { font-size: 1.5rem; font-weight: 600; letter-spacing: -.01em; color: var(--verde); }
.b-marca .b-giros--extras { margin-top: 0; }
.b-extras__notas { margin-top: 18px; }

@media (min-width: 900px) {
  .b-combos-sec { padding: 30px 0 34px; }
  .b-combos-sec .b-auto__titulo { font-size: 2rem; }
  .b-combos-sec .b-auto__intro { margin-top: 4px; }
  .b-combos-sec .b-combos2__lista { margin-top: 18px; grid-gap: 20px; }
  .b-combos-sec .b-combo { padding: 16px 22px 16px; }
  .b-combos-sec .b-combo__visual { height: clamp(140px, 21vh, 220px); margin: 30px 0 12px; padding: 8px 14px; }
  .b-combos-sec .b-combo__img, .b-combos-sec .b-combo__qr { max-height: clamp(120px, 19vh, 190px); }
  .b-combo__cinta { top: 16px; }
  .b-combos-sec .b-combo__fila { margin-top: 0; }
  .b-combos-sec .b-combo__nombre { font-size: 1.125rem; }
  .b-combos-sec .b-combo__precio { width: 84px; height: 84px; font-size: 1.375rem; }
  .b-combos-sec .b-acciones { margin-top: 10px; }
}

/* «¿No ves la tuya?»: «o escribe a» y el correo en la misma línea */
@media (min-width: 900px) { .b-otra .b-correo { white-space: nowrap; } .b-otra { grid-template-columns: auto 1fr minmax(18rem, 22rem); } }

/* ¿Los mensajes salen solos?: hover en las tarjetas */
.b-modo { transition: transform .25s var(--anim), box-shadow .25s var(--anim), border-color .25s var(--anim); }
@media (hover: hover) and (pointer: fine) { .b-modo:hover { transform: translateY(-5px); border-color: var(--verde); box-shadow: 0 18px 34px rgba(11, 69, 64, .16); } }
@media (prefers-reduced-motion: reduce) { .b-modo { transition: none; } .b-modo:hover { transform: none !important; } }

/* Después de entregar: aparecen una tras otra, y la línea verde queda a la misma altura */
.b-giro--despues.aparece { transition-delay: calc(var(--n, 0) * 170ms); }
.b-giro--despues .b-giro__texto { min-height: 6.6rem; }
.b-info__ico--img { width: 84px; height: 84px; background: none !important; border-radius: 0; margin-bottom: 6px; }
.b-info__img { display: block; width: 84px; height: 84px; object-fit: contain; }

/* Respuestas de las preguntas frecuentes: párrafos y listas con check */
.acordeon__resp p + p, .acordeon__resp p + ul, .acordeon__resp ul + p { margin-top: 10px; }
.acordeon__lista { display: grid; gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; }
.acordeon__lista li { display: flex; align-items: flex-start; gap: 10px; }
.acordeon__lista .icono { flex: none; margin-top: 3px; color: var(--verde); }

/* ===== Planes de Webs en el móvil: carrusel con barra de precios ===== */
.b-planbar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 18px; padding: 5px; border-radius: 16px; background: rgba(255, 255, 255, .08); }
.b-planbar[hidden] { display: none; }
.b-planbar__op { display: grid; justify-items: center; gap: 2px; min-height: 52px; padding: 6px 4px; border: 0; border-radius: 12px; background: transparent; color: var(--sobre-verde-suave); font: inherit; font-size: .8125rem; cursor: pointer; }
.b-planbar__op b { font-size: 1.0625rem; color: var(--blanco); }
.b-planbar__op[aria-pressed="true"] { background: var(--blanco); color: var(--verde); }
.b-planbar__op[aria-pressed="true"] b { color: var(--verde); }
.b-planbar__op:focus-visible { outline: 3px solid var(--teal-claro); outline-offset: 2px; }
@media (max-width: 899.98px) {
  .b-planes__cab { padding-bottom: 104px; }
  .b-giros--solapa[data-planes-pista] { display: flex; max-width: none; gap: 14px; margin-left: -16px; margin-right: -16px; padding: 4px 16px 18px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 16px; overscroll-behavior-x: contain; }
  .b-giros--solapa[data-planes-pista] > .b-giro { flex: 0 0 84%; scroll-snap-align: center; }
  .b-giros--solapa[data-planes-pista]:focus-visible { outline: 3px solid var(--verde); outline-offset: 2px; }
}

/* ===== Móvil (<700 px): catálogos de tarjetas como filas compactas; «Ver qué incluye» despliega el detalle debajo ===== */
@media (max-width: 699.98px) {
  .b-giros--filas { grid-template-columns: 1fr !important; gap: 10px !important; }
  .b-giros--filas > .b-giro { border-radius: 18px; }
  .b-giros--filas .b-giro__escena { perspective: none; }
  .b-giros--filas .b-giro__interior, .b-giros--filas .b-giro--js .b-giro__interior, .b-giros--filas .b-giro.es-girada .b-giro__interior { display: block !important; transform: none !important; transition: none !important; }
  .b-giros--filas .b-giro__cara { backface-visibility: visible !important; -webkit-backface-visibility: visible !important; opacity: 1 !important; visibility: visible !important; }
  .b-giros--filas .b-giro__frente { display: grid; grid-template-columns: 84px 1fr; align-items: center; }
  .b-giros--filas .b-giro__img, .b-giros--filas .b-giro__img--demo { width: 72px; height: 72px; min-height: 0; aspect-ratio: 1 / 1 !important; margin: 10px 0 10px 12px; border-radius: 14px; }
  .b-giros--filas .b-giro__img .b-giro__icono-grande .icono { width: 40px; height: 40px; }
  .b-giros--filas .b-giro__texto { padding: 10px 14px 10px 4px; background: none !important; border-top: 0 !important; min-height: 0 !important; }
  .b-giros--filas .b-giro__titulo { min-height: 0 !important; font-size: 1.0625rem; }
  .b-giros--filas .b-giro__cifra { font-size: 1.25rem; }
  .b-giros--filas .b-giro__pie { margin-top: 4px; }
  .b-giros--filas .b-giro__dorso { display: none; transform: none !important; min-height: 0; border-radius: 0; }
  .b-giros--filas .b-giro.es-girada .b-giro__dorso { display: block; }
  .b-giros--filas .b-giro__acciones { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; padding: 6px 12px 10px; }
  .b-giros--filas .b-giro__acciones .b-acciones { width: auto; flex: 1 1 100%; }
  .b-giros--filas .b-giro--despues .b-giro__img, .b-giros--filas .b-giro--despues .b-giro__img--demo { background: var(--blanco); }
  .b-giros--filas .b-giro--despues .b-giro__img:not(.b-giro__img--demo) img { inset: 6%; width: 88%; height: 88%; }
  .b-marca { padding: 18px 14px 16px; }
}
@media (max-width: 699.98px) { .b-giros--filas > .b-giro:not(.b-giro--extra) .b-giro__titulo { min-height: 0 !important; } }

/* «Antes de elegir»: resumen del acordeón (en ordenador no se pliega) */
.b-info__sum { display: block; list-style: none; cursor: default; }
.b-info__sum::-webkit-details-marker { display: none; }
.b-info__chev { display: none; }
@media (max-width: 699.98px) {
  .b-info__sum { display: flex; align-items: center; gap: 12px; min-height: 48px; cursor: pointer; }
  .b-info__sum .b-info__ico { flex: none; width: 52px; height: 52px; margin: 0; }
  .b-info__sum .b-info__img { width: 52px; height: 52px; }
  .b-info__sum h4 { flex: 1; }
  .b-info__chev { display: block; flex: none; color: var(--verde); transition: transform .2s; }
  details[open] > .b-info__sum .b-info__chev { transform: rotate(180deg); }
  .b-info__caja { padding: 14px 16px; }
  .b-info__sum:focus-visible { outline: 3px solid var(--verde); outline-offset: 4px; border-radius: 10px; }
}

/* Sobre mí: el tercer párrafo de la historia se pliega en el móvil («Ver la historia completa»); en ordenador siempre visible */
.sm-mas > summary { list-style: none; }
.sm-mas > summary::-webkit-details-marker { display: none; }
.sm-mas__btn { display: none; }
@media (max-width: 699.98px) {
  .sm-mas__btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 600; color: var(--verde); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
  .sm-mas[open] .acordeon__chevron { transform: rotate(180deg); }
  .sm-mas__btn:focus-visible { outline: 3px solid var(--verde); outline-offset: 2px; border-radius: 6px; }
}

/* Combos en el móvil: tarjetas más bajas */
@media (max-width: 699.98px) {
  .b-combos-sec { padding: 40px 0 44px; }
  .b-combos-sec .b-combo { padding: 16px 16px 16px; }
  .b-combos-sec .b-combo__visual { height: 150px; margin: 30px 0 10px; padding: 6px 8px; }
  .b-combos-sec .b-combo__img, .b-combos-sec .b-combo__qr { max-height: 130px; }
  .b-combos-sec .b-combo__precio { width: 76px; height: 76px; font-size: 1.25rem; border-width: 2px; }
  .b-combos-sec .b-combo__nombre { font-size: 1.0625rem; }
}

/* Contraste AAA (7:1) sobre el verde de los combos (#0F5A52) y en la barra de planes */
.b-combos-sec .b-etiqueta, .b-combos-sec .b-auto__intro { color: #EEF3F2; }
.b-planbar__op { color: #EEF3F2; }

/* Auditoría 22-10: objetivos táctiles de 44 px y texto mínimo de 14 px */
.b-giro__ver { min-height: 44px !important; }
.b-marca__etiqueta, .b-combo__cinta { font-size: .875rem; }
.b-planbar__op { font-size: .875rem; }

/* Tableta (700-899 px): las rejillas de tarjetas pasan a 2 columnas (antes, 1 columna estrecha y centrada) */
@media (min-width: 700px) and (max-width: 899.98px) {
  .b-giros:not([data-planes-pista]) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; max-width: none; }
}
/* «Después de entregar» entre 700 y 1099 px: 3 columnas e imagen más baja (antes, 2 columnas con tarjetas muy altas) */
@media (min-width: 700px) and (max-width: 1099.98px) {
  .b-decides--giro .b-giros--despues { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .b-giro--despues .b-giro__img, .b-giro--despues .b-giro__img--demo { aspect-ratio: 16 / 10; }
}
/* Las tarjetas del carrusel de planes siempre visibles (no esperan a la animación de aparición) */
@media (max-width: 899.98px) { .b-giros--solapa[data-planes-pista] > .b-giro.aparece { opacity: 1 !important; transform: none !important; } }

/* ---- Automatización 22/10: cuatro tarjetas en «Lo que puedo preparar», «Atención 24 horas» sin scroll y ficha como servicio propio ---- */
@media (min-width: 900px) {
  .b-atencion { padding: 36px 0 40px; }
  .b-atencion .seccion__intro { margin-bottom: 0; }
  .b-atencion__lista { margin-top: 18px; }
  .b-atencion .b-demo { padding: 14px 24px 0; max-height: 190px; overflow: hidden; }
  .b-atencion .b-serv__cuerpo { padding: 16px 22px 18px; }
  .b-atencion .b-serv__desc { margin-top: 6px; }
}
/* «Lo que puedo preparar»: la imagen no se estira con el dorso, así la línea verde queda a la misma altura en todas */
@media (min-width: 700px) { .b-giros--alinear:not(.b-giros--extras) > .b-giro:not(.b-giro--extra) .b-giro__img { flex: none; } }
/* Accesibilidad 22/10: sin JavaScript no existe el botón «Ver qué incluye», así que el detalle de cada tarjeta se muestra siempre */
@media (max-width: 699.98px) { .b-giros--filas .b-giro:not(.b-giro--js) .b-giro__dorso { display: block; } }

/* Móvil 22/10: «Atención 24 horas» más corta (2 mensajes en el móvil dibujado) y «¿Los mensajes salen solos?» con imagen pequeña al lado */
@media (max-width: 899.98px) {
  .b-atencion { padding: 36px 0 40px; }
  .b-atencion .b-movil .b-aviso:nth-child(4) { display: none; }
  .b-atencion .b-demo { padding: 14px 20px 0; }
  .b-atencion .b-serv__cuerpo { padding: 16px 20px 20px; }
}
@media (max-width: 699.98px) {
  .b-modos__lista--tarjetas .b-modo { display: grid; grid-template-columns: 108px 1fr; align-items: center; }
  .b-modos__lista--tarjetas .b-modo__img { position: relative; min-width: 0; min-height: 108px; overflow: hidden; aspect-ratio: auto; align-self: stretch; }
  .b-modos__lista--tarjetas .b-modo__img img { position: absolute; inset: 0; width: 100%; height: 100%; padding: 6px; object-fit: contain; }
  .b-modos__lista--tarjetas .b-modo__cuerpo { padding: 12px 16px 12px 14px; }
}
/* 22/10: navegadores sin :has() mantienen el foco en la casilla */
@supports not selector(:has(*)) {
  .b-opcion input:focus-visible ~ .b-opcion__caja { outline: 3px solid var(--blanco); outline-offset: 3px; }
  .b-contacto--claro .b-opcion input:focus-visible ~ .b-opcion__caja { outline-color: var(--verde); }
}
/* 22/10 (opción C): accesos al asistente donde surge la duda */
.b-asis-prueba { margin-top: 24px; text-align: center; }
.b-noduda__acciones { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.b-noduda .b-noduda__asistente { color: var(--marfil); border-color: var(--marfil); }
.b-noduda .b-noduda__asistente:hover, .b-noduda .b-noduda__asistente:focus-visible { background: rgba(255, 255, 255, .12); color: var(--blanco); border-color: var(--blanco); }
.b-noduda .b-noduda__asistente:focus-visible { outline: 3px solid var(--teal-claro); outline-offset: 3px; }
button.b-faqlinea__asistente { display: flex; gap: 8px; margin-top: 4px; padding: 0; border: 0; background: none; font: inherit; font-weight: 500; text-align: left; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
button.b-faqlinea__asistente .icono { flex: none; width: 20px; height: 20px; }
button.b-faqlinea__asistente:focus-visible { outline: 3px solid var(--verde); outline-offset: 2px; border-radius: 4px; }

/* 25/10/2026: etiqueta «Mi recomendación para empezar» del plan Esencial. Sobresale por el borde superior de la tarjeta (como una pestaña)
   para no tapar el mockup. Blanco sobre terracota oscuro: 7,7:1. La tarjeta deja de recortar solo en este caso; la escena sí recorta sus esquinas. */
.b-giros:has(.b-giro--recomendado) { padding-top: 22px; }
.b-giro--recomendado { position: relative; overflow: visible; border-color: var(--terracota-texto); }
.b-giro--recomendado .b-giro__escena { overflow: hidden; border-radius: calc(var(--radio-grande) - 2px) calc(var(--radio-grande) - 2px) 0 0; }
.b-giro--recomendado .b-giro__acciones { background: var(--blanco); border-radius: 0 0 calc(var(--radio-grande) - 2px) calc(var(--radio-grande) - 2px); }
.b-giro__cinta { position: absolute; z-index: 3; top: -17px; left: 12px; max-width: calc(100% - 24px); margin: 0; padding: 6px 12px; border-radius: 10px;
  background: var(--terracota-texto); color: var(--blanco); font-size: .875rem; font-weight: 600; line-height: 1.25; letter-spacing: 0; box-shadow: 0 6px 14px rgba(0, 0, 0, .25); }

/* 25/10/2026: datos del hero de Sobre mí («+5 años» y «Desde 2020»): entran uno a uno al cargar (la cifra cuenta en b.js). */
@media (prefers-reduced-motion: no-preference) {
  .smh__datos.es-animable:not(.corre) li { opacity: 0; transform: translateY(14px); }
  .smh__datos.corre li { animation: b-entra .6s var(--anim) both; }
  .smh__datos.corre li:nth-child(2) { animation-delay: .9s; }
}

/* 25/10/2026: «¿No está tu duda?» a todo el ancho del contenedor (antes quedaba estrecho y a la izquierda): texto en más línea, botones a la derecha y correo como enlace de texto */
.b-noduda__cuerpo { max-width: 44rem; }
.b-noduda__correo { margin-top: 10px; color: var(--gris); overflow-wrap: anywhere; }
.b-noduda__correo a { display: inline-flex; align-items: center; min-height: 44px; color: var(--blanco); font-weight: 500; text-decoration: underline; text-underline-offset: 4px; }
@media (min-width: 900px) { .b-noduda__fila { grid-template-columns: minmax(0, 1fr) auto; grid-gap: 48px; } .b-noduda__acciones { justify-content: flex-end; } }

/* 25/10/2026: el botón «Ver …» de las situaciones va siempre en una sola línea (también a 320 px): texto corto, sin salto y una columna
   que se puede encoger (minmax(0,1fr)); en móvil la ilustración baja a 56 px para dejar sitio al texto. */
.b-sit__fila, .b-sit__fila:has(.b-sit__img) { grid-template-columns: 72px minmax(0, 1fr); }
.version-b .b-sit__solucion .enlace-flecha { white-space: nowrap; max-width: 100%; }
@media (max-width: 479px) {
  .b-sit__fila, .b-sit__fila:has(.b-sit__img) { grid-template-columns: 56px minmax(0, 1fr); grid-gap: 4px 12px; }
  .b-sit__img { width: 56px; height: 56px; }
  .version-b .b-sit__solucion .enlace-flecha { padding: 0 12px; font-size: .9375rem; }
  .version-b .b-sit__solucion .enlace-flecha > * + * { margin-left: 6px; }
}
@media (max-width: 359px) {
  .version-b .b-sit__solucion .enlace-flecha { padding: 0 10px; font-size: .875rem; }
  .version-b .b-sit__solucion .enlace-flecha > * + * { margin-left: 4px; }
}
@media (min-width: 640px) {
  .b-sit__fila { grid-template-columns: 56px minmax(0, 1fr) minmax(0, 1fr); }
  .b-sit__fila:has(.b-sit__img) { grid-template-columns: 88px minmax(0, 1fr) minmax(0, 1fr); }
}

/* 25/10/2026: el correo del hero de Contacto va siempre en una sola línea. En móvil se ve solo el sobre y el correo;
   «O escríbeme a» queda oculto a la vista pero lo sigue leyendo el lector de pantalla. */
.b-hero__enlace[href^="mailto"] > span { white-space: nowrap; }
@media (max-width: 479px) {
  .b-hero__pref { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
}
@media (max-width: 359px) {
  .b-hero__enlace[href^="mailto"] { font-size: .9375rem; }
}

/* ---------- 29/10/2026: portada del artículo y avance del hero del Blog sin caja (ilustración PNG suelta) ---------- */
.blog-art__portada { background: none; box-shadow: none; border-radius: 0; }
.blog-art__portada-img { inset: 0; width: 100%; height: 100%; }
.b-notis--blog ul { max-width: 30rem; grid-gap: 18px; }
.b-notis--blog .b-noti, .b-notis--blog .b-noti:nth-child(2), .b-notis--blog .b-noti:nth-child(3) { margin-left: 0; padding: 0; border-radius: 0; background: none; box-shadow: none; color: var(--blanco); align-items: center; font-size: 1.125rem; line-height: 1.35; font-weight: 600; }
.b-notis--blog .b-noti__icono--img { width: 96px; height: 96px; margin: 0 18px 0 0; }
.b-notis--blog .b-noti__icono:not(.b-noti__icono--img) { width: 56px; height: 56px; background: rgba(255, 255, 255, .14); color: var(--blanco); }
@media (max-width: 479.98px) { .b-notis--blog .b-noti__icono--img { width: 72px; height: 72px; margin-right: 14px; } .b-notis--blog .b-noti { font-size: 1.0625rem; } }