/* ============================================================
   ACTORES S.C.G — TRABAJA CON NOSOTROS
   El listado de convocatorias y la ficha de cada una. Se carga
   junto a site.css y se apoya en sus tokens.

   La ficha se lee como una noticia —es el mismo material y el
   mismo editor—, así que reutiliza el ritmo tipográfico de
   news.css en vez de inventarse otro. Lo propio de aquí es la
   columna de condiciones y el formulario, que es lo único de
   todo el sitio donde alguien de fuera sube un archivo.
   ============================================================ */

/* ====== HERO ====== */
.thero .psub{margin-bottom:30px}
.tstats{display:flex; flex-wrap:wrap; gap:14px}
.tstat{background:rgba(14,14,12,.06); border:1px solid rgba(14,14,12,.14); border-radius:16px; padding:14px 22px}
.tstat b{display:block; font-family:var(--font-display); font-weight:600; font-size:30px; line-height:1; color:var(--ink)}
.tstat span{font-size:12.5px; font-weight:600; color:rgba(14,14,12,.72)}

/* ====== LISTADO ====== */
.trabajo{background:var(--paper)}
.trabajo .sec-note{font-size:15px; color:var(--g2); margin:-26px 0 36px; max-width:64ch}

.vgrid{display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%,330px), 1fr)); gap:22px}

.vcard{display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:22px;
  overflow:hidden; text-decoration:none; color:var(--ink);
  transition:transform .35s var(--ease), box-shadow .35s, border-color .25s}
.vcard:hover{transform:translateY(-4px); border-color:rgba(14,14,12,.24); box-shadow:0 28px 50px -34px rgba(0,0,0,.55)}

