/* =========================================================
   JICALAB PARTNER (/jicalab-partner/) — estilos propios de la página (prefijo pt-).
   Se enlaza después de jicalab.css y solo usa sus variables; reutiliza cat-hero, section-head, af-ctas, btn, pill,
   help-card/help-link, link-inline y las marcas todo/todo-tag.
   El formulario replica el de /contacto/ (ct-, p-contacto.css) con prefijo propio para no depender de esa hoja:
   en WordPress, los dos pasan a ser el mismo componente de formulario del tema.
   ========================================================= */

/* ---------- Cabecera: los dos recorridos a la vista desde la primera pantalla ---------- */
.pt-hero .cat-hero__head { grid-template-columns: minmax(0, 1fr) minmax(0, 470px); padding-bottom: clamp(36px, 4.4vw, 60px); } /* 470: los dos botones en una fila */
/* h1: el corte va donde cambia el color y nunca con guion automático («dermocos-mética»). Solo si «La dermocosmética» no cabe
   en una línea (320 px) se parte por el guion opcional del HTML: «dermo-cosmética» */
.pt-hero .cat-title { hyphens: manual; }
.pt-hero .cat-title .muted-word { display: block; }
.pt-hero__side { display: grid; gap: 22px; justify-items: start; }
.pt-hero__side .lead { margin: 0; }
.pt-wa-ico { width: 18px; height: 18px; flex: none; fill: currentColor; }
/* Hasta 1359 px el h1 va a todo el ancho y el texto con los botones debajo: en media columna «La dermocosmética» no cabía */
@media (max-width: 1359px) {
  .pt-hero .cat-hero__head { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 18px; }
  .pt-hero__side .lead { max-width: 62ch; }
}
@media (max-width: 760px) {
  .pt-hero .cat-hero__head { padding-bottom: 24px; gap: 14px; }
  .pt-hero__side { gap: 18px; }
  /* «La dermocosmética» en una línea de 360 a 760 px (a 390: 3 líneas y los dos botones en la primera pantalla) */
  .pt-hero .cat-title { font-size: max(32px, min(46px, calc((100vw - 52px) / 9.4))); }
}

/* ---------- Centros: cabecera con el filtro de provincia (solo con 2 o más provincias) ---------- */
.pt-filtro[hidden] { display: none; }
.pt-filtro .pill { min-height: 44px; }
.pt-centros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: clamp(10px, 1.2vw, 16px); }
.pt-centros[hidden] { display: none; }
.pt-centros > li { display: flex; min-width: 0; }

