/* Estilos públicos del plugin Gestión de Peluquería.
   Las variables --pelu-* las define el tema hijo storefront-peluqueria. */

.pelu-portada,
.pelu-servicios-pagina,
.pelu-reservar {
    max-width: 74rem;
    margin: 0 auto;
}

.pelu-hero {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    align-items: center;
    gap: 60px;
    text-align: left;
    padding: 64px 0;
}

.pelu-hero-logo img {
    max-width: 120px;
    height: auto;
}

.pelu-hero-nombre {
    margin: 0 0 22px;
    font: 400 clamp(38px, 4.6vw, 64px)/1.13 "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
    letter-spacing: -.045em;
}

.pelu-hero-eslogan {
    font-size: 14px;
    color: var(--pelu-primario, #7a3e5d);
    margin-top: 0;
}

.pelu-hero-botones {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 26px;
}

@media (min-width: 48em) {
    .pelu-hero-botones {
        flex-direction: row;
        justify-content: flex-start;
        gap: 12px;
    }
}

.pelu-boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 48px;
    padding: 13px 22px;
    border-radius: 9px;
    border: 1px solid var(--pelu-primario, #7a3e5d);
    background-color: var(--pelu-primario, #7a3e5d);
    color: #ffffff;
    font-weight: 600;
    font-size: 13px;
    text-decoration: none;
}

.pelu-boton:hover,
.pelu-boton:focus {
    background-color: var(--pelu-acento, #c89b6d);
    border-color: var(--pelu-acento, #c89b6d);
    color: #ffffff;
}

.pelu-boton-secundario {
    background-color: transparent;
    color: var(--pelu-primario, #7a3e5d);
}

.pelu-boton-secundario:hover,
.pelu-boton-secundario:focus {
    color: #ffffff;
}

.pelu-bloque {
    margin: 60px 0;
}

.pelu-servicios-lista,
.pelu-donde-lista {
    list-style: none;
    margin: 0;
    padding: 0;
}

.pelu-servicio,
.pelu-tarjeta,
.pelu-horario-tabla,
.pelu-donde-lista {
    background: #ffffff;
    border: 1px solid #e8e2dd;
    border-radius: 16px;
    padding: 24px;
}

.pelu-servicio {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 0;
}

.pelu-servicio-precio {
    font-weight: 600;
    font-size: 14px;
    color: var(--pelu-primario, #7a3e5d);
}

.pelu-servicios-tarjetas {
    display: grid;
    gap: 20px;
}

@media (min-width: 48em) {
    .pelu-servicios-tarjetas {
        grid-template-columns: repeat(3, 1fr);
    }
}

.pelu-tarjeta-nombre {
    margin: 18px 0 12px;
}

.pelu-tarjeta-precio {
    font-size: 1.2em;
    font-weight: 700;
    color: var(--pelu-primario, #7a3e5d);
}

.pelu-horario-tabla {
    width: 100%;
    border-collapse: collapse;
}

.pelu-horario-tabla th,
.pelu-horario-tabla td {
    text-align: left;
    padding: 12px 4px;
    border-bottom: 1px solid #f0ebe7;
}

.pelu-horario-tabla tr:last-child th,
.pelu-horario-tabla tr:last-child td {
    border-bottom: 0;
}

.pelu-donde-lista li {
    margin-bottom: 0.35rem;
}

.pelu-proximamente {
    color: #8a7f78;
    font-style: italic;
}

.pelu-acceso {
    text-align: center;
    border-top: 1px solid var(--pelu-borde, #e7dfdb);
    padding-top: 28px;
}

/* Flujo de reserva (hito 4) */
.pelu-paso h3 { margin: 0 0 .8rem; }
.pelu-srv-btn { display: block; width: 100%; text-align: left; background: #fff; border: 2px solid var(--pelu-borde, #e6ddd4); border-radius: 10px; padding: .8rem 1rem; margin-bottom: .6rem; cursor: pointer; font-size: 1rem; }
.pelu-srv-btn:hover { border-color: var(--pelu-primario, #7a3e5d); }
.pelu-tira-dias { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: .8rem; }
.pelu-dia-btn { min-width: 64px; min-height: 64px; border: 2px solid var(--pelu-borde, #e6ddd4); border-radius: 10px; background: #fff; cursor: pointer; }
.pelu-dia-btn:disabled { opacity: .35; cursor: default; }
.pelu-dia-btn.elegido, .pelu-dia-btn:hover:not(:disabled) { border-color: var(--pelu-primario, #7a3e5d); }
.pelu-tira-horas { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: .5rem; margin-bottom: .8rem; }
.pelu-hora-btn { min-height: 48px; border: 2px solid var(--pelu-borde, #e6ddd4); border-radius: 10px; background: #fff; font-weight: 700; cursor: pointer; }
.pelu-hora-btn:hover { border-color: var(--pelu-primario, #7a3e5d); background: var(--pelu-primario, #7a3e5d); color: #fff; }
.pelu-resumen { background: var(--pelu-fondo, #faf7f4); border-radius: 10px; padding: .8rem 1rem; margin-bottom: .8rem; }
.pelu-paso input[type="date"] { min-height: 48px; padding: .4rem .6rem; border: 2px solid var(--pelu-borde, #e6ddd4); border-radius: 10px; font-size: 1rem; }
.pelu-cita-propia, .pelu-cita-historial { margin-bottom: .6rem; }

/* Mobile first: contraste, objetivos táctiles y disposición en móvil */
.pelu-srv-btn, .pelu-dia-btn, .pelu-hora-btn, .pelu-cancelar {
    color: #333;
}
.pelu-tira-dias {
    flex-wrap: nowrap; overflow-x: auto; padding-bottom: .4rem;
    -webkit-overflow-scrolling: touch; scrollbar-width: thin;
}
.pelu-dia-btn { flex: 0 0 auto; font-size: .95rem; }
.pelu-tira-horas { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
.pelu-hora-btn { font-size: 1.05rem; }

.pelu-paso .pelu-boton, .pelu-cita-acciones .pelu-boton {
    display: flex; width: 100%; box-sizing: border-box; text-align: center;
}
.pelu-cita-acciones { display: flex; flex-direction: column; gap: .5rem; }
.pelu-tarjeta input, .pelu-tarjeta select, .pelu-tarjeta textarea,
.pelu-paso input, .pelu-paso select, .pelu-mis-citas input {
    font-size: 16px; min-height: 44px;
}
.pelu-resumen p { margin: .3rem 0; font-size: 1.05rem; }
.pelu-paso h3 { font-size: 1.35rem; }

/* Cabecera/botones de la portada ya grandes; en móvil van a ancho completo */
@media (max-width: 48em) {
    .pelu-hero-botones { display: flex; flex-direction: column; gap: .6rem; }
    .pelu-hero-botones .pelu-boton { width: 100%; box-sizing: border-box; }
    .pelu-horario-tabla { width: 100%; font-size: .95rem; }
    .pelu-servicios-lista .pelu-servicio { font-size: 1.05rem; }
}
/* Escritorio: botones en línea y acciones en fila */
@media (min-width: 48em) {
    .pelu-paso .pelu-boton, .pelu-cita-acciones .pelu-boton { display: inline-flex; width: auto; }
    .pelu-cita-acciones { flex-direction: row; }
}

.pelu-portada *, .pelu-servicios-pagina *, .pelu-reservar * { box-sizing: border-box; }
.pelu-antetitulo { font-size: 10px; letter-spacing: .16em; font-weight: 650; color: var(--pelu-primario, #743e59); margin: 0 0 18px; }
.pelu-hero-nombre em { font-weight: 400; color: var(--pelu-primario, #743e59); }
.pelu-hero-salon { font-weight: 600; font-size: 16px; margin-bottom: 4px; }
.pelu-hero-presentacion { max-width: 390px; font-size: 15px; color: #76666f; line-height: 1.8; }
.pelu-hero-nota { display: flex; align-items: center; gap: 9px; color: #76666f; font-size: 11px; margin: 22px 0 0; }
.pelu-hero-nota .pelu-icono { width: 17px; }
.pelu-hero-visual { position: relative; }
.pelu-hero-visual img { width: 100%; height: auto; display: block; }
.pelu-hero-sello { position: absolute; bottom: 36px; left: -28px; display: flex; align-items: center; gap: 14px; border: 1px solid #e7dfdb; background: #fffdf9; padding: 18px 22px; border-radius: 14px; color: #76566a; font-size: 12px; box-shadow: 0 8px 32px #5c3e4710; }
.pelu-hero-sello > .pelu-icono { width: 30px; height: 30px; }
.pelu-hero-sello strong { color: #41333e; font-weight: 550; }
.pelu-valores { display: flex; justify-content: space-around; gap: 20px; padding: 24px 0; border-block: 1px solid #e7dfdb; color: #75636f; font-size: 12px; }
.pelu-valores span { display: inline-flex; gap: 12px; align-items: center; }
.pelu-seccion-titulo { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 28px; }
.pelu-seccion-titulo h2, .pelu-visita h2 { font: 400 36px/1.2 Georgia, serif; letter-spacing: -.035em; margin-bottom: 0; }
.pelu-seccion-titulo > a { font-size: 12px; text-decoration: none; padding-bottom: 4px; }
.pelu-seccion-titulo .pelu-antetitulo { margin-bottom: 12px; }
.pelu-servicios-lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; }
.pelu-servicios-lista .pelu-servicio { border: 0; border-bottom: 1px solid #dcd3df; border-radius: 0; padding: 24px 0; background: transparent; }
.pelu-servicio-numero { font: italic 22px Georgia, serif; color: #a38291; }
.pelu-servicio-nombre { font-weight: 600; font-size: 17px; text-decoration: none; color: #46313f; }
.pelu-servicio > p { font-size: 12px; color: #76666f; margin: 0; }
.pelu-servicio-precio { margin-top: auto; padding-top: 10px; }
.pelu-visita { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; background: #ebe6ee; border-radius: 24px; padding: 40px; margin-top: 64px; }
.pelu-visita .pelu-bloque { margin: 0; }
.pelu-visita h2 { margin-bottom: 24px; font-size: 32px; }
.pelu-visita .pelu-horario-tabla, .pelu-visita .pelu-donde-lista { background: transparent; border: 0; padding: 0; }
.pelu-visita .pelu-horario-tabla th, .pelu-visita .pelu-horario-tabla td { background: transparent; font-size: 12px; border-bottom-color: #e3d8ce; }
.pelu-donde-lista { font-size: 15px; }
.pelu-donde-texto { color: #76666f; font-size: 14px; margin: 24px 0; }
.pelu-intro { max-width: 620px; color: #76666f; margin-bottom: 32px; }
.pelu-servicios-tarjetas > .pelu-tarjeta { display: flex; flex-direction: column; align-items: flex-start; }
.pelu-tarjeta > p:not(.pelu-tarjeta-precio) { color: #76666f; font-size: 14px; }
.pelu-tarjeta .pelu-boton { margin-top: auto; }
.pelu-servicio-icono { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: #f3e9ee; color: var(--pelu-primario, #743e59); }
.pelu-reserva-salon { padding-top: 16px; font-size: 13px; }
.pelu-web .pelu-srv-btn, .pelu-web .pelu-dia-btn, .pelu-web .pelu-hora-btn { background: #fff; color: #44303e; }
.pelu-web .pelu-srv-btn:hover, .pelu-web .pelu-dia-btn.elegido, .pelu-web .pelu-hora-btn:hover { background: #f3e9ee; color: #63334c; border-color: #743e59; }
.pelu-paso { padding: 28px; border-radius: 18px; background: #fff; border: 1px solid #e7dfdb; }
.pelu-srv-btn { padding: 18px; }
.pelu-resumen { padding: 20px; }
.pelu-cita-propia, .pelu-cita-historial { padding: 22px; border: 1px solid #e7dfdb; border-radius: 14px; background: #fff; }
.pelu-web .entry-content .pelu-boton { text-decoration: none; }
.pelu-cuenta-saludo h2 { font-size: 32px; letter-spacing: -.035em; margin: 0 0 8px; }
.pelu-cuenta-saludo p, .pelu-cuenta-pedidos > p { color: #716474; max-width: 60ch; }
.pelu-cuenta-proxima { padding: 28px; margin: 28px 0 36px; background: #fff; border-radius: 20px; border-left: 4px solid #743e59; }
.pelu-cuenta-proxima > h3 { font-size: 14px; color: #716474; margin-bottom: 24px; }
.pelu-cuenta-cita { display: flex; align-items: center; gap: 24px; }
.pelu-fecha-visita { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 94px; min-height: 104px; flex-shrink: 0; background: #eee5ed; color: #743e59; border-radius: 14px; }
.pelu-fecha-visita strong { font-size: 38px; line-height: 1.15; font-weight: 550; }
.pelu-fecha-visita span { font-size: 12px; }
.pelu-cuenta-cita h4, .pelu-cuenta-cita h3 { font-size: 22px; font-weight: 600; margin: 0 0 8px; letter-spacing: -.025em; }
.pelu-cuenta-cita p { margin: 0 0 8px; }
.pelu-cuenta-cita > div > span { font-size: 13px; color: #716474; }
.pelu-cuenta-precio { margin-left: 20px; }
.pelu-cuenta-acciones { display: flex; align-items: center; gap: 20px; margin-top: 24px; }
.pelu-cuenta-acciones > span { color: #716474; font-size: 12px; }
.pelu-cuenta-seccion { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.pelu-cuenta-seccion h2, .pelu-cuenta-seccion h3 { margin: 0; font-size: 21px; letter-spacing: -.025em; }
.pelu-cuenta-seccion > a { font-size: 13px; }
.pelu-cuenta-pedidos ul { list-style: none; margin: 0; }
.pelu-cuenta-pedidos li { display: flex; align-items: center; gap: 20px; padding: 18px 0; border-bottom: 1px solid #ddd4df; font-size: 13px; }
.pelu-cuenta-pedidos li > a { flex: 1; font-weight: 600; text-decoration: none; }
.pelu-cuenta-pedidos small { display: block; font-weight: 400; color: #716474; }
.pelu-cuenta-pedidos li > span { color: #43634f; }
.pelu-cuenta-enlaces { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 40px; }
.pelu-cuenta-enlaces > a { display: flex; align-items: center; gap: 14px; text-decoration: none; padding-block: 14px; }
.pelu-cuenta-enlaces strong { font-size: 14px; font-weight: 600; }
.pelu-cuenta-enlaces small { display: block; color: #716474; font-size: 12px; }
.pelu-dialogo { width: min(480px, calc(100% - 32px)); border: 1px solid #e1dce5; border-radius: 20px; padding: 28px; background: #fff; color: #342b35; box-shadow: 0 24px 90px #30213333; max-height: 90dvh; }
.pelu-dialogo::backdrop { background: #241a2966; }
.pelu-dialogo h2 { font-size: 24px; letter-spacing: -.03em; padding-right: 36px; }
.pelu-dialogo .pelu-dialogo-cerrar { position: absolute; top: 14px; right: 14px; display: grid; place-items: center; width: 36px; height: 36px; padding: 6px; border: 0; border-radius: 9px; background: transparent; color: #706371; }
.pelu-dialogo .pelu-dialogo-cerrar:hover { color: #743e59; background: #f2e9ef; }
.pelu-dialogo p { font-size: 14px; color: #716474; }
.pelu-dialogo-acciones { display: flex; gap: 12px; justify-content: flex-end; margin-top: 24px; }
.pelu-web .pelu-dialogo .pelu-boton-secundario { background: #fff; color: #743e59; }
.pelu-dialogo .pelu-error { color: #9a342e; padding: 12px; background: #faefed; border-radius: 8px; }
.pelu-dialogo button:disabled { opacity: .5; cursor: wait; }
.pelu-fecha-alternativa { display: block; margin-top: 24px; font-size: 13px; font-weight: 600; }
.pelu-fecha-alternativa input[type="date"] { display: block; width: 11rem; margin-top: 8px; }
.pelu-paso .pelu-error { color: #9a342e; background: #faefed; border-radius: 8px; padding: 12px; }
.pelu-cita-historial { border: 0; border-bottom: 1px solid #ddd4df; border-radius: 0; background: transparent; padding: 18px 0; }
@media (max-width: 1000px) {
    .pelu-hero { gap: 32px; }
    .pelu-hero-botones { flex-wrap: wrap; }
    .pelu-servicios-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pelu-visita { gap: 32px; padding: 28px; }
}
@media (max-width: 767px) {
    .pelu-hero { grid-template-columns: 1fr; gap: 36px; padding: 38px 0; }
    .pelu-hero-nombre { font-size: clamp(37px, 8vw, 52px); }
    .pelu-hero-texto { max-width: 520px; }
    .pelu-hero-visual { max-width: 380px; width: 90%; justify-self: center; }
    .pelu-hero-sello { bottom: 24px; left: -12px; padding: 14px 18px; }
    .pelu-valores { flex-wrap: wrap; justify-content: flex-start; gap: 16px 22px; padding: 22px 0; }
    .pelu-valores span { gap: 8px; font-size: 11px; }
    .pelu-valores .pelu-icono { width: 18px; }
    .pelu-seccion-titulo { align-items: flex-start; flex-direction: column; }
    .pelu-seccion-titulo h2 { font-size: 32px; }
    .pelu-bloque { margin-block: 40px; }
    .pelu-servicios-lista { gap: 12px; }
    .pelu-servicio { padding: 18px; }
    .pelu-servicio-nombre { font-size: 16px; }
    .pelu-servicios-lista .pelu-servicio { font-size: 14px; }
    .pelu-servicio-precio { font-size: 12px; }
    .pelu-visita { grid-template-columns: 1fr; padding: 24px; margin-top: 40px; }
    .pelu-paso { padding: 20px; }
    .pelu-cuenta-proxima { padding: 22px; }
    .pelu-cuenta-cita { gap: 16px; }
    .pelu-fecha-visita { width: 74px; min-height: 90px; }
    .pelu-cuenta-cita h3, .pelu-cuenta-cita h4 { font-size: 19px; }
    .pelu-cuenta-enlaces { grid-template-columns: 1fr; gap: 8px; }
    .pelu-cuenta-seccion { flex-wrap: wrap; }
    .pelu-cuenta-pedidos li { flex-wrap: wrap; gap: 8px 16px; }
    .pelu-cuenta-pedidos li > a { flex-basis: 100%; }
    .pelu-cuenta-acciones, .pelu-dialogo-acciones { flex-wrap: wrap; }
    .pelu-dialogo-acciones .pelu-boton { flex: 1; padding: 12px; }
}
@media (prefers-reduced-motion: reduce) { .pelu-reservar *, .pelu-mis-citas * { transition: none !important; } }