/* ===========================================================================
   Montaje · landing comercial de la plataforma
   ---------------------------------------------------------------------------
   Paleta tinta y ocre, deliberadamente sobria: este sitio vende software a
   dueños de negocios de eventos. Si tuviera personalidad visual fuerte,
   competiría con la marca del cliente, que es justo lo que la plataforma
   promete respetar.

   Hoja aparte de sitio.css: los sitios de inquilino tienen su propia identidad
   y no comparten nada con esta.
   =========================================================================== */

:root {
    --tinta:      #14181c;
    --tinta-sua:  #2b3238;
    --gris:       #5c6772;
    --gris-cl:    #8b959e;
    --linea:      #e3e6e9;
    --linea-sua:  #eef0f2;
    --papel:      #ffffff;
    --papel-sua:  #f7f8f9;
    --ocre:       #b4763a;
    --ocre-osc:   #8e5b2b;
    --ocre-cl:    #f3ebe2;

    --ancho: 1140px;
    --serif: Georgia, 'Times New Roman', serif;
    --sans:  system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--sans);
    color: var(--tinta);
    background: var(--papel);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }

.pf-wrap {
    max-width: var(--ancho);
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* --------------------------------------------------------- tipografía -- */

h1, h2, h3 {
    font-family: var(--serif);
    font-weight: 600;
    letter-spacing: -0.015em;
    line-height: 1.2;
    margin: 0;
}

h1 { font-size: clamp(2.1rem, 4.6vw, 3.3rem); }
h2 { font-size: clamp(1.55rem, 2.9vw, 2.2rem); }
h3 { font-size: 1.12rem; letter-spacing: 0; }

h1 em {
    font-style: normal;
    color: var(--ocre);
}

/* Etiqueta de sección: da jerarquía sin gastar un encabezado */
.pf-label,
.pf-eyebrow {
    font-family: var(--sans);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ocre);
    margin: 0 0 0.75rem;
}

.pf-sub,
.pf-sec-sub {
    font-size: 1.08rem;
    color: var(--gris);
    max-width: 62ch;
    margin: 1rem 0 0;
}

.pf-nota {
    font-size: 0.92rem;
    color: var(--gris);
    border-left: 2px solid var(--ocre);
    padding-left: 1rem;
    margin: 2.5rem 0 0;
    max-width: 60ch;
}

/* ------------------------------------------------------------- header -- */

/* El encabezado va en tinta porque el logotipo es dorado sobre oscuro: la
   palabra "MONTAJE" es casi blanca y sobre papel desaparecería. */
.pf-header {
    background: var(--tinta);
    position: sticky;
    top: 0;
    z-index: 10;
}

.pf-header-in {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding-top: 0.9rem;
    padding-bottom: 0.9rem;
}

.pf-marca {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: var(--papel);
}

/* Sin la franja del descriptor, el logo puede crecer sin engordar la barra */
.pf-marca-logo { height: 34px; width: auto; display: block; }