/* Tarjeta de centro: misma estructura en todas (foto o tesela de marca, insignias, nombre, lugar y acciones abajo) */
.pt-centro { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 8px; border-radius: var(--r-card); background: var(--card); border: 1px solid transparent;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease); }
.pt-centro:hover { border-color: var(--green-soft); box-shadow: 0 14px 34px rgb(30 34 22 / .08); }
.pt-centro__media { position: relative; aspect-ratio: 4 / 3; border-radius: calc(var(--r-card) - 6px); overflow: hidden; background: #e9e8e4; isolation: isolate; -webkit-mask-image: -webkit-radial-gradient(white, black); }
.pt-centro__media > img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
/* Sin foto autorizada: tesela de marca con la flor, nunca una foto genérica */
.pt-centro__media--marca { display: flex; align-items: flex-end; padding: clamp(16px, 1.6vw, 22px); background: var(--green-deep); color: var(--white); }
.pt-centro__media--marca::before { content: ''; position: absolute; width: 62%; aspect-ratio: 1; right: -12%; top: -14%; z-index: -1; background: var(--green-soft); opacity: .12; transform: rotate(-14deg); pointer-events: none;
  -webkit-mask: url(https://jicalab.com/wp-content/uploads/2026/10/flor-jicalab.png) center / contain no-repeat; mask: url(https://jicalab.com/wp-content/uploads/2026/10/flor-jicalab.png) center / contain no-repeat; }
.pt-centro__media--marca span { font-size: clamp(24px, 2.2vw, 32px); font-weight: 450; letter-spacing: -.02em; line-height: 1.08; overflow-wrap: anywhere; }
.pt-centro__body { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 16px 10px 8px; }
.pt-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.pt-badge { display: inline-flex; align-items: center; gap: 7px; min-height: 30px; padding: 6px 12px 6px 9px; border-radius: 15px; font: 600 10.5px/1.3 var(--font-alt); letter-spacing: .07em; text-transform: uppercase; text-wrap: balance; }
.pt-badge .icon { width: 15px; height: 15px; }
.pt-badge--venta { background: var(--white); color: var(--green-dark); box-shadow: inset 0 0 0 1px var(--green-soft); }
.pt-badge--analisis { background: var(--green-deep); color: var(--white); }
.pt-badge--analisis .icon { color: var(--green-soft); }
.pt-centro__name { margin-top: 2px; font: 500 clamp(19px, 1.5vw, 22px)/1.2 var(--font); letter-spacing: -.01em; color: var(--ink); overflow-wrap: anywhere; }
.pt-centro__lugar { display: flex; align-items: center; gap: 6px; font: 600 11.5px/1.3 var(--font-alt); letter-spacing: .1em; text-transform: uppercase; color: var(--green-dark); }
.pt-centro__lugar .icon { width: 15px; height: 15px; }
.pt-centro__dir { font-size: 14px; line-height: 1.5; color: var(--muted); }
.pt-centro__acciones { margin-top: auto; padding-top: 8px; width: 100%; display: flex; flex-wrap: wrap; gap: 8px; }
.pt-accion { flex: 1 1 auto; min-height: 44px; padding-inline: 14px; gap: 7px; background: var(--white); }
.pt-accion .pt-wa-ico { width: 16px; height: 16px; }

/* ---------- Sin centros confirmados: aviso de próxima incorporación ---------- */
.pt-pronto { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 22px clamp(22px, 3.4vw, 52px);
  padding: clamp(24px, 3.4vw, 48px); border-radius: var(--r-card); background: var(--green-tint); overflow: hidden; overflow: clip; isolation: isolate; }
.pt-pronto[hidden] { display: none; }
.pt-pronto::after { content: ''; position: absolute; width: clamp(220px, 22vw, 320px); aspect-ratio: 1; right: clamp(-90px, -5vw, -60px); bottom: clamp(-120px, -7vw, -80px); z-index: -1; background: var(--green); opacity: .07; transform: rotate(-16deg); pointer-events: none;
  -webkit-mask: url(https://jicalab.com/wp-content/uploads/2026/10/flor-jicalab.png) center / contain no-repeat; mask: url(https://jicalab.com/wp-content/uploads/2026/10/flor-jicalab.png) center / contain no-repeat; }
.pt-pronto__ico { align-self: start; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--white); color: var(--green-dark); }
.pt-pronto__ico .icon { width: 26px; height: 26px; }
.pt-pronto__txt { display: grid; gap: 10px; justify-items: start; }
.pt-pronto .label { color: var(--green-dark); } /* el verde de marca sobre el tinte se queda en 4,48:1 */
.pt-pronto__title { max-width: 24ch; font-size: clamp(24px, 2.4vw, 34px); font-weight: 450; letter-spacing: -.02em; line-height: 1.12; }
.pt-pronto__txt p { max-width: 56ch; font-size: clamp(15px, 1.15vw, 16.5px); line-height: 1.6; color: var(--text); }
.pt-pronto .todo-tag { position: static; max-width: none; margin-top: 4px; }
.pt-pronto__ctas { display: grid; gap: 10px; }
.pt-pronto__ctas .btn--line { background: var(--white); border-color: var(--white); }
.pt-pronto__ctas .btn--line:hover { background: var(--green); border-color: var(--green); }
.pt-pronto.todo { outline-offset: -2px; }

/* ---------- Profesionales: texto + contacto directo y formulario ---------- */
.pt-pro { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 4.6vw, 80px); align-items: start; }
.pt-pro__side { display: grid; gap: clamp(28px, 3vw, 40px); min-width: 0; }
.pt-pro__head .lead { max-width: 46ch; }
/* Escritorio con altura suficiente: el texto y la tarjeta de contacto acompañan al formulario al bajar */
@media (min-width: 1101px) and (min-height: 820px) {
  .pt-pro__side { position: sticky; top: calc(var(--header-h) + 2 * var(--gutter) + 24px); }
}

/* Tarjeta «Hablemos» (la de /sobre-nosotros/) con el retrato real de Sara */
.pt-talk { flex: none; gap: 18px; padding: clamp(22px, 2.4vw, 30px) clamp(22px, 2.4vw, 30px) 12px; overflow: clip; } /* clip: el interior nunca se desplaza de lado (con hidden, un scrollIntoView lo movía) */
.pt-talk__who { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 18px; align-items: center; }
.pt-talk__photo { width: 84px; aspect-ratio: 4 / 5; border-radius: 18px; overflow: hidden; background: rgb(255 255 255 / .08); isolation: isolate; -webkit-mask-image: -webkit-radial-gradient(white, black); }
.pt-talk__photo img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; transform: scale(1.45); transform-origin: 46% 27%; } /* retrato: cara y hombros */
.pt-talk__name { display: grid; gap: 4px; min-width: 0; }
.pt-talk .help-card__kicker { padding-top: 0; }
.pt-talk .help-card__title { max-width: none; font-size: clamp(21px, 1.8vw, 26px); line-height: 1.12; letter-spacing: -.015em; }
.pt-talk__role { font-size: 14px; color: rgb(255 255 255 / .74); }
.pt-talk .help-list { margin-top: 0; }
.pt-talk .help-link { min-height: 60px; }

/* ---------- Formulario (mismo diseño que el de /contacto/; aquí sobre blanco porque la hoja es crema) ---------- */
.pt-form-wrap { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); padding: clamp(22px, 3vw, 44px); border-radius: var(--r-card); background: var(--white); border: 1px solid var(--line); }
.pt-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; align-self: start; } /* la columna nunca se ensancha por un hijo largo */
.pt-form[hidden] { display: none; }
.pt-form__head { display: grid; gap: 8px; }
.pt-form__title { font-size: clamp(24px, 2.2vw, 30px); font-weight: 450; letter-spacing: -.02em; line-height: 1.1; }
.pt-form__req { font-size: 14px; color: var(--muted); }
.pt-req { color: var(--green-dark); font-weight: 700; }
.pt-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 16px; }
.pt-field { display: grid; gap: 8px; align-content: start; min-width: 0; }
.pt-field > label { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; min-height: 22px; font: 600 11.5px/1.25 var(--font-alt); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
.pt-opt { display: inline-flex; align-items: center; min-height: 20px; padding: 0 8px; border-radius: var(--pill); background: var(--cream); border: 1px solid var(--line-strong); font: 600 10px/1 var(--font-alt); letter-spacing: .08em; color: var(--muted); }
/* Borde visible (contraste ≥ 3:1 con el fondo) y 16 px de letra para que iOS no amplíe al escribir */
.pt-input { width: 100%; min-height: 54px; padding: 13px 18px; border: 1px solid var(--soft); border-radius: 16px; background: var(--white); font: 400 16px/1.4 var(--font); color: var(--ink);
  -webkit-appearance: none; appearance: none; transition: border-color .2s var(--ease), box-shadow .2s var(--ease); }
.pt-input::placeholder { color: var(--muted); opacity: 1; }
.pt-input:hover { border-color: var(--muted); }
.pt-input:focus { outline: none; border-color: var(--green); box-shadow: inset 0 0 0 1px var(--green); } /* foco en el propio borde, como el resto de la web */
.pt-input[aria-invalid="true"] { border-color: var(--sale); box-shadow: inset 0 0 0 1px var(--sale); }
.pt-input[aria-invalid="true"]:focus { border-color: var(--sale); box-shadow: inset 0 0 0 2px var(--sale); }
textarea.pt-input { min-height: 150px; resize: vertical; }
.pt-error { display: flex; align-items: flex-start; gap: 7px; font-size: 14px; line-height: 1.4; color: var(--sale); }
.pt-error[hidden] { display: none; }
.pt-error .icon { width: 16px; height: 16px; margin-top: 1px; }
/* Consentimiento: sin marcar por defecto; toda la línea es pulsable */
.pt-consent { display: grid; gap: 4px; }
.pt-check { display: flex; align-items: flex-start; gap: 12px; min-height: 44px; padding-block: 8px; font-size: 15px; line-height: 1.5; color: var(--text); cursor: pointer; }
.pt-check input { flex: none; width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--green); cursor: pointer; }
.pt-check input:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: 4px; }
.pt-check input[aria-invalid="true"] { outline: 2px solid var(--sale); outline-offset: 2px; border-radius: 4px; }
/* Primera capa de protección de datos (RGPD) */
.pt-legal { padding: 14px 18px; border-radius: 16px; background: var(--cream); border: 1px solid var(--line); font-size: 13px; line-height: 1.55; color: var(--muted); }
.pt-legal b { color: var(--ink); font-weight: 600; }
.pt-legal.todo { outline-offset: 0; }
.pt-form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.pt-form__foot .btn { min-width: 220px; max-width: 100%; }
.pt-form__todo { position: static; max-width: 30ch; }

