/* /herramientas, /about, /security, /contact (2026-10-26).
   Se apoya en funciones-v2.css (.fx-*) y añade sólo las piezas propias. */

.px-h1 { font-size: clamp(2.3rem, 4.3vw, 3.7rem); }
.px-centro { margin-left: auto; margin-right: auto; text-align: center; }

/* ── Chips de cristal sobre los videos ── */
.px-chip {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .7rem 1rem;
    border-radius: 999px;
    font: 600 .8rem/1.2 var(--fx-sans);
    color: #e0e7ff;
}
.px-chip i { color: #67e8f9; }
.px-dot { width: 8px; height: 8px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 10px #4ade80; flex: none; }

.px-iconos { display: flex; align-items: center; gap: .55rem; padding: .7rem 1rem; border-radius: 999px; }
.px-iconos i {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(99, 102, 241, .6), rgba(56, 189, 248, .45));
    color: #fff;
    font-size: .72rem;
}
.px-iconos span { margin-left: .3rem; font: 600 .8rem/1 var(--fx-sans); color: #e0e7ff; }

/* Dictado: la frase se escribe sola */
.px-dictado { width: min(66%, 320px); }
.px-rec { display: flex; align-items: center; gap: .5rem; margin: 0 0 .5rem; font: 600 .72rem/1 var(--fx-sans); letter-spacing: .06em; text-transform: uppercase; color: #fca5a5; }
.px-typing {
    margin: 0;
    font: 500 .84rem/1.45 var(--fx-sans);
    color: #f5f6ff;
    white-space: nowrap;
    overflow: hidden;
    border-right: 2px solid #67e8f9;
    width: 0;
    animation: pxEscribe 6s steps(40, end) infinite, pxCursor .8s step-end infinite;
}
@keyframes pxEscribe { 0% { width: 0; } 60%, 85% { width: 100%; } 100% { width: 100%; } }
@keyframes pxCursor { 50% { border-color: transparent; } }

/* Cuaderno: árbol de secciones */
.px-arbol { width: min(54%, 250px); display: grid; gap: .45rem; padding: .8rem .9rem; }
.px-arbol p { margin: 0; display: flex; align-items: center; gap: .45rem; font: 600 .76rem/1.2 var(--fx-sans); color: #c7cae6; }
.px-arbol i { color: #a5b4fc; font-size: .72rem; }
.px-arbol .n2 { padding-left: .9rem; }
.px-arbol .n3 { padding-left: 1.8rem; font-weight: 500; }
.px-arbol .on { color: #fff; }
.px-arbol .on i { color: #67e8f9; }

/* Documentos */
.px-doc { display: flex; align-items: center; gap: .7rem; padding: .75rem 1rem; }
.px-doc > i { font-size: 1.4rem; color: #f87171; }
.px-doc b { display: block; font: 600 .82rem/1.2 var(--fx-sans); color: #fff; }
.px-doc span { font: 500 .72rem/1.3 var(--fx-sans); color: #86efac; }

/* Calculadora */
.px-calc { display: grid; gap: .25rem; padding: .85rem 1.1rem; min-width: 170px; }
.px-calc span { font: 600 .7rem/1 var(--fx-sans); letter-spacing: .08em; text-transform: uppercase; color: #c7cae6; }
.px-calc b { font: 700 2rem/1.1 var(--fx-sans); letter-spacing: -.03em; color: #fff; }
.px-calc small { font-size: .7rem; font-weight: 500; letter-spacing: 0; color: var(--fx-muted); }
.px-calc em { font: 600 .74rem/1 var(--fx-sans); font-style: normal; color: #fbbf24; }

/* ── Nosotros ── */
.px-dos {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(2rem, 6vw, 5rem);
    align-items: start;
}
.px-dos .fx-p:first-child { margin-top: 0; }
.px-quote { margin: 0 auto; max-width: 900px; text-align: center; }
.px-quote blockquote {
    margin: 0;
    font: 600 clamp(1.6rem, 3vw, 2.5rem)/1.25 var(--fx-sans);
    letter-spacing: -.025em;
    color: #f5f6ff;
    text-wrap: balance;
}
.px-quote figcaption { margin-top: 1.4rem; font: 500 .9rem/1.4 var(--fx-sans); color: var(--fx-muted); }
.px-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ── Seguridad ── */
.px-normas {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 2.4rem;
}
.px-normas div {
    display: grid;
    gap: .45rem;
    padding: 1.6rem 1.5rem;
    border-radius: 18px;
    background: var(--fx-card);
    border: 1px solid var(--fx-line);
}
.px-normas b { font: 700 1.1rem/1.2 var(--fx-sans); color: #fff; }
.px-normas span { font: 400 .92rem/1.5 var(--fx-sans); color: var(--fx-muted); }
.px-nota { margin-left: auto; margin-right: auto; font-size: .95rem; }

/* ── Contacto ── */
.px-wa { background: linear-gradient(135deg, #16a34a 0%, #22c55e 100%); box-shadow: 0 10px 30px -8px rgba(34, 197, 94, .6), inset 0 1px 0 rgba(255, 255, 255, .22); }
.px-wa i { font-size: 1.2rem; }
.px-canal { display: block; text-decoration: none; }
.px-canal:hover h3 { color: #c7d2fe; }
.px-canal p { word-break: break-word; }
.px-canal .fa-whatsapp { color: #4ade80; }

.px-form-wrap { max-width: 760px; }
.px-form {
    display: grid;
    gap: 1.1rem;
    padding: clamp(1.5rem, 4vw, 2.6rem);
    border-radius: 24px;
    background: var(--fx-card);
    border: 1px solid var(--fx-line);
}
.px-form .fx-h2 { margin-bottom: .4rem; font-size: clamp(1.6rem, 2.6vw, 2.1rem); }
.px-campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem; }
.px-form .form-label { display: grid; gap: .45rem; font: 600 .82rem/1.2 var(--fx-sans); color: #c7cae6; }
.px-form input[type="text"],
.px-form input[type="email"],
.px-form select,
.px-form textarea {
    width: 100%;
    box-sizing: border-box;
    padding: .8rem .95rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(199, 210, 254, .2);
    color: #f5f6ff;
    font: 400 .95rem/1.4 var(--fx-sans);
    transition: border-color .2s ease, background-color .2s ease;
}
.px-form select option { background: #15143a; color: #f5f6ff; }
.px-form input:focus, .px-form select:focus, .px-form textarea:focus {
    outline: none;
    border-color: #818cf8;
    background: rgba(255, 255, 255, .06);
}
.px-form .form-checkbox { display: flex; gap: .6rem; align-items: flex-start; font: 400 .85rem/1.45 var(--fx-sans); color: var(--fx-muted); }
.px-form .form-checkbox input { margin-top: .2rem; accent-color: #6366f1; }
.px-form .contact-submit { justify-self: start; border: 0; cursor: pointer; }
.px-form .form-foot-note { margin: 0; font: 400 .8rem/1.4 var(--fx-sans); color: var(--fx-muted); }
.px-form .text-link { color: #a5b4fc; }

/* ── Tablet ── */
@media (max-width: 980px) {
    .px-dos { grid-template-columns: minmax(0, 1fr); text-align: center; }
    .px-dos .fx-p { margin-left: auto; margin-right: auto; }
    .px-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .px-normas { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin-left: auto; margin-right: auto; }
}

/* ── Móvil ── */
@media (max-width: 600px) {
    .px-grid-4 { grid-template-columns: minmax(0, 1fr); }
    .px-campos { grid-template-columns: minmax(0, 1fr); }
    .px-form .contact-submit { justify-self: stretch; }
    .px-chip, .px-iconos span { font-size: .7rem; }
    .px-iconos { padding: .55rem .75rem; gap: .4rem; }
    .px-iconos i { width: 24px; height: 24px; }
    .px-dictado, .px-arbol { width: 66%; padding: .6rem .7rem; }
    .px-typing { font-size: .72rem; }
    .px-arbol p { font-size: .66rem; }
    .px-calc { min-width: 0; padding: .6rem .8rem; }
    .px-calc b { font-size: 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
    .px-typing { animation: none; width: auto; border-right: 0; white-space: normal; }
}