.vcard-ph{position:relative; aspect-ratio:16/9; background:var(--orange-50) center / cover no-repeat; overflow:hidden}
.vcard-ph img{width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease)}
.vcard:hover .vcard-ph img{transform:scale(1.04)}
/* Sin miniatura, la tarjeta no se queda con un hueco gris: pone la marca. */
.vcard-ph.vacia{display:grid; place-items:center;
  background:linear-gradient(150deg, color-mix(in srgb, var(--orange) 16%, #fff), #fff)}
.vcard-ph.vacia svg{width:54px; height:54px; fill:none; stroke:color-mix(in srgb, var(--orange) 55%, #c4bfb6); stroke-width:1.4}

.vcard-area{position:absolute; left:12px; top:12px; z-index:2; padding:6px 12px; border-radius:30px;
  font-size:10.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  background:rgba(255,255,255,.94); color:var(--ink); backdrop-filter:blur(6px)}

.vcard-cuerpo{display:flex; flex-direction:column; flex:1; padding:22px}
.vcard-cuerpo h3{font-family:var(--font-display); font-weight:600; font-size:21px; line-height:1.15; margin:0 0 8px; color:var(--ink); transition:color .25s}
.vcard:hover .vcard-cuerpo h3{color:var(--orange)}
.vcard-cond{font-size:11.5px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; color:var(--g2); margin:0 0 12px}
.vcard-res{font-size:14.5px; line-height:1.55; color:var(--g2); margin:0 0 18px}
.vcard-pie{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:auto;
  padding-top:16px; border-top:1px solid var(--line)}
.vcard-plazo{font-size:12px; font-weight:600; color:var(--g2)}
.vcard-plazo.urge{color:var(--orange-700)}
.vcard-ir{font-size:13.5px; font-weight:700; color:var(--ink)}
.vcard:hover .vcard-ir{color:var(--orange)}

/* Marcas de estado */
.vsello{display:inline-flex; align-items:center; gap:6px; padding:5px 11px; border-radius:30px;
  font-size:10.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; margin-bottom:10px}
.vsello.interna{background:var(--orange-50); color:var(--orange-700)}
.vsello.cerrada{background:rgba(14,14,12,.07); color:var(--g2)}
.vcard.esta-cerrada{opacity:.72}
.vcard.esta-cerrada .vcard-ph{filter:grayscale(1)}

/* Nada abierto ahora mismo: la página no puede quedarse en blanco. */
.vnada{border:1px dashed var(--line); border-radius:24px; padding:56px 30px; text-align:center; background:#fff}
.vnada h3{font-family:var(--font-display); font-weight:600; font-size:26px; margin:0 0 10px}
.vnada p{color:var(--g2); font-size:15.5px; max-width:50ch; margin:0 auto 22px}

/* ====== FICHA ====== */
/* Mismo alto que el resto de heros del sitio (--alto-hero, site.css), con el
   texto anclado abajo como en la ficha de noticia: las dos llevan foto detrás. */
.vhero{position:relative; background:var(--ink); color:#fff; overflow:hidden;
  min-height:var(--alto-hero); display:flex; align-items:flex-end}
.vhero > .wrap{width:100%}
.vhero-img{position:absolute; inset:0; opacity:.42}
.vhero-img img{width:100%; height:100%; object-fit:cover}
.vhero::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(14,14,12,.55), rgba(14,14,12,.92))}
.vhero .wrap{position:relative; z-index:2; padding-top:clamp(108px,16svh,150px); padding-bottom:clamp(40px,6.4svh,60px)}
.vhero .crumb{color:rgba(255,255,255,.75)}
.vhero .crumb a:hover{color:#fff}
.vhero .lab{color:rgba(255,255,255,.8)}
.vhero .lab::before{background:var(--orange)}
.vhero h1{font-family:var(--font-display); font-weight:600; font-size:min(clamp(34px,5.2vw,64px), 10svh); line-height:1.02;
  letter-spacing:-.02em; margin:0; color:#fff; max-width:20ch}
.vhero .vcond{display:flex; flex-wrap:wrap; gap:10px; margin-top:26px}
.vhero .vcond span{padding:8px 15px; border-radius:30px; border:1px solid rgba(255,255,255,.28);
  background:rgba(255,255,255,.08); font-size:13px; font-weight:600}

.vficha{background:var(--paper)}
.vficha .wrap{display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:48px; align-items:start}
@media(max-width:960px){.vficha .wrap{grid-template-columns:1fr; gap:34px}}

/* El texto de la convocatoria, con el ritmo de una noticia. */
.vtexto{font-size:17px; line-height:1.72; color:#2a2a26}
.vtexto > *:first-child{margin-top:0}
.vtexto p{margin:0 0 22px}
.vtexto h2{font-family:var(--font-display); font-weight:600; font-size:27px; line-height:1.2; margin:38px 0 14px; color:var(--ink)}
.vtexto h3{font-family:var(--font-display); font-weight:600; font-size:21px; margin:30px 0 10px; color:var(--ink)}
.vtexto ul, .vtexto ol{margin:0 0 22px; padding-left:22px}
.vtexto li{margin-bottom:9px}
.vtexto blockquote{margin:28px 0; padding:4px 0 4px 22px; border-left:3px solid var(--orange);
  font-family:var(--font-display); font-size:21px; font-style:italic; color:var(--ink)}
.vtexto a{color:var(--orange-700); font-weight:600; text-decoration:underline; text-underline-offset:3px}
.vtexto img{border-radius:16px; margin:8px 0}
.vtexto figure{margin:28px 0}
.vtexto figcaption{font-size:13px; color:var(--g2); margin-top:8px}

/* ====== COLUMNA DE AL LADO ====== */
.vlado{position:sticky; top:96px; display:flex; flex-direction:column; gap:18px}
@media(max-width:960px){.vlado{position:static}}
.vcaja{background:#fff; border:1px solid var(--line); border-radius:22px; padding:24px}
.vcaja h3{font-family:var(--font-display); font-weight:600; font-size:19px; margin:0 0 6px}
.vcaja p{font-size:14px; line-height:1.6; color:var(--g2); margin:0 0 18px}

/* ====== FORMULARIO ====== */
.vform{display:flex; flex-direction:column; gap:14px}
.vcampo label{display:block; font-size:12.5px; font-weight:700; letter-spacing:.02em; color:var(--ink); margin-bottom:6px}
.vcampo input[type=text], .vcampo input[type=email], .vcampo input[type=tel], .vcampo input[type=url]{
  width:100%; height:46px; padding:0 14px; border-radius:12px; border:1px solid var(--line);
  background:var(--paper); font-family:var(--font-ui); font-size:14.5px; color:var(--ink);
  transition:border-color .25s, box-shadow .25s}
.vcampo input:focus{outline:0; border-color:var(--accent); box-shadow:0 0 0 3px var(--orange-100); background:#fff}
.vcampo .pista{display:block; font-size:11.5px; color:var(--g1); margin-top:5px; font-weight:500}
.vcampo .mal{display:block; font-size:12px; color:#c0392b; font-weight:600; margin-top:5px}
.vcampo input.mal-borde{border-color:#c0392b}

/* El archivo: el input nativo no se puede vestir, así que se esconde y la
   etiqueta hace de botón. Sigue siendo el mismo input para el teclado. */
.varchivo{position:relative; border:1px dashed var(--line); border-radius:14px; padding:18px; text-align:center;
  background:var(--paper); transition:border-color .25s, background .25s}
.varchivo:hover{border-color:var(--accent); background:#fff}
.varchivo input{position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer}
.varchivo svg{width:26px; height:26px; fill:none; stroke:var(--g2); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
.varchivo b{display:block; font-size:13.5px; margin-top:8px; color:var(--ink)}
.varchivo span{display:block; font-size:11.5px; color:var(--g2); margin-top:3px}

.vlegal{display:flex; gap:10px; align-items:flex-start; font-size:12px; line-height:1.5; color:var(--g2)}
.vlegal input{margin-top:2px; flex:0 0 auto; width:16px; height:16px; accent-color:var(--orange)}
.vlegal a{color:var(--orange-700); font-weight:600; text-decoration:underline}

.vform .btn{justify-content:center; width:100%}

/* Ya se postuló: lo que sustituye al formulario. */
.vgracias{border:1px solid color-mix(in srgb, var(--orange) 35%, #fff); background:var(--orange-50);
  border-radius:22px; padding:26px; text-align:center}
.vgracias svg{width:40px; height:40px; fill:none; stroke:var(--orange-700); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
.vgracias h3{font-family:var(--font-display); font-weight:600; font-size:21px; margin:12px 0 8px}
.vgracias p{font-size:14px; line-height:1.6; color:rgba(14,14,12,.72); margin:0 0 12px}
.vgracias code{display:inline-block; background:#fff; border:1px solid var(--line); border-radius:8px;
  padding:6px 12px; font-family:ui-monospace, monospace; font-size:15px; font-weight:700; letter-spacing:.06em; color:var(--ink)}

/* Cerrada: donde estaba el formulario. */
.vcerrada{border:1px solid var(--line); background:#fff; border-radius:22px; padding:26px; text-align:center}
.vcerrada h3{font-family:var(--font-display); font-weight:600; font-size:20px; margin:0 0 8px}
.vcerrada p{font-size:14px; color:var(--g2); margin:0 0 16px}

/* ====== OTRAS ====== */
.votras{background:#fff}
.votras .sechead{margin-bottom:30px}

/* ====== CTA ====== */
.tcta{background:var(--orange); color:var(--ink); text-align:center; overflow:hidden}
.tcta .spiral{left:-120px; bottom:-140px; width:360px; height:360px; opacity:.16}
.tcta .spiral path{stroke:#fff}
.tcta .wrap{position:relative; z-index:2}
.tcta h2{font-family:var(--font-display); font-weight:500; font-size:clamp(30px,4vw,50px); margin:0 0 14px; color:var(--ink)}
.tcta h2 em{font-style:italic; color:#fff}
.tcta p{color:rgba(14,14,12,.82); max-width:48ch; margin:0 auto 30px; font-size:18px; font-weight:500}
.tcta .cta-row{display:flex; gap:14px; justify-content:center; flex-wrap:wrap}

/* ====== RESPONSIVE ====== */
@media(max-width:640px){
  .vhero .wrap{padding-top:120px; padding-bottom:44px}
  .vcard-cuerpo{padding:18px}
  .vcaja{padding:20px}
}