.pf-marca-txt {
    font-family: var(--serif);
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.pf-nav {
    display: flex;
    align-items: center;
    gap: 1.6rem;
}

.pf-nav a {
    color: var(--gris-cl);
    text-decoration: none;
    font-size: 0.95rem;
}

.pf-nav a:hover { color: var(--papel); }

/* Sobre fondo oscuro el botón de línea necesita su propio contorno */
.pf-header .pf-btn-linea {
    border-color: rgba(255, 255, 255, 0.25);
    color: var(--papel);
}

.pf-header .pf-btn-linea:hover {
    border-color: var(--ocre);
    color: var(--ocre);
}

/* ------------------------------------------------------------ botones -- */

.pf-btn {
    display: inline-block;
    padding: 0.78rem 1.5rem;
    border-radius: 4px;
    font-size: 0.95rem;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.pf-btn-solido {
    background: var(--ocre);
    color: #fff;
    border: 1px solid var(--ocre);
    font-weight: 500;
}

.pf-btn-solido:hover { background: var(--ocre-osc); border-color: var(--ocre-osc); }

.pf-btn-linea {
    border: 1px solid var(--linea);
    color: var(--tinta);
    background: transparent;
}

.pf-btn-linea:hover { border-color: var(--gris-cl); }

.pf-btn-sm { padding: 0.5rem 1.1rem; font-size: 0.9rem; }
.pf-btn-ancho { width: 100%; border: 0; font-size: 1rem; padding: 0.9rem; }

/* --------------------------------------------------------------- hero -- */

.pf-hero {
    padding: clamp(3.5rem, 7vw, 6rem) 0 clamp(3rem, 6vw, 5rem);
    border-bottom: 1px solid var(--linea-sua);
}

.pf-hero-in {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 3.5rem;
    align-items: center;
}

.pf-hero-txt { min-width: 0; }

.pf-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    margin-top: 2rem;
}

.pf-hero-nota {
    font-size: 0.86rem;
    color: var(--gris-cl);
    margin: 1.4rem 0 0;
}

.pf-hero-corto { padding-bottom: clamp(2rem, 4vw, 3rem); }
.pf-hero-corto .pf-sub { margin-bottom: 0; }

/* Bloque en tinta tras el logotipo: la palabra "MONTAJE" es blanco crema y
   sobre papel se perdería. Aquí recupera el contraste dorado con el que fue
   diseñada, y de paso da un punto focal al hero. */
.pf-marco-marca {
    background: var(--tinta);
    border-radius: 12px;
    padding: 2.5rem 2rem;
    box-shadow: 0 18px 50px -22px rgba(20, 24, 28, 0.55);
}

.pf-hero-logo {
    display: block;
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
}

/* Hueco de captura: se sostiene solo hasta que existan las imágenes */
.pf-captura {
    border: 1px solid var(--linea);
    border-radius: 8px;
    overflow: hidden;
    background: var(--papel-sua);
    box-shadow: 0 12px 40px -18px rgba(20, 24, 28, 0.35);
}

.pf-captura img { display: block; width: 100%; }

.pf-captura-hueco {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    color: var(--gris-cl);
    font-size: 0.88rem;
    border-style: dashed;
}

/* ---------------------------------------------------------- secciones -- */

.pf-sec { padding: clamp(3.5rem, 7vw, 5.5rem) 0; }

.pf-sec + .pf-sec { border-top: 1px solid var(--linea-sua); }

/* ------------------------------------------------ los tres inventarios -- */

.pf-tipos {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-top: 2.75rem;
}

.pf-tipo {
    border: 1px solid var(--linea);
    border-radius: 8px;
    padding: 1.6rem 1.5rem;
    background: var(--papel);
}

/* El tercero es el que ningún competidor modela: se marca sin gritar */
.pf-tipo-destacado {
    background: var(--ocre-cl);
    border-color: transparent;
}

.pf-tipo-n {
    font-family: var(--serif);
    font-size: 0.82rem;
    color: var(--ocre);
    letter-spacing: 0.1em;
}

.pf-tipo h3 { margin: 0.55rem 0 0.6rem; }

.pf-tipo p {
    margin: 0;
    font-size: 0.94rem;
    color: var(--gris);
}

.pf-tipo em { color: var(--tinta-sua); font-style: italic; }

/* ------------------------------------------------------- dos columnas -- */

.pf-dos-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3.5rem;
    align-items: center;
}

.pf-dos-col p {
    color: var(--gris);
    max-width: 54ch;
}

.pf-dos-col strong { color: var(--tinta); font-weight: 600; }

.pf-diagrama {
    color: var(--tinta-sua);
    background: var(--papel-sua);
    border: 1px solid var(--linea);
    border-radius: 8px;
    padding: 1.5rem;
}

.pf-diagrama svg { display: block; width: 100%; height: auto; }

/* ------------------------------------------------------------- figuras -- */

/* Los diagramas heredan el color del texto vía currentColor, así que basta
   con darles el fondo y el aire; el trazo se resuelve solo. */
.pf-figura {
    margin: 0;
    color: var(--tinta-sua);
    background: var(--papel-sua);
    border: 1px solid var(--linea);
    border-radius: 10px;
    padding: 1.75rem 1.5rem 1.25rem;
}

.pf-figura svg { display: block; width: 100%; height: auto; }

.pf-figura figcaption {
    margin-top: 1rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--linea);
    font-size: 0.86rem;
    color: var(--gris);
    line-height: 1.5;
}

/* La línea de tiempo necesita todo el ancho: comprimida a media columna las
   horas se encimarían. */
.pf-figura-ancha {
    margin-top: 2.5rem;
    padding: 2rem 1.75rem 1.25rem;
}

.pf-figura-ancha figcaption { text-align: center; }

/* La sección del ciclo de lavado invierte el orden en escritorio: la figura
   va primero porque es el argumento, y el texto la explica. */
.pf-lavado { background: var(--papel-sua); }
.pf-lavado .pf-figura { background: var(--papel); }

/* ---------------------------------------------------- huecos de imagen -- */

/* Espacios reservados para fotografía o gráfico que el usuario generará.
   Se ven deliberadamente como andamio —borde punteado, fondo plano— para que
   nadie los confunda con contenido terminado si la página se enseña antes de
   tiempo. La proporción la fija cada uso con --pf-ratio. */
.pf-hueco {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    aspect-ratio: var(--pf-ratio, 3 / 2);
    background: repeating-linear-gradient(
        45deg,
        var(--papel-sua),
        var(--papel-sua) 10px,
        #f1f2f4 10px,
        #f1f2f4 20px
    );
    border: 2px dashed var(--gris-cl);
    border-radius: 10px;
    padding: 1.5rem;
    text-align: center;
}

