/* =====================================================
   PÁGINA PRINCIPAL — estilo propio
   Tinta (verde mar oscuro), bruma (verde muy claro), mango (color de la marca)
   y sol (amarillo para resaltar poco). Títulos en Bricolage Grotesque.
   ===================================================== */
.in{
    --tinta: #0F2E2C;
    --tinta-2: #1B4440;
    --bruma: #EEF6F2;
    --sol: #FFC94A;
    --chat: #DFF6CC;
    --wa: #0E7A5A;
    --display: 'Bricolage Grotesque', 'Plus Jakarta Sans', system-ui, sans-serif;
}
.in h1, .in h2, .in h3, .in-final-grande{ font-family: var(--display); }
.in :focus-visible{ outline: 3px solid var(--m-color); outline-offset: 3px; border-radius: 6px; }

/* ---------- Portada ---------- */
.in-portada{ position: relative; padding: 56px 0 40px; overflow: hidden; background: linear-gradient(180deg, #fff 0%, var(--bruma) 100%); }
.in-portada-fila{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.in-portada h1{ font-size: clamp(38px, 5.6vw, 68px); font-weight: 800; line-height: .98; letter-spacing: -.035em; color: var(--tinta); margin: 0 0 22px; max-width: 13ch; text-wrap: balance; }
.in-lead{ font-size: 18px; line-height: 1.6; color: #44504E; max-width: 34em; margin: 0 0 28px; }
.in-botones{ display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
.in-btn{ height: 56px; padding: 0 28px; font-size: 16px; border-radius: 16px; }
.in-btn-texto{ color: var(--tinta); font-size: 16px; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; text-decoration-color: color-mix(in srgb, var(--tinta) 30%, transparent); }
.in-btn-texto:hover{ text-decoration-color: var(--m-color); color: var(--tinta); }
.in-garantias{ margin: 20px 0 0; font-size: 14px; color: #5B6866; }

/* Escena con dos celulares */
.in-escena{ position: relative; height: 560px; }
.in-cel{ position: absolute; width: 270px; border-radius: 40px; background: #0C1514; padding: 10px; box-shadow: 0 40px 80px -20px rgba(15,46,44,.45), 0 0 0 1px rgba(255,255,255,.06) inset; }
.in-cel-pantalla{ position: relative; height: 520px; border-radius: 31px; background: #fff; overflow: hidden; padding: 14px 12px; }
.in-cel-cliente{ left: 0; top: 0; z-index: 2; }
.in-cel-dueno{ right: 0; top: 30px; transform: rotate(3deg); transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.in-cel-cliente{ transition: transform .6s cubic-bezier(.2,.8,.2,1), filter .6s; }
.in-url{ background: #F0F2F4; border-radius: 10px; padding: 6px 10px; font-size: 10.5px; color: #6B7280; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.in-url b{ color: #16181D; }
.in-tienda{ display: flex; align-items: center; gap: 9px; margin: 12px 2px 10px; }
.in-tienda strong{ display: block; font-size: 14px; }
.in-tienda small{ display: flex; align-items: center; gap: 5px; font-size: 10.5px; color: #6B7280; }
.in-tienda-logo{ width: 36px; height: 36px; border-radius: 11px; background: #B4436C; color: #fff; font-weight: 800; font-size: 13px; display: flex; align-items: center; justify-content: center; }
.in-punto{ width: 7px; height: 7px; border-radius: 50%; background: #16A34A; }
.in-bolsa{ margin-left: auto; position: relative; width: 34px; height: 34px; border-radius: 50%; background: #F3F4F6; display: flex; align-items: center; justify-content: center; font-size: 15px; }
.in-bolsa b{ position: absolute; top: -3px; right: -3px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: #B4436C; color: #fff; font-size: 10px; display: flex; align-items: center; justify-content: center; transform: scale(0); transition: transform .3s cubic-bezier(.3,1.6,.5,1); }
.in-bolsa.lleno b{ transform: scale(1); }
.in-productos{ display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.in-prod{ border: 1px solid #EEF0F3; border-radius: 14px; padding: 6px 6px 8px; display: flex; flex-direction: column; gap: 3px; transition: transform .2s, box-shadow .2s; }
.in-prod b{ font-size: 10.5px; line-height: 1.25; }
.in-prod em{ font-style: normal; font-size: 10.5px; font-weight: 800; color: #B4436C; }
.in-prod.tocado{ transform: scale(.95); box-shadow: 0 0 0 2px #B4436C; }
.in-foto{ position: relative; overflow: hidden; aspect-ratio: 1; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 28px; color: rgba(255,255,255,.95); }
.in-foto.c1{ background: linear-gradient(140deg, #6B3E26, #B9794F); }
.in-foto.c2{ background: linear-gradient(140deg, #E0606E, #F7A8B0); }
.in-foto.c3{ background: linear-gradient(140deg, #D9822B, #F2B65B); }
.in-foto.c4{ background: linear-gradient(140deg, #7A5AF8, #B9A6FF); }
.in-foto.c5{ background: linear-gradient(140deg, #E76F51, #F4A261); }
.in-foto.c6{ background: linear-gradient(140deg, #264653, #2A9D8F); }

.in-hoja{ position: absolute; left: 0; right: 0; bottom: 0; background: #fff; border-radius: 22px 22px 0 0; padding: 16px 14px 14px; box-shadow: 0 -12px 30px rgba(0,0,0,.14); display: flex; flex-direction: column; gap: 6px; transform: translateY(105%); transition: transform .45s cubic-bezier(.2,.8,.2,1); }
.in-hoja.abierta{ transform: translateY(0); }
.in-hoja strong{ font-size: 14px; }
.in-hoja-precio{ font-size: 15px; font-weight: 800; color: #B4436C; }
.in-hoja-sub{ font-size: 10.5px; font-weight: 700; color: #6B7280; margin-top: 4px; }
.in-check{ display: flex; align-items: center; gap: 8px; font-size: 11.5px; border: 1.5px solid #E5E7EB; border-radius: 10px; padding: 7px 9px; transition: border-color .2s, background .2s; }
.in-check i{ width: 15px; height: 15px; border-radius: 4px; border: 1.5px solid #C7CBD1; flex: none; transition: background .2s, border-color .2s; }
.in-check em{ margin-left: auto; font-style: normal; color: #6B7280; font-weight: 700; }
.in-check.marcado{ border-color: #B4436C; background: #FCF1F5; }
.in-check.marcado i{ background: #B4436C url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat; border-color: #B4436C; }
.in-campo{ min-height: 30px; border: 1.5px solid #E5E7EB; border-radius: 10px; padding: 6px 9px; font-size: 11.5px; }
.in-campo.escribiendo::after{ content: ""; display: inline-block; width: 1.5px; height: 13px; background: #16181D; vertical-align: -2px; margin-left: 1px; animation: in-cursor .8s steps(1) infinite; }
.in-boton{ margin-top: 6px; background: #B4436C; color: #fff; border-radius: 12px; padding: 10px; text-align: center; font-size: 12px; font-weight: 700; transition: transform .15s; }
.in-boton.tocado, .in-enviar.tocado{ transform: scale(.95); }
.in-enviar{ position: absolute; left: 12px; right: 12px; bottom: 14px; background: #1FA855; color: #fff; border-radius: 14px; padding: 11px; text-align: center; font-size: 12px; font-weight: 700; transform: translateY(160%); transition: transform .4s cubic-bezier(.2,.8,.2,1); }
.in-enviar.visible{ transform: translateY(0); }
.in-dedo{ position: absolute; width: 34px; height: 34px; border-radius: 50%; background: rgba(22,24,29,.18); border: 2px solid rgba(255,255,255,.9); box-shadow: 0 4px 14px rgba(0,0,0,.25); left: 50%; top: 60%; opacity: 0; pointer-events: none; transition: left .55s cubic-bezier(.4,0,.2,1), top .55s cubic-bezier(.4,0,.2,1), opacity .25s, transform .15s; transform: translate(-50%, -50%); z-index: 5; }
.in-dedo.visible{ opacity: 1; }
.in-dedo.toca{ transform: translate(-50%, -50%) scale(.75); }

/* WhatsApp */
.in-wa{ padding: 0; background: #EFE7DD; display: flex; flex-direction: column; }
.in-wa-cabeza{ display: flex; align-items: center; gap: 8px; background: #0B5E48; color: #fff; padding: 22px 12px 10px; }
.in-wa-cabeza strong{ display: block; font-size: 13px; }
.in-wa-cabeza small{ font-size: 10.5px; opacity: .85; }
.in-wa-foto{ width: 32px; height: 32px; border-radius: 50%; background: #E8552F; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; }
.in-wa-chat{ flex: 1; padding: 14px 10px; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; background-image: radial-gradient(rgba(15,46,44,.06) 1px, transparent 1px); background-size: 14px 14px; }
.in-wa-escribiendo{ align-self: flex-start; background: #fff; border-radius: 4px 14px 14px 14px; padding: 10px 12px; display: none; gap: 4px; box-shadow: 0 1px 1px rgba(0,0,0,.08); }
.in-wa-escribiendo.visible{ display: flex; }
.in-wa-escribiendo i{ width: 6px; height: 6px; border-radius: 50%; background: #9AA3A1; animation: in-salto 1s infinite; }
.in-wa-escribiendo i:nth-child(2){ animation-delay: .15s; }
.in-wa-escribiendo i:nth-child(3){ animation-delay: .3s; }
.in-wa-msj{ align-self: flex-start; max-width: 92%; background: #fff; border-radius: 4px 14px 14px 14px; padding: 9px 10px 6px; display: flex; flex-direction: column; gap: 3px; font-size: 11.5px; line-height: 1.35; box-shadow: 0 1px 1px rgba(0,0,0,.08); transform-origin: top left; display: none; }
.in-wa-msj.visible{ display: flex; animation: in-burbuja .35s cubic-bezier(.3,1.4,.5,1); }
.in-wa-msj > *{ opacity: 0; transform: translateY(4px); transition: opacity .25s, transform .25s; }
.in-wa-msj > .ve{ opacity: 1; transform: none; }
.in-wa-msj .tenue{ color: #5E6A68; }
.in-wa-total{ margin-top: 3px; }
.in-wa-hora{ align-self: flex-end; font-size: 9.5px; color: #8A9492; }
.in-wa-hora i{ color: #34B7F1; font-size: 12px; }

@media (max-width: 980px){
    .in-portada-fila{ grid-template-columns: minmax(0, 1fr); }
    .in-portada h1{ max-width: 16ch; }
    .in-escena{ height: 540px; max-width: 520px; width: 100%; margin: 0 auto; }
}
@media (max-width: 560px){
    .in-portada{ padding: 36px 0 24px; }
    .in-lead{ font-size: 16px; }
    .in-botones .in-btn{ width: 100%; }
    .in-escena{ height: 470px; }
    .in-cel{ width: 220px; border-radius: 34px; padding: 8px; }
    .in-cel-pantalla{ height: 440px; border-radius: 27px; padding: 12px 10px; }
    .in-cel-dueno{ top: 20px; }
    /* En el celular, cuando llega el pedido, el WhatsApp pasa al frente */
    .in-escena.en-wa .in-cel-dueno{ z-index: 3; transform: translateX(-28px) rotate(0deg); }
    .in-escena.en-wa .in-cel-cliente{ transform: translateX(-10px) scale(.96); filter: brightness(.92); }
    .in-prod b, .in-prod em{ font-size: 9.5px; }
}
@media (max-width: 380px){ .in-cel{ width: 200px; } }

/* ---------- Cinta de enlaces ---------- */
.in-cinta{ background: var(--tinta); color: #CFE3DD; overflow: hidden; padding: 16px 0; }
.in-cinta-pista{ display: flex; gap: 14px; width: max-content; animation: in-cinta 48s linear infinite; }
.in-cinta:hover .in-cinta-pista{ animation-play-state: paused; }
.in-cinta span{ display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.14); font-size: 14px; white-space: nowrap; }
.in-cinta span b{ color: #fff; }
.in-cinta span i{ color: var(--sol); }

/* ---------- Secciones ---------- */
.in-seccion{ padding: 88px 0; }
.in-bruma{ background: var(--bruma); }
.in-h2{ font-size: clamp(30px, 4vw, 46px); font-weight: 800; letter-spacing: -.03em; line-height: 1.05; color: var(--tinta); margin: 0 0 40px; max-width: 18ch; text-wrap: balance; }
.in-h2.centro{ text-align: center; margin-left: auto; margin-right: auto; }
.in-sub{ color: #50605D; font-size: 16px; margin: -26px 0 30px; }
.in-sub.centro{ text-align: center; }
@media (max-width: 600px){ .in-seccion{ padding: 60px 0; } .in-h2{ margin-bottom: 28px; } }

/* Pasos: una línea que se dibuja al bajar */
.in-pasos{ list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; position: relative; counter-reset: paso; }
.in-pasos::before{ content: ""; position: absolute; top: 74px; left: 8%; right: 8%; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--m-color), var(--sol)); transform: scaleX(var(--avance, 0)); transform-origin: left; transition: transform .2s linear; }
.in-pasos li{ position: relative; counter-increment: paso; }
.in-paso-dibujo{ height: 148px; border-radius: 22px; background: var(--bruma); display: flex; align-items: center; justify-content: center; position: relative; margin-bottom: 22px; }
.in-paso-dibujo::after{ content: counter(paso); position: absolute; top: -14px; left: 18px; width: 34px; height: 34px; border-radius: 50%; background: var(--tinta); color: #fff; font-family: var(--display); font-weight: 800; display: flex; align-items: center; justify-content: center; font-size: 16px; }
.in-pasos h3{ font-size: 22px; font-weight: 800; margin: 0 0 8px; color: var(--tinta); letter-spacing: -.01em; }
.in-pasos p{ margin: 0; color: #50605D; line-height: 1.6; max-width: 32ch; }
.in-mini-campo{ background: #fff; border-radius: 12px; padding: 12px 14px; font-size: 14px; color: #6B7280; box-shadow: 0 6px 18px rgba(15,46,44,.08); max-width: 90%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.in-mini-campo b{ color: var(--tinta); }
.in-escribe::after{ content: ""; display: inline-block; width: 2px; height: 15px; background: var(--m-color); vertical-align: -2px; margin-left: 1px; animation: in-cursor .8s steps(1) infinite; }
.in-mini-prod{ display: flex; align-items: center; gap: 12px; background: #fff; border-radius: 14px; padding: 10px 16px 10px 10px; box-shadow: 0 6px 18px rgba(15,46,44,.08); }
.in-mini-prod .in-foto{ width: 56px; font-size: 22px; }
.in-mini-prod b{ display: block; font-size: 14px; color: var(--tinta); }
.in-mini-prod small{ color: #6B7280; font-size: 12px; }
.in-mini-compartir{ display: flex; gap: 12px; }
.in-mini-compartir i{ width: 46px; height: 46px; border-radius: 14px; background: #fff; display: flex; align-items: center; justify-content: center; font-size: 20px; color: var(--tinta); box-shadow: 0 6px 18px rgba(15,46,44,.08); }
@media (max-width: 860px){
    .in-pasos{ grid-template-columns: 1fr; gap: 36px; }
    .in-pasos::before{ display: none; }
}

/* Tipos de negocio */
.in-negocios{ display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 48px; align-items: center; }
.in-negocios-texto p{ color: #50605D; margin: -24px 0 24px; font-size: 16px; }
.in-pestanas{ display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.in-pestanas button{ display: inline-flex; align-items: center; gap: 10px; border: none; background: transparent; padding: 12px 16px; border-radius: 14px; font: inherit; font-size: 16px; font-weight: 700; color: #50605D; cursor: pointer; transition: background .2s, color .2s; }
.in-pestanas button i{ font-size: 18px; }
.in-pestanas button:hover{ color: var(--tinta); background: rgba(15,46,44,.05); }
.in-pestanas button[aria-selected="true"]{ background: var(--tinta); color: #fff; }
.in-negocios-vista{ position: relative; min-height: 390px; }
.in-ficha{ background: #fff; border-radius: 28px; padding: 24px; display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 20px 24px; box-shadow: 0 30px 60px -30px rgba(15,46,44,.35); animation: in-ficha .45s cubic-bezier(.2,.8,.2,1); }
.in-ficha[hidden]{ display: none; }
.in-foto.grande{ font-size: 56px; border-radius: 20px; }
.in-ficha-info{ display: flex; flex-wrap: wrap; align-content: flex-start; gap: 6px; }
.in-ficha-info strong{ width: 100%; font-family: var(--display); font-size: 22px; color: var(--tinta); }
.in-ficha-info em{ width: 100%; font-style: normal; font-weight: 800; color: var(--m-color); font-size: 17px; margin-bottom: 4px; }
.in-ficha-sub{ width: 100%; font-size: 13px; font-weight: 700; color: #6B7280; margin-top: 8px; }
.in-chip{ display: inline-flex; padding: 7px 12px; border-radius: 10px; border: 1.5px solid #E3E6EB; font-size: 13px; font-weight: 700; }
.in-chip.activo{ border-color: var(--tinta); background: var(--tinta); color: #fff; }
.in-chip.tachado{ color: #B0B5BD; text-decoration: line-through; }
.in-color{ width: 32px; height: 32px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px #E3E6EB; margin-right: 4px; }
.in-color:first-of-type{ box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--tinta); }
.in-ficha-campo{ width: 100%; border: 1.5px solid #E3E6EB; border-radius: 10px; padding: 9px 12px; font-size: 14px; }
.in-ficha-nota{ width: 100%; margin-top: 8px; font-size: 13px; color: #50605D; display: flex; gap: 6px; align-items: center; }
.in-ficha-nota.alerta{ color: #A15C00; font-weight: 700; }
.in-ficha-lista{ grid-column: 1 / -1; list-style: none; padding: 16px 0 0; margin: 0; border-top: 1px solid #EEF0F3; display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 14px; color: var(--tinta); font-weight: 600; }
.in-ficha-lista li::before{ content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--sol); margin-right: 8px; vertical-align: 1px; }
@media (max-width: 900px){
    .in-negocios{ grid-template-columns: minmax(0, 1fr); gap: 24px; }
    .in-pestanas{ flex-direction: row; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; margin: 0 -20px; padding-left: 20px; padding-right: 20px; scrollbar-width: none; }
    .in-pestanas button{ white-space: nowrap; font-size: 14px; padding: 10px 14px; background: #fff; }
    .in-negocios-vista{ min-height: 0; }
}
@media (max-width: 560px){
    .in-ficha{ grid-template-columns: 1fr; padding: 18px; }
    .in-foto.grande{ aspect-ratio: 16 / 9; }
}

/* Lo que incluye: lista sin tarjetas */
.in-funciones{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 48px; }
.in-funciones i{ font-size: 26px; color: var(--m-color); }
.in-funciones h3{ font-size: 20px; font-weight: 800; color: var(--tinta); margin: 10px 0 6px; letter-spacing: -.01em; }
.in-funciones p{ margin: 0; color: #50605D; line-height: 1.6; }
@media (max-width: 900px){ .in-funciones{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px){ .in-funciones{ grid-template-columns: 1fr; gap: 28px; } }

/* Precios */
.in-periodo{ display: flex; width: max-content; margin: 0 auto 32px; background: #fff; border-radius: 999px; padding: 5px; box-shadow: 0 0 0 1px #DCE6E2; }
.in-periodo button{ border: none; background: transparent; border-radius: 999px; padding: 10px 20px; font: inherit; font-weight: 700; font-size: 15px; color: #50605D; cursor: pointer; transition: background .25s, color .25s; }
.in-periodo button span{ font-size: 12px; color: var(--wa); margin-left: 4px; }
.in-periodo button[aria-checked="true"]{ background: var(--tinta); color: #fff; }
.in-periodo button[aria-checked="true"] span{ color: var(--sol); }
.in-planes{ display: grid; grid-template-columns: repeat(2, minmax(0, 400px)); justify-content: center; gap: 22px; align-items: start; }
.in-plan{ background: #fff; border-radius: 28px; padding: 30px; }
.in-plan.pro{ background: var(--tinta); color: #E4EFEB; }
.in-plan h3{ font-size: 24px; font-weight: 800; margin: 0 0 10px; color: inherit; }
.in-plan.pro h3{ color: #fff; }
.in-precio{ display: flex; align-items: baseline; gap: 8px; margin: 0; }
.in-precio strong{ font-family: var(--display); font-size: 46px; font-weight: 800; letter-spacing: -.03em; color: var(--tinta); display: inline-block; transition: transform .3s, opacity .3s; }
.in-plan.pro .in-precio strong{ color: #fff; }
.in-precio strong.cambia{ transform: translateY(-8px); opacity: 0; }
.in-precio span{ color: #6B7A77; }
.in-plan.pro .in-precio span{ color: #A9C3BC; }
.in-equivale{ min-height: 22px; margin: 4px 0 18px; font-size: 14px; color: var(--sol); font-weight: 700; }
.in-plan:not(.pro) .in-precio{ margin-bottom: 40px; }
.in-btn-plan{ width: 100%; height: 52px; font-size: 15px; border-radius: 14px; }
.in-plan ul{ list-style: none; padding: 0; margin: 24px 0 0; display: flex; flex-direction: column; gap: 11px; font-size: 15px; }
.in-plan li{ display: flex; gap: 10px; line-height: 1.45; }
.in-plan li::before{ content: ""; flex: none; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%; background: #E2F3EC url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.5l2.2 2.2L11.5 6' fill='none' stroke='%230E7A5A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat; }
.in-plan.pro li::before{ background-color: rgba(255,201,74,.18); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.5l2.2 2.2L11.5 6' fill='none' stroke='%23FFC94A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
@media (max-width: 760px){ .in-planes{ grid-template-columns: 1fr; } .in-plan:not(.pro) .in-precio{ margin-bottom: 18px; } }

/* Preguntas */
.in-preguntas{ border-top: 1px solid #DDE5E2; }
.in-preguntas details{ border-bottom: 1px solid #DDE5E2; }
.in-preguntas summary{ list-style: none; cursor: pointer; padding: 22px 40px 22px 0; font-family: var(--display); font-weight: 600; font-size: 20px; color: var(--tinta); position: relative; }
.in-preguntas summary::-webkit-details-marker{ display: none; }
.in-preguntas summary::after{ content: ""; position: absolute; right: 4px; top: 50%; width: 14px; height: 14px; margin-top: -10px; border-right: 2.5px solid var(--tinta); border-bottom: 2.5px solid var(--tinta); transform: rotate(45deg); transition: transform .25s, margin .25s; }
.in-preguntas details[open] summary::after{ transform: rotate(-135deg); margin-top: -3px; }
.in-preguntas p{ margin: -6px 0 22px; color: #50605D; line-height: 1.65; max-width: 62ch; }

/* Final */
.in-final{ background: var(--tinta); color: #fff; padding: 96px 0; text-align: center; }
.in-final-grande{ font-size: clamp(36px, 6.4vw, 84px); font-weight: 800; letter-spacing: -.04em; line-height: .98; margin: 0 auto 34px; max-width: 14ch; text-wrap: balance; }
.in-btn-claro{ background: var(--sol); color: var(--tinta); }
.in-btn-claro:hover{ color: var(--tinta); }

/* ---------- Animaciones ---------- */
@keyframes in-cursor{ 50%{ opacity: 0; } }
@keyframes in-salto{ 0%, 60%, 100%{ transform: translateY(0); } 30%{ transform: translateY(-4px); } }
@keyframes in-cinta{ to{ transform: translateX(-50%); } }
@keyframes in-burbuja{ from{ opacity: 0; transform: scale(.85); } }
@keyframes in-ficha{ from{ opacity: 0; transform: translateY(12px) scale(.98); } }

@media (prefers-reduced-motion: reduce){
    .in *, .in *::before, .in *::after{ animation: none !important; transition: none !important; }
    .in-cinta-pista{ flex-wrap: wrap; width: auto; justify-content: center; }
    .in-pasos::before{ transform: scaleX(1); }
}

/* Fotos reales */
.in-foto.con-foto{ background: #EEF0F3; }
.in-foto img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }

/* Lo que incluye, por grupos */
.in-funciones{ grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 36px 32px; }
.in-grupo h3{ display: flex; align-items: center; gap: 10px; font-size: 19px; margin: 0 0 14px; }
.in-grupo h3 i{ font-size: 22px; color: var(--m-color); margin: 0; }
.in-grupo ul{ list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 11px; }
.in-grupo li{ position: relative; padding-left: 18px; color: #3F4B49; line-height: 1.5; font-size: 15px; }
.in-grupo li::before{ content: ""; position: absolute; left: 0; top: .6em; width: 7px; height: 7px; border-radius: 50%; background: var(--sol); }
.in-pro{ display: inline-block; font-size: 11px; font-weight: 800; color: var(--tinta); background: rgba(255,201,74,.35); border-radius: 6px; padding: 1px 6px; vertical-align: 1px; }
@media (max-width: 1080px){ .in-funciones{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px){ .in-funciones{ grid-template-columns: 1fr; gap: 30px; } }