/* Solicitud recibida (simulada en el prototipo) */
.pt-done { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; justify-items: start; align-self: center; }
.pt-done[hidden] { display: none; }
.pt-done__ico { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: var(--green); color: var(--white); }
.pt-done__ico .icon { width: 26px; height: 26px; stroke-width: 2; }
.pt-done__title { font-size: clamp(26px, 2.4vw, 34px); font-weight: 450; letter-spacing: -.02em; line-height: 1.1; text-wrap: balance; overflow-wrap: anywhere; }
.pt-done__title:focus { outline: none; } /* destino de foco programático, no un control */
.pt-done p { max-width: 52ch; font-size: 16px; line-height: 1.6; color: var(--muted); overflow-wrap: anywhere; }
.pt-done .todo-tag { position: static; justify-self: start; max-width: 46ch; }
.pt-done.todo { padding: 4px; outline-offset: 8px; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .pt-centros { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pt-pronto { grid-template-columns: auto minmax(0, 1fr); }
  .pt-pronto__ctas { grid-column: 2; display: flex; flex-wrap: wrap; }
  /* Una columna: texto, formulario y, al final, el contacto directo */
  .pt-pro { grid-template-columns: minmax(0, 1fr); }
  .pt-pro__side { display: contents; }
  .pt-pro__head { order: 0; max-width: 720px; }
  .pt-form-wrap { order: 1; }
  .pt-talk { order: 2; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: 12px clamp(20px, 3vw, 40px); padding-bottom: clamp(16px, 2vw, 22px); }
  .pt-talk .help-link:first-child { border-top: 0; }
}
@media (max-width: 760px) {
  /* «Solicitar información profesional» no cabe en una línea en móvil: pasa a dos, centrado y sin desbordar */
  .pt-form__foot .btn { width: 100%; min-width: 0; min-height: 54px; padding: 12px 20px; white-space: normal; text-align: center; text-wrap: balance; line-height: 1.3; }
  .pt-form__todo { max-width: none; }
  .pt-talk { display: flex; align-items: stretch; padding-bottom: 12px; }
  .pt-talk .help-link:first-child { border-top: 1px solid rgb(255 255 255 / .12); }
}
@media (max-width: 640px) {
  .pt-centros { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; }
  .pt-centro__media { aspect-ratio: 16 / 10; } /* una columna: foto más baja para que la lista no se alargue */
  .pt-pronto { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .pt-pronto__ico { width: 52px; height: 52px; }
  .pt-pronto__ico .icon { width: 22px; height: 22px; }
  .pt-pronto__ctas { grid-column: auto; display: grid; }
  .pt-pronto__ctas .btn { width: 100%; }
  .pt-row { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 400px) { .pt-form__foot .btn .icon { display: none; } } /* el texto del botón en dos líneas, no en tres */
/* Móviles muy estrechos */
@media (max-width: 359px) {
  .pt-form-wrap { padding: 18px 16px; }
  .pt-pronto { padding: 20px 16px; }
  .pt-pronto__ctas .btn, .pt-hero .af-ctas .btn { padding-inline: 16px; letter-spacing: .06em; }
  .pt-talk__who { grid-template-columns: 70px minmax(0, 1fr); gap: 14px; }
  .pt-talk__photo { width: 70px; }
}