.pf-hueco-tipo {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ocre-osc);
    margin: 0;
}

.pf-hueco-que {
    font-family: var(--serif);
    font-size: 1.05rem;
    color: var(--tinta);
    margin: 0;
    max-width: 34ch;
}

.pf-hueco-nota {
    font-size: 0.8rem;
    color: var(--gris);
    margin: 0;
    max-width: 42ch;
    line-height: 1.5;
}

.pf-hueco-medida {
    font-family: var(--mono, monospace);
    font-size: 0.72rem;
    color: var(--gris-cl);
    margin: 0;
}

/* --------------------------------------------------- evidencia (fotos) -- */

.pf-evidencia-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-top: 2.75rem;
}

.pf-evidencia-item { margin: 0; }

.pf-evidencia-item img {
    display: block;
    width: 100%;
    border-radius: 10px;
}

.pf-evidencia-item figcaption {
    margin-top: 0.8rem;
    font-size: 0.88rem;
    color: var(--gris);
}

.pf-evidencia-item strong { color: var(--tinta); font-weight: 600; }

/* -------------------------------------------------------------- giros -- */

/* Cuatro grupos, no veinte viñetas: la lista larga se lee como directorio.
   Fondo suave para separarla de las dos secciones de argumento que la rodean. */
.pf-giros { background: var(--papel-sua); }

.pf-giros-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin-top: 2.75rem;
}

.pf-giro {
    border: 1px solid var(--linea);
    border-radius: 8px;
    padding: 1.6rem 1.5rem;
    background: var(--papel);
}

.pf-giro h3 {
    margin: 0 0 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--linea-sua);
}

/* Los giros van como texto corrido separado por puntos medios, no como <ul>:
   una lista vertical de siete renglones pesa más que el argumento que la sigue. */
.pf-giro-lista {
    margin: 0;
    font-size: 0.94rem;
    color: var(--gris);
}

.pf-giro-clave {
    margin: 0.9rem 0 0;
    font-size: 0.9rem;
    color: var(--tinta-sua);
    font-style: italic;
}

/* ------------------------------------------------------------ módulos -- */

.pf-lista-modulos {
    list-style: none;
    margin: 2.5rem 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem 2.5rem;
}

.pf-lista-modulos li {
    border-top: 2px solid var(--tinta);
    padding-top: 0.9rem;
}

.pf-lista-modulos strong {
    display: block;
    font-size: 1.02rem;
    margin-bottom: 0.25rem;
}

.pf-lista-modulos span {
    font-size: 0.9rem;
    color: var(--gris);
}

/* ----------------------------------------------------------- clientes -- */

.pf-clientes { background: var(--papel-sua); }

.pf-lista-clientes {
    list-style: none;
    margin: 2.5rem 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.5rem;
}

.pf-lista-clientes li {
    background: var(--papel);
    border: 1px solid var(--linea);
    border-radius: 8px;
    padding: 1.5rem;
}

.pf-cliente-nombre {
    display: block;
    font-family: var(--serif);
    font-size: 1.2rem;
    font-weight: 600;
}

.pf-cliente-desc {
    display: block;
    font-size: 0.9rem;
    color: var(--gris);
    margin-top: 0.45rem;
}

.pf-cliente-ciudad {
    display: block;
    font-size: 0.8rem;
    color: var(--gris-cl);
    margin-top: 0.7rem;
    letter-spacing: 0.04em;
}

/* ------------------------------------------------------------- cierre -- */

.pf-cierre {
    text-align: center;
    background: var(--tinta);
    color: var(--papel);
}

.pf-cierre h2 { color: var(--papel); }

.pf-cierre p {
    color: var(--gris-cl);
    max-width: 48ch;
    margin: 1rem auto 2rem;
}

/* ----------------------------------------------------------- contacto -- */

.pf-contacto-in {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 3.5rem;
    align-items: start;
}

.pf-form-caja {
    background: var(--papel);
    border: 1px solid var(--linea);
    border-radius: 10px;
    padding: 2rem;
}

.pf-campo { margin-bottom: 1.15rem; }

.pf-campo-fila {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.pf-form label {
    display: block;
    font-size: 0.86rem;
    font-weight: 500;
    margin-bottom: 0.4rem;
    color: var(--tinta-sua);
}

.pf-form input[type="text"],
.pf-form input[type="email"],
.pf-form input[type="tel"],
.pf-form select,
.pf-form textarea {
    width: 100%;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--linea);
    border-radius: 5px;
    font-family: inherit;
    font-size: 0.95rem;
    color: var(--tinta);
    background: var(--papel);
}

.pf-form input:focus,
.pf-form select:focus,
.pf-form textarea:focus {
    outline: 2px solid var(--ocre);
    outline-offset: -1px;
    border-color: var(--ocre);
}

.pf-form textarea { resize: vertical; min-height: 90px; }

/* Trampa para bots: fuera de pantalla, no display:none — algunos bots
   detectan display:none y saltan el campo, que es justo lo que no queremos. */
.pf-trampa {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.pf-form-legal {
    font-size: 0.8rem;
    color: var(--gris-cl);
    margin: 1rem 0 0;
    text-align: center;
}

/* Errores de validación de CakePHP */
.pf-form .error-message {
    display: block;
    font-size: 0.82rem;
    color: #a5342b;
    margin-top: 0.35rem;
}

.pf-form .input.error input,
.pf-form .input.error select,
.pf-form .input.error textarea { border-color: #a5342b; }

/* Mensajes flash */
.message {
    padding: 0.9rem 1.1rem;
    border-radius: 6px;
    margin-bottom: 1.5rem;
    font-size: 0.92rem;
}

.message.success { background: #e8f3ec; color: #1d5c37; }
.message.error   { background: #fbeae8; color: #8f2f26; }

/* Columna lateral del contacto */
.pf-contacto-lado h2 { font-size: 1.3rem; margin-bottom: 1.5rem; }

.pf-pasos {
    list-style: none;
    counter-reset: paso;
    margin: 0 0 2.5rem;
    padding: 0;
}

.pf-pasos li {
    counter-increment: paso;
    position: relative;
    padding-left: 2.5rem;
    margin-bottom: 1.5rem;
}

.pf-pasos li::before {
    content: counter(paso);
    position: absolute;
    left: 0;
    top: 0;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: var(--ocre-cl);
    color: var(--ocre-osc);
    font-size: 0.82rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pf-pasos strong { display: block; margin-bottom: 0.2rem; }

.pf-pasos span {
    font-size: 0.9rem;
    color: var(--gris);
}

.pf-contacto-directo {
    border-top: 1px solid var(--linea);
    padding-top: 1.5rem;
}

.pf-contacto-directo a {
    color: var(--ocre-osc);
    font-size: 1rem;
}

/* ------------------------------------------------------------- footer -- */

/* Pie en tinta, igual que el encabezado: cierra la página con la marca en su
   contraste natural y enmarca el contenido claro. */
.pf-footer {
    background: var(--tinta);
    color: var(--gris-cl);
    padding-top: 3.5rem;
}

.pf-footer-in {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 2.5rem;
    padding-bottom: 2.5rem;
}

.pf-footer-logo {
    height: 110px;
    width: auto;
    display: block;
    margin-bottom: 0.9rem;
}

.pf-footer-nombre {
    font-family: var(--serif);
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--papel);
    margin: 0;
}

.pf-footer-desc {
    color: var(--gris-cl);
    margin: 0.2rem 0 0.6rem;
}

.pf-footer-giros {
    font-size: 0.86rem;
    color: var(--gris);
    margin: 0;
}

.pf-footer-nav {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    align-items: flex-start;
}

.pf-footer-nav a {
    color: var(--gris-cl);
    text-decoration: none;
    font-size: 0.93rem;
}

.pf-footer-nav a:hover { color: var(--ocre); }

.pf-footer-legal {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 1.5rem;
    padding-bottom: 2rem;
    font-size: 0.83rem;
    color: var(--gris);
}

.pf-footer-legal a { color: var(--gris-cl); }
.pf-footer-legal a:hover { color: var(--ocre); }

/* ------------------------------------------------------------ celular -- */

@media (max-width: 900px) {
    .pf-hero-in,
    .pf-dos-col,
    .pf-contacto-in,
    .pf-footer-in {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .pf-tipos,
    .pf-lista-modulos { grid-template-columns: 1fr; }

    /* En celular la captura va después del texto y ocupa menos alto */
    .pf-hero-art { order: 2; }
    .pf-captura-hueco { min-height: 200px; }
}

@media (max-width: 620px) {
    /* Los giros aguantan dos columnas a 900px —son tarjetas de texto corto—,
       así que colapsan más tarde que las rejillas de tres. */
    .pf-giros-grid { grid-template-columns: 1fr; }
    .pf-evidencia-grid { grid-template-columns: 1fr; }
    .pf-figura-ancha { padding: 1.25rem 0.75rem 1rem; }

    .pf-campo-fila { grid-template-columns: 1fr; gap: 0; }
    .pf-nav { gap: 1rem; }
    .pf-nav a:not(.pf-btn) { display: none; }
    .pf-cta .pf-btn { width: 100%; text-align: center; }
    .pf-form-caja { padding: 1.4rem; }
}